您的位置:首页 > 编程语言

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

2013-04-28 13:06 716 查看
最近经常用看各种论坛,博客,看到一种新的代码显示插件,感觉挺方便,好用的,特拿来与大家分享一下。

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



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

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

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



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

先将我们的要先下载这个插件: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>

好了,现在你以运行你的项目了
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: