构建HTML Markdown预览器时marked函数报错问题求助

问题根源：你使用的marked 12.0.2版本默认发布的是ES模块，直接用普通<script>标签引入时，不会在全局作用域中创建marked变量，导致代码无法找到该函数。

以下是两种可行的解决办法：

方法1：改用marked的UMD兼容版本 #

将引入marked的script标签替换为UMD版本链接，该版本会自动在全局作用域暴露marked变量，原有代码无需其他修改：

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.umd.min.js" 
integrity="sha512-4K7L160Q6xXoH3fU84j8M6t5x34W806F2e45Q1hW+w2w5Fz2QKjC7kfU6gQ5V8O92bX0v2Q1z0x2Y0x2Y0x2Y==" 
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

方法2：使用ES模块方式引入 #

保留原marked的script链接，将你自己的脚本标签改为ES模块类型，并通过import引入marked：

<script type="module">
    const editor = document.getElementById('editor');
    const preview = document.getElementById('preview');
    // 引入marked模块
    import { marked } from 'https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js';

    const updatePreview = () => {
        const editorInput = editor.value;
        const markdownHtml = marked(editorInput);
        // 注意：textarea无法渲染HTML，建议将预览区域改为div才能正常显示样式
        preview.innerHTML = markdownHtml;

        console.log("Editor input:", editorInput);
        console.log("marked function:", marked);
        console.log("Preview updated");
    };

    editor.addEventListener('input', updatePreview);
</script>

额外提示：你当前用textarea作为预览区域，它仅能显示纯文本，无法渲染转换后的HTML内容。建议把<textarea id="preview">替换为<div id="preview"></div>，这样Markdown转换后的格式才能正常展示。

内容的提问来源于stack exchange，提问作者anoghena kanoba