Nodejs 关键字颜色改变怎么实现

Nodejs 关键字颜色改变怎么实现

function route(handle, pathname, response, postData){
console.log(‘About to route a request for’ + pathname);


if(typeof handle[pathname] === ‘function’){
handle[pathname](response, postData);
}else{
console.log('No request handler found for ’ + pathname);


response.writeHead(404, {'Content-Type': 'text/plain'});
response.write('404 Not Found', encoding='utf8');
response.end();

}

}

请教大家个问题，cnodejs中发表文章的时候，我们贴出的代码关键字颜色都变成了各种颜色，这个markdown编辑器大家有没有自己配置使用过啊？？ 有经验的分享下啊？小弟好想使用这个编辑器，简洁漂亮！


7 回复

要实现在Node.js环境中改变关键字的颜色（比如在Markdown编辑器中），我们需要将源代码转换为带颜色高亮的HTML。这通常涉及到两个步骤：解析源代码并识别关键字，然后将这些关键字用特定的颜色样式进行渲染。

一个常用的库是highlight.js，它能够自动检测编程语言并为其提供语法高亮。我们可以结合使用highlight.js和marked（一个流行的Markdown解析器）来实现这一功能。

示例代码

首先，确保安装了所需的依赖：

npm install highlight.js marked

接下来，创建一个简单的Node.js应用来处理Markdown文本，并添加语法高亮：

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

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

const renderer = new marked.Renderer();
renderer.code = function(code, language) {
    const escapedCode = hljs.escapeHighlightedValue(code);
    return `<pre><code class="${hljs.getLanguage(language) ? hljs.getLanguage(language).className : ''}">${escapedCode}</code></pre>`;
};

marked.use({ renderer });

// 读取Markdown文件
fs.readFile('example.md', 'utf-8', (err, markdownText) => {
    if (err) throw err;

    // 解析并输出带有语法高亮的HTML
    const html = marked(markdownText);
    console.log(html);
});

解释

  1. 引入必要的模块：我们引入了fs用于文件操作，marked用于解析Markdown，以及highlight.js用于代码高亮。
  2. 配置marked：通过设置highlight选项，我们指定了如何处理代码块。如果能够识别语言，则使用该语言进行高亮；否则，尝试自动检测。
  3. 自定义Renderer：为了更好地控制代码块的渲染，我们创建了一个新的Renderer实例，并重写了code方法来包含正确的类名和高亮后的代码。
  4. 读取Markdown文件并解析：最后，我们读取一个Markdown文件，使用marked解析它，并打印出带有语法高亮的HTML。

这样，当你的Markdown文件包含代码块时，这些代码块将以彩色高亮的方式显示。


关键字边颜色不是 Markdown 做的, 楼主可以看下 Highlight.js

我看了Highlight.js，如果我只是想在前端使用Highlight.js好像不是很方便，是不是这样，我自己也配置了下在前端使用，可使好像效果不明显，查资料说如果配合markdown会很不错！你有没有经验分享下啊！谢谢您了！

cnodejs是用code-prettify做的高亮吧，跟markdown关系不大。

在前端或者后端处理一下用户输入的内容，给pre标签加上对应的类就行了。

我用了code-prettify，这个比highlight.js好用些较前端使用而言，效果很不错，谢谢您了，

像这里写的 https://github.com/chjj/marked#usage

要在Node.js环境中实现类似CNodeJS社区中代码块的关键字颜色改变效果，你可以使用Markdown解析库如marked，结合代码高亮库如highlight.js来实现。这里我将提供一个简单的示例代码来展示如何设置一个基本的服务器，该服务器可以接收Markdown文本，并将其转换为带有代码高亮功能的HTML。

首先，你需要安装必要的依赖包：

npm install marked highlight.js

然后，你可以创建一个简单的Express应用，用于处理Markdown到HTML的转换，并插入代码高亮样式。

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

// 设置marked以支持高亮
marked.setOptions({
    highlight: function(code, lang) {
        if (lang) {
            return hljs.highlight(lang, code).value;
        } else {
            return hljs.highlightAuto(code).value;
        }
    }
});

const app = express();

app.use(express.static('public'));

app.post('/convert-markdown', (req, res) => {
    const markdownText = req.body.markdown;

    // 使用marked解析Markdown文本
    const html = marked(markdownText);

    res.send(html);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

在这个例子中，当你向/convert-markdown发送POST请求时，它会接收到Markdown文本并将其转换成包含代码高亮的HTML。

为了确保代码能够正确高亮显示，还需要在你的HTML页面中引入highlight.js的CSS文件。例如，在HTML头部添加以下链接：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">

以及在页面加载后执行代码高亮处理：

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

通过这种方式，你可以实现在Node.js环境下将Markdown文本转换为带有代码高亮的HTML内容，从而达到类似CNodeJS网站中的代码块颜色改变的效果。

回到顶部