網頁顯示高亮代碼簡易方法


網頁顯示高亮代碼有很多插件和方法,這里介紹一個簡單的方法--SyntaxHighlighter。

1. 下載SyntaxHighlighter:http://alexgorbatchev.com/SyntaxHighlighter/download/

2. 在需要顯示高亮代碼到網頁中添加如下代碼(以高亮JavaScript代碼為例)

<!-- css文件添加 -->
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
<!-- Js文件添加 -->
<script type="text/javascript" src="js/shCore.js"></script> 
<!-- 這里根據需要高亮的代碼而選擇相應Js文件,在下載的scripts文件中可找到 -->
<script type="text/javascript" src="css/shBrushJScript.js"></script>

3. 需要高亮顯示的代碼放在 "<pre class="brush: js"></pre>"標簽中。

<pre class="brush: js">
function foo()
{
}
</pre>
"js“為需要高亮的代碼類型,更多類型可參考: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

4. 顯示高亮代碼

<script type="text/javascript">
     SyntaxHighlighter.all()
</script>


現在代碼高亮顯示的配置就完成了。


參考:

http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com