代码高亮显示插件——dp.SyntaxHighlighter的使用

最近经常用看各种论坛，博客，看到一种新的代码显示插件，感觉挺方便，好用的，特拿来与大家分享一下。

下面是这种插件的截图，大家也许也见了不少：

这种插件不仅让代码的展示变得美观了许多，并且还给喜欢自己代码的朋友提供的方便。以前我们看到的网上

的代码片断一般是直接将各种开发环境中的代码直接拷过来的，所以如果你直接在页面上复制的话，它是不能

直接使用的。现在使用这个插件，我们可以直接拷贝了，并且可以直接使用了。心动了吧，想不想现在就拥有

？

下面我们就来说说这个插件具体怎么使用吧。其实很简单的：

先将我们的要先下载这个插件：http://download.csdn.net/detail/lyq1371964/5311123

然后将解压：将script、src、style、三个文件夹引入你的项目中

然后新建html/jsp等页面

在页面中插入如下代码：

 <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushBash.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCpp.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCSharp.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushDelphi.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushDiff.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushGroovy.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPlain.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPython.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushRuby.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushScala.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushSql.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushVb.js"></script>
 <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
 <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCore.css"/>
 <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css"/>
 <script type="text/javascript">
  SyntaxHighlighter.config.clipboardSwf = 'syntaxhighlighter/scripts/clipboard.swf';
  SyntaxHighlighter.all();
 </script>

再将你要显示的代码放到pre标签中，代码示例如下：

 <pre class="brush: c-sharp;">
 function getName():string
 {
  return "lili";
 }
</pre>

好了，现在你以运行你的项目了

 

转载于:https://www.cnblogs.com/liuyq/archive/2013/04/28/3049047.html