JS 插件----SyntaxHighlighter的使用

SyntaxHighlighter是一款用于web页面的代码着色工具，可以用来着色多种语言。今天我们通过实例来学习一下它的用法。

SyntaxHighlighter的简单实例

一、SyntaxHighlighter的代码流程如下

1、将基本文件添加到页面：shCore.js和shCore.css

2、添加想要的brushes（例如：shBrushJScript.js 对于JavaScript中，看到所有可用brushes的列表）

3、包括shCore.css和shThemeDefault.css

4、使用<pre />或<script /> 方法创建代码段

5、调用SyntaxHighlighter.all() JavaScript方法

使用的方式可以参考文档：http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

jar包的下载地址： https://codeload.github.com/syntaxhighlighter/syntaxhighlighter/zip/3.0.83

二、建立一个index.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shCore.css"><link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shThemeDefault.css">
</head>
<body><pre name="code" class="brush: java">public class Person {}</pre><pre name="code" class="brush: js; gutter: false;">function foo() {var i = 3;}</pre><pre class="brush: java; collapse: true;">public void javaMethod() {int i = 3;}</pre><script type="syntaxhighlighter" class="brush: js"><![CDATA[/*** SyntaxHighlighter*/function foo() {if (counter <= 10)return;// it works!}]]></script><script type="text/javascript" src="../third/SyntaxHighlighter/js/XRegExp.js"></script><script type="text/javascript" src="../third/SyntaxHighlighter/js/shCore.js"></script><script type="text/javascript" src="../third/SyntaxHighlighter/js/shBrushJava.js"></script><script type="text/javascript" src="../third/SyntaxHighlighter/js/shBrushJScript.js"></script><script type="text/javascript" src="../third/SyntaxHighlighter/js/shBrushSql.js"></script><script type="text/javascript">SyntaxHighlighter.all()</script>
</body>
</html>

三、显示的效果如下所示

具体的一些配置情况，可以参考：http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

如果要换一种主题，可以在html中替换到默认的主题。比如使用shThemeRDark。

<link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shCore.css">
<link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shThemeRDark.css">

替换后显示的效果如下：

JS 插件----SyntaxHighlighter的使用相关推荐

UEditor整合代码高亮插件SyntaxHighlighter
1 下载UEditor : http://ueditor.baidu.com/website/download.html 下载SyntaxHighlighter :https://github.co ...
WordPress代码高亮插件SyntaxHighlighter使用详解
咱们的博客中经常需要粘贴代码,所以我在博客中安装了WordPress的插件 SyntaxHighlighter 这是一个代码高亮.模式化的工具,能代码在网页上以类似IDE编辑器里的样子高亮关键字. 代 ...
Ueditor高亮插件SyntaxHighlighter显示时Bug修复
Ueditor高亮插件SyntaxHighlighter问题修正 1.如果一行代码太长,就会造成代码块过宽,修改shCoreDefault.css,加上word-break:break-all: 格式 ...
viewer.js插件的应用
需求:商品列表中图片点击放大. 实现方法:使用viewer.js插件,实现点击图片图片放大做法: 1.下载viewer.js插件 2.页面上引入相关的插件 <link rel="st ...
skycons.js 基于canvas的天气动态js插件
skycons.js 基于canvas的天气动态js插件 skycons.js是一个开源的javascript天气动画图标渲染器.相当于gif动图一样. skycons CDN地址:https://w ...
js插件---IUpload文件上传插件（包括图片）
js插件---IUpload文件上传插件(包括图片) 一.总结一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件一.总结一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件亲测可用音乐播放器在网页设计中有时候会用到, ...
前端开发需要了解的JS插件
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
解决pjax加载页面不执行js插件的问题
解决pjax加载页面不执行js插件的问题参考文章: (1)解决pjax加载页面不执行js插件的问题 (2)https://www.cnblogs.com/fanwenhao/p/9643549.ht ...