SyntaxHighlighter代码高亮显示插件

最新推荐文章于 2021-03-09 14:15:17 发布

maidoudao

最新推荐文章于 2021-03-09 14:15:17 发布

阅读量187

点赞数

分类专栏： UI 文章标签： CSS JavaScript XML HTML ViewUI

11 篇文章 0 订阅

订阅专栏

SyntaxHighlighter代码高亮显示

最新版本为3.0.83：去掉了代码复制粘贴的动画

使用方法：

（1)导入核心js

<script type="text/javascript" src="scripts/shCore.js"></script>

导入核心css

<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>

导入所需js，如支持xml的js

<script type="text/javascript" src="scripts/shBrushXml.js"></script>

（2）添加如下代码

<script type="text/javascript">
  SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
  SyntaxHighlighter.all();
</script>

其中最新版本为3.0.83不需要添加

SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';

html页面使用方法

<pre class="brush:xml;">
<xml>不显示
需要将< 换成 &lt;
</pre>

若想使高亮对textarea生效，添加

  SyntaxHighlighter.config.tagName='textarea';

html页面

<textarea name="code" id="code" class="brush:xml" rows="15" cols="100">
<html>
</html>
</textarea>

但这时如果通过js无法获取textarea的值，也即document.getElementById("code")的值为空。

关注

专栏目录