Total Pageviews

Thursday 21 December 2017

用Prism对代码进行‘着色’

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

安装:

  • 很简单, 在网页代码引入prism.jsprism.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主页

No comments:

Post a Comment