特别好奇有些博客对于语法高亮的支持相当不错,发现大都使用syntaxhighlighter,大家可以Google之,这个工具就是用来给code进行语法高亮的,如果你需要更个性化地展示其他标签,则需要自定义CSS了。(之前进入个误区,以为syntaxhighlighter可以个性化比如blockquote等标签呢,嘿嘿)
下载SyntaxHighlighter,该工具提供了多种语言的高亮显示,我们所要做的就是在页面中导入一些CSS和JS文件,比如我经常需要对Python,C++等语言进行高亮显示,那么就在html页面中添加这些JS:
- <script type="text/javascript" src="js/shCore.js"></script>
-
-
<script type="text/javascript" src="js/shBrushPython.js"></script>
-
-
<script type="text/javascript" src="js/shBrushCpp.js"></script>
另外还需要引入必备的CSS文件如下:
- <link rel="stylesheet" type="text/css" href="css/shCore.css"></link>
-
-
<link rel="stylesheet" type="text/css" href="css/shThemeDefault.css"></link>
高亮显示通常首先检索
标签,所以用户输入代码的时候做如下处理:
- <pre class="brush: python">code here</pre>
最后为了使该工具工作,我们需要添加下面的JS:
- <script type="text/javascript">
-
SyntaxHighlighter.all()
-
</script>
刷新页面,发现代码段已经高亮显示了。
阅读(4079) | 评论(0) | 转发(0) |