使用 highlightjs 点亮你的代码
2019-09-25 本文已影响0人
CondorHero
平常浏览网页，有时看到个人站点的博客，除了网站自定义样式比较好看外，上面粘贴的代码的风格也很好看。就比如简书的代码风格是这样的。
黑色背景，代码也是花花绿绿的。其他比较常见的样式就是浅颜色的。这个效果肯定是用插件搞得。看了下比较流行的是：
Highlight.js 和 PrismJS，去 npm 看了下下载量，如下：
对比下载量
很明显 highlight.js 更受欢迎，而且我学完 highlight.js 也发现这个比较简单，样式多也挺好看。
一、学习前的了解
先去官网看看：https://highlightjs.org/
官网
简单翻译下网站的门面。
Syntax highlighting for the Web ：Web的语法高亮。网站演示的数据类型是 json(language: json) ，使用的样式是：style: railscasts。
- 185 languages and 89 styles // 一共支持 185 种语言，内含 89 种 css 样式。
- automatic language detection //自动检测语言
- multi-language code highlighting // 多语言代码高亮
- available for node.js //支持服务端的 node.js
- works with any markup // 不止支持代码，适用于任何标记
- compatible with any js framework //兼容任何 js 框架，它的版本很多无论你怎么写代码都能无脑兼容你的前端代码。、
Get version 9.15.10 目前 2019 年 09 月 01 日的最高版本，点击进入可进行下载。usage 链接的是说明文档。
今天就不是用 Vue 框架进行演示了。仅适用本地的 HTML 文件进行测试。
二、下载
进入 https://highlightjs.org/download/ 进行下载。
第一种方法就是使用网站提供的 cdn。
很明显我们的用第二种自己下载引包：
下载需要使用的包
下载文件的目录：
文件目录
三、实战使用
一共四步：
- 引入 style 里面的一个默认 css 样式
- 引入 唯一的 js 文件
- 初始化，直接调用一个方法。
hljs.initHighlightingOnLoad();是用来识别<pre><code class="json">...</code></pre>的。 - 代码放入 标签
<pre><code class="json">...</code></pre>，class 用来指定我们放入代码的数据类型，不写的话，程序可自动检测。防止出错，最好写上。
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语法高亮</title>
<link rel="stylesheet" href="./default.css">
<script src="./highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre>
<code>
#[derive(Debug)]
pub enum State {
Start,
Transient,
Closed,
}
impl From<&'a str> for State {
fn from(s: &'a str) -> Self {
match s {
"start" => State::Start,
"closed" => State::Closed,
_ => unreachable!(),
}
}
}
</code>
</pre>
</body>
</html>
默认的样式
四、一个小坑
我在测试的时候，在 code 标签里面直接放入 html 的标签发现不行，例如<h1>我是一级标签</h1> 标签老是被浏览器给自动解析了。解决办法就是你不能直接写 html 标签。必须使用< 来替代标签的<，> 来替代标签的 >。在举个例子，这个我引用的css 样式是 monokai-sublime.css 这个样式比较像 sublime 的风格，经典款我比较中意这个。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语法高亮</title>
<link rel="stylesheet" href="./monokai-sublime.css">
<script src="./highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre>
<code>
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<!-- here goes the rest of the page -->
</code>
</pre>
</body>
</html>
html坑
下载的样式配色还是比较好看的完全没需要自定义，我还相中了两款一起来看看吧。
这是引用 railscasts.css 的效果：
railscasts.css
还有一个 dark.css 也比较好看：
dark.css
写作日期：
2019.09.01 22:51
