Codepen中React+Marked开发Markdown预览器报找不到marked变量错误

问题根因 #

ReferenceError: Can't find variable: marked 错误本质是运行时全局环境下没有挂载marked变量，结合项目此前正常、近期突然报错的情况，有两个常见触发原因，对应解决方案如下：

解决方案 #

1. 检查Marked库引入有效性 #

先确认Codepen项目的外部资源配置：

• 进入项目页右上角的「Settings」→「JS」选项卡
• 查看「Add External Scripts/Pens」列表中是否添加了Marked的CDN资源，资源是否可正常访问
• 推荐使用稳定的UMD版本CDN，会自动挂载全局marked变量：https://unpkg.com/marked@4.3.0/lib/marked.umd.min.js

2. 适配新版Marked API #

如果近期更新了Marked到v5及以上版本，Marked的全局调用方式已经变更，不再支持直接调用marked()函数，需要改为调用marked.parse()方法：
把代码中第40行的：

const markdown = marked(text, {breaks: true});

替换为：

const markdown = marked.parse(text, {breaks: true});

验证方法 #

修改后保存项目刷新，只要marked变量可以被正常识别，预览功能就可以恢复正常运行。

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