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