Marked.js及其插件CDN地址与关联使用方法
CDN地址 - marked.js:`https://cdn.jsdelivr.net/npm/marked/marked.min.js` - marked-highlight:`https://cdn.jsdelivr.net/npm/marked-highlight@2.0.0/lib/marked-highlight.min.js` - marked-emoji:`https://cdn.jsdelivr.net/npm/marked-emoji@2.0.0/lib/marked-emoji.min.js` - marked-extended-tables:`https://cdn.jsdelivr.net/npm/marked-extended-tables@2.0.0/lib/marked-extended-tables.min.js` 关联使用方式 以下是一个简单的HTML示例,展示如何关联使用这些库: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Marked.js Example</title> <!-- 引入marked.js --> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <!-- 引入marked-highlight --> <script src="https://cdn.jsdelivr.net/npm/marked-highlight@2.0.0/lib/marked-highlight.min.js"></script> <!-- 引入marked-emoji --> <script src="https://cdn.jsdelivr.net/npm/marked-emoji@2.0.0/lib/marked-emoji.min.js"></script> <!-- 引入marked-extended-tables --> <script src="https://cdn.jsdelivr.net/npm/marked-extended-tables@2.0.0/lib/marked-extended-tables.min.js"></script> <!-- 引入highlight.js用于代码高亮 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/default.min.css"> <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/lib/highlight.min.js"></script> </head> <body> <div id="output"></div> <script> // 配置marked.js并使用插件 marked.use( // 使用marked-highlight插件 markedHighlight({ langPrefix: 'hljs language-', highlight(code, lang) { const language = hljs.getLanguage(lang) ? lang : 'plaintext'; return hljs.highlight(code, { language }).value; } }), // 使用marked-emoji插件 markedEmoji(), // 使用marked-extended-tables插件 markedExtendedTables() ); // 示例Markdown文本 const markdown = ` # Hello, World! :smile: \`\`\`javascript function greet() { return 'Hello, World!'; } \`\`\` | Header 1 | Header 2 | |----------|----------| | Cell 1 | Cell 2 | `; // 将Markdown转换为HTML const html = marked.parse(markdown); // 将HTML插入到页面中 document.getElementById('output').innerHTML = html; </script> </body> </html> ``` 在这个示例中,先引入了各个库的CDN链接,然后使用`marked.use()`方法将`marked-highlight`、`marked-emoji`和`marked-extended-tables`插件应用到`marked.js`中。使用`marked.parse()`方法将Markdown文本转换为HTML,并将其插入到页面中。 [2026-02-12 22:06:44 | AI问答 | 833点数解答]
- [字节豆包] Marked.js及其插件CDN地址与关联使用方法(833点数解答 | 2026-02-12 22:06:44)6
- [字节豆包] 工程项目里程碑节点:表格数据导出 Excel 函数示例及注意要点(310点数解答 | 2025-05-22 07:42:44)199
- Python实现好友通讯录信息增删改查功能,附示例代码(1248点数解答 | 2024-04-23 17:34:25)270
- [字节豆包] 地质灾害监测数据折线图代码优化建议与逻辑要点揭秘(183点数解答 | 2025-03-12 21:19:50)245
- [DeepSeek] 全球危机雷达图代码:从结构搭建到数据可视化全解析(1334点数解答 | 2025-05-03 10:17:27)269
- [DeepSeek] 超全攻略:用 CSS 给 404 页面增添现代化炫酷美化效果(1092点数解答 | 2025-05-24 08:33:54)164
- [字节豆包] 深度揭秘:通过代码和图表展现<从优秀到卓越>核心数据对比 (1719点数解答 | 2025-06-26 15:47:17)165
- [讯飞星火] "Debugging 'Cannot Read Properties of Null (reading \'userid\')' Error in Vue Components: Steps and Example"(614点数解答 | 2024-11-28 14:31:57)253
- [字节豆包] HTML+jQuery 实现列表元素悬停动画效果:代码详解与注意事项(475点数解答 | 2024-12-19 14:58:05)349
- [字节豆包] HTML+jQuery:打造动态导航栏动画效果及注意事项(495点数解答 | 2024-12-19 14:58:06)298
- [讯飞星火] HTML+jQuery:打造带动态交互效果的商品展示页面(497点数解答 | 2024-12-19 14:58:18)304
- [讯飞星火] HTML与jQuery结合:实现商品列表交互动画的首页代码解析(497点数解答 | 2024-12-19 14:58:20)320