代码高亮目前来说应该是一个博客必备的功能了,对于码农来说,免不了要在自己的博客里发布代码,对于博客爱好者来说,初期的博主都是在不断折腾中进步的,各种学习笔记基本上就是自己代码的备忘了。最近把博客程序换成了typecho,安装代码插件时发现不是因为没有更新无法使用,就是插件的体积非常大,代码高亮插件的原理基本上都是通过指定或判断代码语言,然后调用相应的JS和CSS文件进行着色的,因为插件支持十几甚至几十种语言,所以免不了体积比较大,而对于我来说,常用的语言非常少,比如html,css,php等所以希望可以寻找到一种可以定制显示高亮语言的插件。
另一方面,由于typecho的编辑器原生支持Markdown语法,所以如果能找到一个支持Markdown的语法高亮插件那就更好了,非常幸运的是,我找到了Prism
,官方是这样介绍的:
Prism is a lightweight, extensible syntax highlighter, built with
modern web standards in mind. It’s used in thousands of websites,
including some of those you visit daily.
大意为:Prism是一个轻量级、可扩展的语法高亮显示方案,基于现代Web标准建立。它被应用于数以千计的网页上,包括一些你经常访问的。
Prism的优势:
1、可定制
Prism可以根据你的需要来定制js和css文件,只保留你需要高亮的语言和插件,从而很好的控制文件的大小。
2、容易用
Prism使用只需要在页面的合适位置引用prism.css
和prism.js
,支持HTML5和Markdown。
3、样式多
Prism有多种代码着色方案,例如Twilight、Solarized 、Dark等。
如何使用Prism:
1、定制Prism,下载prism.css
和prism.js
文件,如果你不清楚定制选项的用途,你也可以选择Prism的完整版下载。
定制和下载地址
2、引用prism.css
和prism.js
,你可以在主题的合适位置加入下面的代码
<link href="themes/prism.css" rel="stylesheet" />
<script src="prism.js"></script>
3、调用着色
在需要代码高亮时使用下述代码
<pre><code class="language-css"> body{background-color:yellow;} </code></pre>
上面是个高亮CSS代码的例子,如果是其它代码,比如PHP,只需将上面的language-css
替换成language-php
即可。
如果你使用的是Markdown编辑器,且定制时勾选了Markdown支持,你也可以这样
```css body{background-color:yellow;} ```