使用Node.js开发一个静态博客生成器(三)——代码高亮

实现代码很简单,我们知道有highlight.js可以直接在浏览器中给pre标签中的代码加入高亮标签的样式,然后引入对于的高亮样式CSS文件即可,我们可以在使用任何程序的网站中使用这个库。

但是highlight.js经过压缩后还是有几十kb,同样,在浏览器中渲染HTML标签也会耗时耗资源,所以干脆在服务端(生成页面的时候)就给代码加上高亮样式,我这里举两个例子,分别是两个Markdown生成器的使用方法:

MarkdownIt

这是我现在在用的解析器,在生成md实例的时候可以直接启用highlight.js插件。

const MarkdownIt = require('markdown-it');
const hljs = require('highlight.js');

const md = new MarkdownIt({
  highlight: function(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre><code class="hljs ' + lang + '">' +
          hljs.highlight(lang, str, true).value +
          '</code></pre>';
      } catch (__) {}
    }
    return '<pre><code>' + md.utils.escapeHtml(str) + '</code></pre>';
  }
});

然后使用md.render()方法解析MD时就会自动加上hljs的高亮样式了。

marked

这是另一款非常受欢迎的markdown解析器,我曾经也尝试使用过,相比markdownit,我认为它配置起来更加简单,同样,它也可以直接启用highlight.js拓展

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

marked.setOptions({
  highlight: (code) => hljs.highlightAuto(code).value,
})

marked(markdown)

Add a Comment

电子邮件地址不会被公开。 必填项已用*标注