新版运行报错 markmap.js:34 Uncaught SyntaxError: Unexpected token ':' (at markmap.js:34:14)

[appotry]

参数配置如下

hexo_markmap:
  pjax: false
  katex: true
  prism: true # true | false
  userCDN:
    d3_js: https://fastly.jsdelivr.net/npm/d3@6
    markmap_view_js: https://fastly.jsdelivr.net/npm/markmap-view@0.2.7
    katex_css: 'https://fastly.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css'
    # prism_css: https://fastly.jsdelivr.net/npm/prismjs@1.25.0/themes/prism.css
    prism_css: 'https://blog.17lai.site/libs/prism/prism.min.css'
  lockView: false
  fixSVGAttrNaN: false

生成的markmap.js代码如下

const initMarkmap = async () => {
    const debounce = (callback, wait) => {
        let timeout;
        return function (...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => callback.apply(this, args), wait);
        };
    }
    const markmapResize = new CustomEvent('markmapResize')
    const robserver = new ResizeObserver((entries) => {
        entries.forEach(entry => entry.target.dispatchEvent(markmapResize))
    })

    const autoFit = (el, obj) => {
        robserver.observe(el.parentNode)
        el.parentNode.addEventListener('markmapResize', debounce(() => obj.fit(), 100))
    }
    const createMarkmap = () => {
        document.querySelectorAll('.markmap-container>svg').forEach(el => {
            let obj = markmap.Markmap.create(el, {
                autoFit: true
            }, JSON.parse(el.getAttribute('data')))
            autoFit(el, obj)

        })
    }

    if (window.markmap && Object.keys(window.markmap).length != 0) {
        createMarkmap();
        return
    }
    const CDN = {
        "js": {
            "d3": "https://fastly.jsdelivr.net/npm/d3@6",
            "markmap_view": "https://fastly.jsdelivr.net/npm/markmap-view@0.2.7",
        },
        "css": [
        https: //fastly.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css
        https: //blog.17lai.site/libs/prism/prism.min.css
      ],
    }
    const loadElement = (elname, attr) => {
        const el = document.createElement(elname)
        for (let [name, value] of Object.entries(attr)) {
            el[name] = value
        }
        document.body.appendChild(el);
        return new Promise((res, rej) => {
            el.onload = res
            el.onerror = rej
        })
    }
    const loadScript = (url) => loadElement('script', {
        'src': url
    })
    const loadCSS = (url) => loadElement('link', {
        'href': url,
        'rel': "stylesheet"
    })
    const loadStyle = (style) => document.head.insertAdjacentHTML("beforeend",
        "<style>.markmap-container{display:flex;justify-content:center;margin:0 auto;width:90%;height:500px}.markmap-container svg{width:100%;height:100%}@media(max-width:768px){.markmap-container{height:400px}}</style>"
    )
    loadStyle()
    await loadScript(CDN.js.d3)
    await loadScript(CDN.js.markmap_view)
    await Promise.all(CDN.css.map(loadCSS))

    createMarkmap()
}
if (document.querySelector('.markmap-container')) {
    initMarkmap()
}

用AI助手查了下，AI的回复如下

这个错误是因为在第34行的 CDN 对象定义中的 css 属性赋值有语法错误:

"css": [
  https://fastly.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css
  https://blog.17lai.site/libs/prism/prism.min.css 
]

数组元素之间使用的是冒号 ":",而不是逗号 ","。

应该修改为:

"css": [
  "https://fastly.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css",
  "https://blog.17lai.site/libs/prism/prism.min.css"
]

使用逗号分隔数组元素,并添加引号将地址作为字符串。

这是一个典型的 JavaScript 语法错误,应该仔细检查对象字面量中的属性定义,确保使用了正确的语法。

[maxchang3]

最近版本好像都没有修改这块的逻辑，仔细一看确实一直以来都写的有点问题，应该在模板字符串外添加引号即可。最新版本应该已经修复了，无需在配置项中添加引号。你试试看orz。

[appotry]

已验证，已经修复了