highlight.js 语法高亮

简介

nodejs项目中使用第三方库highlight.js实现代码块的高亮显示,highlight.js提供了大量的编程语言和高亮显示样式。

按照我博客文章的代码块高亮显示为例,我首先使用了markdown-itMarkdown文章解析为html,然后利用highlight.js做到代码块的高亮显示。

思路

配置语法高亮

// 引入 highlight.js (包含所有语言)
const hljs = require('highlight.js')
// 定义 markdown-it 的语法高亮函数 highlight
const highlight = (str, lang) => {
  let code = md.utils.escapeHtml(str)
  if (lang && hljs.getLanguage(lang)) {
    code = hljs.highlight(lang, str, true).value
  }
  return `<pre class="hljs"><code>${code}</code></pre>`
}
// 引入 markdown-it
//   在创建实例时传入刚才定义的 highlight函数 来配置语法高亮
const md = require('markdown-it')({ highlight })

highlight 函数

对于markdown-it的语法高亮函数,markdown-it解析到Markdown文件的代码块,比如:

```javascript
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World')
})

app.listen(port, () => {
  console.log(`http://localhost:${port}`)
})
​```

上面就是一个Markdown的代码块语法,markdown-it会把其中的代码传入highlight函数的第一个参数,而代码块开头标志后的javascript则会传入到highlight函数的第二个参数。

所以上面代码中的highlight函数接受这两个参数(str, lang),首先md.utils.escapeHtml(str)是用来转义,具体解释请查看文末的补充内容,然后再使用第三方库highlight.jshljs.highlight(lang, str, true).value查看API详解)把代码解析成span标签带类名的形式,比如:

<span class="hljs-keyword">const</span> express = 
<span class="hljs-built_in">require</span>

这样就只需要在html中引入样式就可以了。

css 样式

highlight.js中提供了很多的样式,你可以在nodejsnode_modules中拿出来使用。

style

/node_modules/highlight.js/styles中的css文件复制出来用就好了。

这么多css找一个自己喜欢的,也可以自己定义,查看官方所有样式效果Demo

完整案例

express

const express = require('express')
const app = express()
const port = 3000

// 引入 highlight.js 并配置到 markdown-it
const hljs = require('highlight.js')
const highlight = (str, lang) => {
  let code = md.utils.escapeHtml(str)
  if (lang && hljs.getLanguage(lang)) {
    code = hljs.highlight(lang, str, true).value
  }
  return `<pre class="hljs"><code>${code}</code></pre>`
}
const md = require('markdown-it')({ highlight })

const fs = require('fs')
const path = require('path')

// 配置模板引擎 art-template
app.engine('html', require('express-art-template'))
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
// 静态资源
app.use('/public', express.static(path.join(__dirname, 'public')))

app.get('/', (req, res) => {
  // 读取 example.md Markdown文件
  const fileString = fs.readFileSync('example.md').toString()
  const htmlResult = md.render(fileString)
  // 模板渲染 index.html
  res.render('index', { content: htmlResult })
})

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

模板引擎

/views/index.html文件:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/public/css/github.css">
  </head>
  <body>
    <div>{{@content}}</div>
  </body>
</html>

Markdown

/example.md文件:

```javascript
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World')
})

app.listen(port, () => {
  console.log(`http://localhost:${port}`)
})
​```

效果

result

补充

MarkdownIt.utils

官方文档中也没用过多的展开解释utils,让我们查看它的源码:

var HTML_ESCAPE_TEST_RE = /[&<>"]/;
var HTML_ESCAPE_REPLACE_RE = /[&<>"]/g;
var HTML_REPLACEMENTS = {
  '&': '&amp;',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;'
};

function replaceUnsafeChar(ch) {
  return HTML_REPLACEMENTS[ch];
}

function escapeHtml(str) {
  if (HTML_ESCAPE_TEST_RE.test(str)) {
    return str.replace(HTML_ESCAPE_REPLACE_RE, replaceUnsafeChar);
  }
  return str;
}

代码写的很直观,MarkdownIt.utils.escapeHtml()的用处就是转义HTML,把传来解析的Markdown内容中的<>等进行转义,防止与HTML的标签语法冲突。

那为什么上面的highlight函数中需要用呢?

highlight函数中首先判断了参数lang是否存在,就是Markdown文件中代码块开头标志后有没有跟代码语言并且这个语言在highlight.js库能否解析。

如果false就不会通过highlight.js库去解析语法高亮,而只返回了代码块的转义;

如果true就会通过hightlight.js库进行解析,返回的结果在highlight.js中自己就进行了转义,所以不需要我们再去使用escapeHtml()


版权声明:

Anand's Blog文章皆为站长Anand Zhang原创内容,转载请注明出处。

包括商业转载在内,注明下方要求的文章出处信息即可,无需联系站长授权。

请尊重他人劳动成果,用爱发电十分不易,谢谢!

请注明出处:

本文出自:Anand's Blog

本文永久链接:https://anandzhang.com/posts/frontend/8