Nodejs marked+highlight.js 高亮效果没出来，谁有例子

Nodejs marked+highlight.js 高亮效果没出来，谁有例子

nodeclub的例子有点复杂，没看懂。

7 回复

Nodejs marked + highlight.js 高亮效果没出来，谁有例子

在使用 marked 和 highlight.js 进行 Markdown 渲染时，有时可能会遇到高亮效果没有正确显示的问题。这通常是因为 highlight.js 没有被正确地初始化或者集成到 marked 的渲染流程中。下面是一个简单的示例代码，展示如何将 highlight.js 集成到 marked 中，并实现代码高亮。

示例代码

首先，确保你已经安装了 marked 和 highlight.js：

npm install marked highlight.js

接下来，在你的 Node.js 应用程序中引入并配置这些库：

const express = require('express');
const marked = require('marked');
const hljs = require('highlight.js');

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

// 设置代码块的渲染函数
renderer.code = function(code, language) {
    // 使用 highlight.js 对代码进行高亮
    const highlightedCode = hljs.highlightAuto(code).value;
    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
};

// 配置 marked 使用自定义的 renderer
marked.setOptions({
    renderer: renderer,
    gfm: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false
});

// 创建 Express 应用
const app = express();
const port = 3000;

app.get('/', (req, res) => {
    const markdownText = `
\`\`\`javascript
function helloWorld() {
    console.log("Hello, world!");
}
\`\`\`
`;

    // 使用 marked 处理 Markdown 文本
    const html = marked(markdownText);
    res.send(html);
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

解释

  1. 引入依赖：我们首先安装并引入 marked 和 highlight.js。
  2. 创建 Renderer：通过 new marked.Renderer() 创建一个 Renderer 实例。
  3. 设置代码块渲染函数：在 renderer.code 方法中，我们调用 hljs.highlightAuto 来对代码进行高亮处理，并返回包含高亮代码的 HTML 字符串。
  4. 配置 marked：通过 marked.setOptions 方法设置 marked 的选项，并指定使用自定义的 renderer。
  5. 创建 Express 应用：我们创建了一个简单的 Express 应用，用于处理请求并将 Markdown 转换为 HTML。
  6. 处理请求：在路由处理器中，我们将 Markdown 文本传递给 marked 进行处理，并将结果发送回客户端。

通过上述步骤，你可以成功地在 Node.js 应用中使用 marked 和 highlight.js 实现代码高亮功能。希望这个示例对你有所帮助！


marked + highlight 的官方文档看了之后有什么问题吗？

官方文档比较简单，按照那个高亮不出来，看nodeclub的，是不是要自定义什么呢

var marked = require('marked');
var utils = require('../libs/util');

// Set default options
var renderer = new marked.Renderer();


renderer.code = function(code, lang) {
var language = lang && (’ language-’ + lang) || ‘’;
return ‘<pre class="prettyprint’ + language + ‘">’
+ ‘<code>’ + code.replace(/</g, ‘&lt;’).replace(/>/g, ‘&gt;’) + ‘</code>’
+ ‘</pre>’;
};


marked.setOptions({
renderer: renderer,
gfm: true,
tables: true,
breaks: true,
pedantic: false,
sanitize: false,
smartLists: true
});


exports.markdown =  function(text) {
return ‘<div class=“markdown-text”>’ + utils.xss(marked(text || ‘’)) + ‘</div>’;
};

Marked 本身没有处理高亮, 需要在 renderer.code 里自己做

markedjs官方不是有告诉怎么用highlight 的教程吗

看了还是不会啊，搞了一两天了，囧

要实现 marked 和 highlight.js 的高亮效果，你需要确保两个库正确集成，并且在解析 Markdown 文本时能够调用 highlight.js 进行代码高亮。下面是一个简单的示例，展示了如何配置和使用这两个库。

示例代码

首先，确保你已经安装了所需的库：

npm install marked highlight.js

然后，在你的项目中创建一个文件（例如 app.js），并添加以下代码：

const marked = require('marked');
const hljs = require('highlight.js');

// 注册自定义渲染器
const renderer = new marked.Renderer();
renderer.code = function(code, language) {
    const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
    return `<pre><code class="hljs ${validLanguage}">${hljs.highlight(validLanguage, code).value}</code></pre>`;
};

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

// 测试Markdown文本
const markdownText = `
\`\`\`js
console.log('Hello, world!');
\`\`\`
`;

// 渲染Markdown文本
const html = marked(markdownText);

console.log(html);

解释

  1. 引入库：

    • 引入 marked 和 highlight.js 库。

  2. 自定义渲染器：

    • 创建一个新的 Renderer 实例。
    • 重写 code 方法以支持代码高亮。
    • 使用 highlight.js 处理代码块的高亮，并将其嵌入到 HTML 中。

  3. 设置 marked 选项：

    • 将自定义的渲染器设置为 marked 的渲染器。
    • 其他选项可以根据需要进行调整。

  4. 测试 Markdown 文本：

    • 定义一段包含代码块的 Markdown 文本。
    • 使用 marked 解析 Markdown 文本，并输出结果。

运行上述代码后，你应该会看到包含高亮效果的 HTML 输出。希望这能帮助你解决 marked 和 highlight.js 集成的问题。

回到顶部