推荐一款代码语法高亮插件Prism

网页代码高亮插件真的是非常多。例如:SyntaxHighlighter ,Google Code Prettify,Highlight.js等等。

今天介绍一个漂亮而且小巧的JS插件:Prism.js

官网地址:http://prismjs.com/index.html

为什么选用Prism.js?

除了简单,小巧之外,还有以下优点

  • 极致易用:引用 prism.css 和 prism.js,使用合适的 HTML5 标签(code.language-xxxx),搞定!
  • 天生伶俐:语言的 CSS 类是可继承的,所以你只需定义一次就能应用到多个代码片段。
  • 轻如鸿毛:代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB,主题在 1KB 左右。
  • 快如闪电:如果可能,支持通过 Web Workers 实现并行。
  • 轻松扩展:定义新语言或扩展现有语法,或者新增功能都非常简单。
  • 丰富样式:所有的样式通过 CSS 完成,并使用合理的类名如:.comment, .string, .property 等。

示例

本文博客就是使用的Prism.js,我们直接来几段代码示例

function add_prism() {
wp_register_style(
'prismCSS', 
get_stylesheet_directory_uri() . '/prism.css' //自定义路径
);
wp_register_script(
'prismJS',
get_stylesheet_directory_uri() . '/prism.js'   //自定义路径
);
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');

以上示列为wordpress添加Prism到functions.php的代码。

body, input, textarea {
color: #333333;
font-family: Tahoma,Helvetica,Arial,'宋体',sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 1.82em;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
body {
background: #ccc;
}
public class HelloWorld {
/* 第一个Java程序
* 它将打印字符串 Hello World
*/
public static void main(String []args) {
System.out.println("Hello World"); // 打印 Hello World
}
}
<!DOCTYPE html>
<html>
<head>
...
<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>
#!/usr/bin/python
import re
line = "Cats are smarter than dogs"
matchObj = re.match( r'(.*) are (.*?) .*', line, re.M|re.I)
if matchObj:
print "matchObj.group() : ", matchObj.group()
print "matchObj.group(1) : ", matchObj.group(1)
print "matchObj.group(2) : ", matchObj.group(2)
else:
print "No match!!"
#include 
using namespace std;
int main()
{
cout << "Hello, world!" << endl;
return 0;
}

上面简单列出了有html,php,java,css,c++的代码高亮显示是不是很方便呢

编辑文章时,使用文本模式,输入下面的代码,(黄色language-c可修改任意语言,但必须保留language-,如language-php)

<pre class="language-c"><code class="language-c"> code_here </code></pre>

如果你想每行代码前带序号,只需要在<pre>标签中加class=”line-numbers” 即可,前提是你在官网选择了line-number插件。