如何结合使用npm Marked与HighlightJS并读取README.md作为输入
2026-5-19
如何用Marked + HighlightJS解析本地README.md并实现文档自动化处理
我来帮你搞定这个需求——从读取本地README.md文件，到结合Marked和HighlightJS完成Markdown解析与代码高亮，全程给你清晰的步骤和可直接运行的代码示例。
第一步：安装依赖
首先得把需要的包装到项目里，Marked负责解析Markdown，HighlightJS处理代码高亮：
npm install marked highlight.js
Node.js的fs（文件系统）和path模块是内置的，不用额外安装。
第二步：读取本地README.md文件
你完全不用手动转义字符串，直接用Node.js的fs模块读取文件内容就行，这里给你同步和异步两种写法，按需选择：
同步读取（适合简单脚本场景）
const fs = require('fs'); const path = require('path'); // 拼接README.md的绝对路径，避免相对路径的坑 const readmePath = path.join(__dirname, 'README.md'); // 读取文件，编码设为utf8直接拿到字符串内容 const readmeContent = fs.readFileSync(readmePath, 'utf8');
异步读取（符合Node.js异步编程风格）
const fs = require('fs'); const path = require('path'); fs.readFile(path.join(__dirname, 'README.md'), 'utf8', (err, readmeContent) => { if (err) { console.error('读取README失败:', err); return; } // 后续的解析逻辑直接放在这个回调里就行 });
第三步：配置Marked集成HighlightJS
接下来要让Marked调用HighlightJS来处理代码块的高亮，只需要给Marked设置highlight选项就行：
const { marked } = require('marked'); const hljs = require('highlight.js'); // 配置Marked的核心选项 marked.setOptions({ // 自定义代码高亮逻辑 highlight: function(code, lang) { // 如果Markdown里指定了代码语言（比如```javascript），就用对应语言高亮；否则用纯文本格式 const targetLang = hljs.getLanguage(lang) ? lang : 'plaintext'; return hljs.highlight(code, { language: targetLang }).value; }, // 开启GitHub风格的Markdown支持（可选但推荐，兼容更多语法） gfm: true, // 允许换行符自动转换为<br>（可选，让文本换行更自然） breaks: true });
第四步：解析并输出结果
把读取到的README内容传给marked()函数，就能得到带代码高亮标签的HTML了，你可以把它保存成文件或者直接用于后续业务处理：
完整同步示例（直接生成带样式的HTML文件）
const fs = require('fs'); const path = require('path'); const { marked } = require('marked'); const hljs = require('highlight.js'); // 先配置Marked marked.setOptions({ highlight: function(code, lang) { const targetLang = hljs.getLanguage(lang) ? lang : 'plaintext'; return hljs.highlight(code, { language: targetLang }).value; }, gfm: true, breaks: true }); try { // 读取本地README.md const readmeContent = fs.readFileSync(path.join(__dirname, 'README.md'), 'utf8'); // 解析为带高亮标记的HTML const parsedHtml = marked(readmeContent); // 给HTML加上HighlightJS的样式引用（没有样式的话，高亮只有标签不会显示效果） const finalHtml = ` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解析后的README文档</title> <!-- 你也可以把CSS文件下载到本地，替换成本地路径引入 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"> </head> <body> ${parsedHtml} </body> </html> `; // 保存解析后的HTML到本地 fs.writeFileSync(path.join(__dirname, 'parsed-readme.html'), finalHtml); console.log('搞定！已生成parsed-readme.html文件'); } catch (err) { console.error('处理过程出错:', err); }
额外注意事项
- 路径问题：一定要用
path.join(__dirname, 'README.md')拼接路径，避免不同操作系统的路径分隔符差异（Windows是\，Linux是/）。 - 样式优化：如果不想用CDN的CSS，你可以去HighlightJS官网下载喜欢的样式文件，放到项目里用本地路径引入。
- 按需缩小体积：如果你的README里只有少数几种代码语言，可以只引入需要的语言支持，减少包体积，比如：
const hljs = require('highlight.js/lib/core'); // 只引入JavaScript和Python的高亮支持 hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript')); hljs.registerLanguage('python', require('highlight.js/lib/languages/python'));
内容的提问来源于stack exchange，提问作者jtlindsey
