为 Casper 添加代码高亮功能

前言

Ghost 的默认主题 Casper 没有代码高亮功能,但对于开发者来说这个功能实在太重要了,贴上去的代码没有高亮,辨识度太低,代码多起来根本没法看啊。因此我们需要给它添加一个漂亮的代码高亮功能。

常用的代码高亮 JS 库有:

之前用过 Google 的 code-prettify,还需要指定 pre 标签的类为prettyprint,并且要自己执行一小段 JS,不是很好用。SyntaxHighlighter 不仅有代码高亮,还有编辑功能,但有点臃肿。highlight 看起来还不错,但最终我选用了 Prism。

Prism 支持非常多的「语言」(还支持 JSX):
Prism 支持的语言

How to start

  1. 先在http://prismjs.com/download.html中选择:
    • 合适的的主题
    • 常用的语言
    • 需要的附加功能
  2. 下载生成的 JS & CSS 文件
  3. 引入 CSS & JS 即可
<!DOCTYPE html>  
<html>  
<head>  
  ...
  <link href="themes/prism.css" rel="stylesheet" />
</head>  
<body>  
  ...
  <script src="prism.js"></script>
</body>  
</html>  

可以看出 Prism 的侵入性比较小,生成的 JS & CSS 也比较小可以直接合并到当前库中,而且它天生支持 markdown 生成的代码,对于博客来说这个工具再好不过了。

How to use

用 Markdown 语法写代码块很简单,
三个反引号后面跟着语言,再加三个反引号即可,中间写代码:

```javascript
[1, 2, 3].map(item => console.log(item))
```
```css
html, body {
  height: 100%;
}
```
```JSON
{
  "name": "小钻风",
  "age": 23,
  "isProgramer": true
}
```

输出为 =>

[1, 2, 3].map(item => console.log(item))
html, body {  
  height: 100%;
}
{
  "name": "小钻风",
  "age": 23,
  "isProgramer": true
}

附加功能介绍

Prism 有一些很有用的功能:

最后

需要其他主题可以到这里找https://github.com/PrismJS/prism-themes

这一切只需要点点鼠标加个 JS 和 CSS 就可以了有这么好的东西给博客助力还看着干什么快去下载啊!

正在加载 Disqus 评论组件...