extends @/layout/single-page

block head
    link(rel="stylesheet", href="https://unpkg.com/bytemd/dist/index.css")
    //- link(rel="stylesheet", href="https://unpkg.com/github-markdown-css")
    script.
         let process = {}
        process.env = {}
        process.env.NODE_ENV = 'production'
    script(src="https://unpkg.com/bytemd")
    script(src="https://unpkg.com/@bytemd/plugin-gfm")
    script(src="https://unpkg.com/bytemd@1.21.0/locales/zh_Hans.json")

block page
    include @/helper/flush.pug
    style 
        :public style/views/test.css
    #root
    script.
        const plugins = [bytemdPluginGfm()]

        const editor = new bytemd.Editor({
            target: document.getElementById('root'),
            props: {
                value: '# heading\n\nparagraph\n\n> blockquote',
                //- locale: "https://unpkg.com/bytemd@1.21.0/locales/zh_Hans.json",
                locale: "zh_Hans.json",
                plugins,
            },
        })
        setTimeout(()=>{
            let el = document.querySelector(".bytemd-preview")
            el.classList.add("content")
        })
        editor.$on('change', (e) => {
            editor.$set({ value: e.detail.value })
        })