关于Nodejs后台传来的 Markdown 语句的前端解析

关于Nodejs后台传来的 Markdown 语句的前端解析

后台传来的 Markdown 语句里有代码块，前端解析时，代码块未格式化，只有 <code>代码块</code> 标签，code 标签中没有 span 标签。用的 marked 和 prettify。

4 回复

关于Nodejs后台传来的 Markdown 语句的前端解析

在处理从 Node.js 后台传来的 Markdown 文本时，有时会遇到一些常见的问题，比如代码块未能正确格式化。本文将介绍如何使用 marked 和 prettify 来解决这个问题。

1. 安装依赖

首先，确保你已经安装了 marked 和 prismjs（用于代码高亮）。你可以使用 npm 来安装这些依赖：

npm install marked prismjs

2. 使用 marked 解析 Markdown

在前端，我们可以使用 marked 来解析 Markdown 文本，并且通过配置项来支持代码块的语法高亮。以下是一个简单的示例：

import marked from 'marked';
import Prism from 'prismjs';

// 初始化 marked 的 renderer 对象
const renderer = new marked.Renderer();

// 覆盖 code 块的渲染方法
renderer.code = function(code, language) {
    const validLanguage = Prism.languages[language];
    if (validLanguage) {
        return `<pre><code class="language-${language}">${Prism.highlight(code, validLanguage, language)}</code></pre>`;
    } else {
        return `<pre><code>${code}</code></pre>`;
    }
};

// 配置 marked
marked.setOptions({
    renderer: renderer,
    gfm: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false
});

// 示例 Markdown 文本
const markdownText = `
# 标题

这是一个代码块:

\`\`\`javascript
function helloWorld() {
    console.log("Hello, world!");
}
\`\`\`
`;

// 解析 Markdown
const html = marked(markdownText);

// 将 HTML 插入到页面中
document.getElementById('content').innerHTML = html;

3. 解释

  • marked: 这是一个流行的 Markdown 解析器，可以将 Markdown 文本转换为 HTML。
  • renderer.code: 我们覆盖了 code 块的渲染方法，以确保代码块被正确地包裹在 <pre> 和 <code> 标签中，并添加了语言类名以便 prismjs 进行语法高亮。
  • Prism: prismjs 是一个现代的语法高亮库，它可以根据语言自动给代码添加样式。

通过这种方式，我们可以确保从 Node.js 后台传来的 Markdown 文本中的代码块能够正确地进行语法高亮，从而提升用户体验。


难道真的是因为html解析不了换行符的bug原因？ 但是我用了一个隐藏的textarea保存这条markdown语句，然后再解析的，还是有问题，代码块的确格式化了，但是代码中的关键字没有变色

发现问题了。少写了一句 prettyPrint();

在处理从 Node.js 后端传来的 Markdown 文本时，如果需要正确解析并格式化代码块，可以使用 marked 结合 prism.js 或者 highlight.js 来实现。以下是一个简单的示例，展示如何设置和使用这些库来正确显示 Markdown 中的代码块。

示例代码

首先安装所需的 npm 包：

npm install marked highlight.js

然后创建一个前端脚本来解析和显示 Markdown 内容：

import { marked } from 'marked';
import hljs from 'highlight.js';

// 配置 marked 使用 highlight.js
marked.use({
    highlight: function (code, lang) {
        if (lang && hljs.getLanguage(lang)) {
            return hljs.highlight(code, { language: lang }).value;
        }
        return hljs.highlightAuto(code).value;
    }
});

// 示例 Markdown 字符串
const markdownContent = `
# 示例标题

这是一个简单的代码块:

\`\`\`javascript
function helloWorld() {
    console.log("Hello, World!");
}
\`\`\`
`;

// 解析 Markdown
const htmlContent = marked(markdownContent);

// 将解析后的 HTML 插入到 DOM 中
document.getElementById('content').innerHTML = htmlContent;

// 如果页面中包含预格式化的文本，使用 highlight.js 进行高亮
document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
});

HTML 模板

确保你的 HTML 页面中有一个用于显示内容的容器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Markdown 示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
</head>
<body>
    <div id="content"></div>
    <script type="module" src="./path/to/your/script.js"></script>
</body>
</html>

解释

  1. marked: 是一个流行的 Markdown 解析器。
  2. highlight.js: 是一个用于语法高亮的 JavaScript 库。
  3. 在 marked.use() 方法中，我们配置了 highlight 函数，它接收代码块的内容和语言，并返回经过语法高亮的代码块。
  4. 最后，我们使用 querySelectorAll 来找到所有代码块，并通过 hljs.highlightBlock() 进行高亮处理。

这样设置后，你的 Markdown 内容中的代码块将会被正确地格式化和高亮显示。

回到顶部