用Prism对代码进行‘着色’

Prism是网页中进行对代码块进行语法解释及着色的.

安装:

• 很简单, 在网页代码引入prism.js 和 prism.css就可以了. 在网页中加入<link href="themes/prism.css" rel="stylesheet" /> 和<script src="prism.js"></script>即可.
• 可以到官网定制需要的语言,然后进行下载,下载的css和js放到服务器某个目录,修改网页代码再相应地址即可.
• 添加新的支持语言,可以去下载处找相应语言并下载js文件. 找到下载js文件中Prism.languages.*的位置,*是相应的语言名,将该整行进行复制.找到旧的prism.js中Prism.languages.*和punctuation:....}的中间位置插入相应的语言部分即可,这里*是任意语言啦,例如python.

PS:有些语言的语法解析有问题,例如matlab.可以根据别的正常显示的语法(本质是正则表达式)复制过去.其中,string是字符串解析,comment是注释,keyword是关键词(如for),function是函数,可以自行进行修改添加.关于正则表达式可以参考正则表达式.

语法着色使用

• 指定语言:例如html使用以下代码,css换相应的即可,例如c,cpp,python,markup(html),css等,具体请查看. 代码块放在<pre><code> ..</code></pre>中间.
  <pre><code class="language-css">p { color: red }</code></pre>
  
• markdown: 直接在markdown中使用代码块并指明语言即可,会自动转换.例如
  

--- cpp
这里---可以换成~~~,根据markdown语法不同而进行.
---

在Github中也可使用pygments进行着色,Github自带可以无需安装.

Reference:

1. prism主页