代码高亮显示插件——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>
好了,现在你以运行你的项目了
下面是这种插件的截图,大家也许也见了不少:
这种插件不仅让代码的展示变得美观了许多,并且还给喜欢自己代码的朋友提供的方便。以前我们看到的网上
的代码片断一般是直接将各种开发环境中的代码直接拷过来的,所以如果你直接在页面上复制的话,它是不能
直接使用的。现在使用这个插件,我们可以直接拷贝了,并且可以直接使用了。心动了吧,想不想现在就拥有
?
下面我们就来说说这个插件具体怎么使用吧。其实很简单的:
先将我们的要先下载这个插件: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>
好了,现在你以运行你的项目了
相关文章推荐
- CKEditor代码高亮显示插件Code Snippet安装及使用方法
- dede代码编辑器,插入代码并高亮显示代码插件安装使用教程
- SyntaxHighlighter插件代码高亮显示使用方法
- 【插件开发】—— 9 编辑器代码分块着色-高亮显示!
- JQuery文本框高亮显示插件代码
- LaTeX中使用对C语言代码高亮显示
- 使用google插件高亮显示xml
- jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
- 使用jquery的插件highlight并利用正则提取搜索引擎的关键字以高亮显示
- 使用 CodeMirror 打造属于自己的带高亮显示的在线代码编辑器
- Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
- 代码高亮插件Codemirror使用方法及下载
- tinyMCE插件开发之插入html,php,sql,js代码 并代码高亮显示
- OneNote2016安装代码高亮插件-NoteHightlight的安装及使用教材
- 代码高亮插件prettyPrint.js使用与下载
- freemarker生成的前端代码下使用javascript实现导航菜单高亮显示
- 插件insertpre+语法高亮插件google-code-prettify,解决CKEditor4代码高亮显示问题
- WordPress代码高亮插件CodeColorer正确使用方法
- 使用dp.SyntaxHighlighter显示高亮语法