当前位置：首页 > 行业动态 > 正文

marked.js cdn

Marked.js 是一个轻量级的 Markdown 解析器和编译器，可以通过 CDN 引入到项目中。以下是使用 marked.js CDN 的示例代码：“ html，，，，，Marked.js Example，，，，，， const markdownText = # Hello, Marked.js!， This is a simple example of using Marked.js to render Markdown content. ;， document.getElementById('markdown-content').innerHTML = marked(markdownText);，，，，“

Marked.js CDN 使用指南

一、Marked.js 简介

Marked.js 是一个广受欢迎的 JavaScript 库，专门用于将 Markdown 文本转换为 HTML，它能够在浏览器端和 Node.js 环境下高效运行，支持 Markdown 的所有基本语法，如标题、段落、列表、链接、图片等，还支持一些扩展语法，如表格、代码块、代码高亮、删除线、粗体、斜体等。

二、通过 CDN 引入 Marked.js

（一）常见 CDN 服务及地址

1、BootCDN：提供了多个版本的 Marked.js，https://cdn.bootcss.com/marked/0.8.1/marked.min.js ，这是较为常用的版本之一。

2、JSDelivr：https://cdn.jsdelivr.net/npm/marked/ ，该服务速度较快且稳定，能确保库文件的快速加载。

（二）在 HTML 中引入

以 BootCDN 为例，在 HTML 页面的<head> 或<body> 标签内添加以下<script> 标签即可引入：

<script src="https://cdn.bootcss.com/marked/0.8.1/marked.min.js"></script>

这样，在页面的其他脚本中就可以使用 Marked.js 提供的功能了。

marked.js cdn

三、Marked.js 基础用法示例

（一）简单的 Markdown 转 HTML

1、HTML 部分：创建一个文本区域用于输入 Markdown 文本，以及一个用于显示转换后的 HTML 内容的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Marked.js Example</title>
    <script src="https://cdn.bootcss.com/marked/0.8.1/marked.min.js"></script>
</head>
<body>
    <textarea id="markdownInput" rows="10" cols="50"># Markdown Title
This is a paragraph in Markdown.
List item 1
List item 2
</textarea>
    <div id="htmlOutput"></div>
    <script>
        // JavaScript 部分
        const markdownText = document.getElementById('markdownInput').value;
        const htmlContent = marked(markdownText);
        document.getElementById('htmlOutput').innerHTML = htmlContent;
    </script>
</body>
</html>

2、效果展示：当在文本区域输入 Markdown 文本后，页面会自动将其转换为 HTML 并显示在下方的<div> 元素中，输入上述 Markdown 文本后，会显示出对应的带有标题、段落和列表样式的 HTML 内容。

（二）配置选项

Marked.js 提供了丰富的配置选项，可以通过设置这些选项来定制 Markdown 的解析和输出行为，以下是一些常用的配置选项及其说明：

选项 描述 示例值
gfm 是否启用 GitHub 风格的 Markdown 语法，如任务列表、表格等。 true
tables 是否支持表格语法。 true
breaks 是否将换行符转换为 false
pedantic 是否严格解析 Markdown 语法，对不符合规范的语法进行更严格的处理。 false
sanitize 是否对生成的 HTML 进行安全过滤，以防止 XSS 攻击。 true
smartLists 是否将标点符号周围的列表项转换为智能列表（如使用无序列表的圆点或有序列表的数字）。 true

示例代码：

marked.js cdn

const renderer = new marked.Renderer();
const options = {
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: true,
    smartLists: true
};
const htmlContent = marked(markdownText, options, renderer);
document.getElementById('htmlOutput').innerHTML = htmlContent;

四、Marked.js 的高级用法

（一）自定义渲染器

通过创建自定义渲染器，可以对 Markdown 中的各种元素进行更精细的控制和自定义渲染，可以自定义代码块的渲染方式，使其具有特定的样式或功能。

const renderer = new marked.Renderer();
renderer.code = function(code, infostring, escaped) {
    return<pre><code class="language-${infostring}">${escaped}</code></pre>;
};
const htmlContent = marked(markdownText, {}, renderer);
document.getElementById('htmlOutput').innerHTML = htmlContent;

上述代码中，自定义了代码块的渲染方式，为其添加了一个表示编程语言的 CSS 类，以便后续可以通过 CSS 进行样式定制。

（二）与后端数据结合

如果后端提供了 Markdown 格式的数据，可以在前端使用 Marked.js 将其转换为 HTML 并进行展示，通过 AJAX 请求获取后端的 Markdown 数据，然后使用 Marked.js 进行转换：

fetch('/getMarkdownData')
    .then(response => response.json())
    .then(data => {
        const htmlContent = marked(data.content);
        document.getElementById('htmlOutput').innerHTML = htmlContent;
    })
    .catch(error => console.error('Error fetching Markdown data:', error));

上述代码中，假设后端提供了一个名为/getMarkdownData 的接口返回 Markdown 数据，前端通过fetch 请求获取数据后，使用 Marked.js 将其转换为 HTML 并显示在页面上。

五、相关问题与解答

marked.js cdn

（一）如何更新引入的 Marked.js 版本？

如果需要使用最新版本的 Marked.js，可以访问其官方发布页面或其他可靠的 CDN 服务提供商，查找最新的版本号，并按照上述引入方式更新<script> 标签中的 URL，如果最新版本是 4.0.10，则可以将 BootCDN 的地址改为：https://cdn.bootcss.com/marked/4.0.10/marked.min.js。

（二）Marked.js 生成的 HTML 存在安全问题吗？

Marked.js 默认不会对生成的 HTML 进行安全处理，这可能导致 XSS（跨站脚本攻击）等安全问题，在使用 Marked.js 生成 HTML 之前，建议安装并使用 DOMPurify 库来净化生成的 HTML，可以通过 npm 安装 DOMPurify：npm install dompurify，然后在代码中使用DOMPurify.sanitize 方法对生成的 HTML 进行安全过滤。

相关文章