代码高亮插件SyntaxHighlighter
插件介绍
SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件。
SyntaxHighlighter 可以对大部分编程语言进行着色渲染，而且代码高亮的性能也非常不错。
SyntaxHighlighter 还可以自定义主题文件。
示例文件下载
官方网站
简单使用
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>代码高亮显示Dmeo</title><link rel="stylesheet" type="text/css" href="css/shCore.css" /><script type="text/javascript" src="js/shCore.js"></script><link rel="stylesheet" type="text/css" href="css/shCoreDefault.css" /><script type="text/javascript" src="js/shBrushJava.js"></script></head><body><script type="text/javascript">SyntaxHighlighter.all();</script><pre class="brush:java;">System.out.println("Hello World!");System.out.println("Hello World!");System.out.println("Hello World!");</pre></body>
</html>效果展示：
代码说明：
其他语言
这里为例子的是sql语言。
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>代码高亮显示Dmeo</title><link rel="stylesheet" type="text/css" href="css/shCore.css" /><script type="text/javascript" src="js/shCore.js"></script><link rel="stylesheet" type="text/css" href="css/shCoreDefault.css" /><script type="text/javascript" src="js/shBrushSql.js"></script></head><body><script type="text/javascript">SyntaxHighlighter.all();</script><pre class="brush:sql;">select * from users;</pre></body>
</html>效果图如下：
代码说明：
更换主题
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>代码高亮显示Dmeo</title><link rel="stylesheet" type="text/css" href="css/shCore.css" /><script type="text/javascript" src="js/shCore.js"></script><link rel="stylesheet" type="text/css" href="css/shCoreFadeToGrey.css" /><script type="text/javascript" src="js/shBrushSql.js"></script></head><body><script type="text/javascript">SyntaxHighlighter.all();</script><pre class="brush:sql;">select * from users;</pre></body>
</html>效果如下：
代码说明：
笔刷
SyntaxHighlighter使用称为笔刷的单独语法文件来定义其突出显示功能。
即可导入不同的语言语法文件。
| Brush name | Brush aliases | File name |
|---|---|---|
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| ColdFusion | cf, coldfusion | shBrushColdFusion.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Erlang | erl, erlang | shBrushErlang.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
CSS主题
SyntaxHighlighter 2.0引入了自定义CSS主题。这意味着只需切换一个CSS文件，您就可以完全更改突出显示的语法的外观。SyntaxHighlighter包含少量流行的色彩主题，您可以轻松制作自己的主题。
| Name | File |
|---|---|
| Default |
shThemeDefault.css
|
| Django |
shThemeDjango.css
|
| Eclipse |
shThemeEclipse.css
|
| Emacs |
shThemeEmacs.css
|
| Fade To Grey |
shThemeFadeToGrey.css
|
| Midnight |
shThemeMidnight.css
|
| RDark |
shThemeRDark.css
|
其他
其他使用可以参考：http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
代码高亮插件SyntaxHighlighter相关推荐
- html代码高亮带行号,无法解决的难题：代码高亮插件SyntaxHighlighter Evolved的行号问题...
WordPress 的 SyntaxHighlighter Evolved 是一个可以高亮显示代码的插件,它使用方便,界面也非常好看,很适合技术博客使用. SyntaxHighlighter Evol ...
- WordPress代码高亮插件SyntaxHighlighter使用详解
咱们的博客中经常需要粘贴代码,所以我在博客中安装了WordPress的插件 SyntaxHighlighter 这是一个代码高亮.模式化的工具,能代码在网页上以类似IDE编辑器里的样子高亮关键字. 代 ...
- UEditor整合代码高亮插件SyntaxHighlighter
1 下载UEditor : http://ueditor.baidu.com/website/download.html 下载SyntaxHighlighter :https://github.co ...
- syntaxhighlighter 代码高亮 - 插件化
syntaxhighlighter 代码高亮 - 插件化 之前做过很多网站,不同的网站也都有不同的经验总结,只是前些年都不怎么注重线上博客.由于现在自身技能的不断丰富,个人的插件库.总结性的经验文档. ...
- Word中使用代码高亮插件
Word中使用代码高亮插件 1.下载并安装:SyntaxHighlighter4Word.zip 解压,然后双击bin\word2010\Kong.SyntaxHighlighter.Word2010 ...
- Ueditor高亮插件SyntaxHighlighter显示时Bug修复
Ueditor高亮插件SyntaxHighlighter问题修正 1.如果一行代码太长,就会造成代码块过宽,修改shCoreDefault.css,加上word-break:break-all: 格式 ...
- 谈谈iceCode代码高亮插件的开发问题，由我们国人开发代码高亮插件！
做为一名资深的开发者,有时候再写一些技术性的文章时,常常需要使用代码高亮插件来展示自己的代码,大家都知道SyntaxHighlighter.Google Code Prettify.Highlight ...
- OLW （Open Live Writer）安装代码高亮插件方法（简明）
1.首先下载OLW代码高亮插件,请点击--->OLW代码高亮插件 2.在你安装OLW的目录下(顺便说一下默认的安装目录为C:\Users\你的用户名\AppData\Local\OpenLive ...
- OneNote2016安装代码高亮插件
onenote2016安装代码高亮插件(notehilight)时候,遇到点小问题.首先是在一个csdn博客那里看到的安装插件的详细步骤.详细步骤.博主写的过程很清楚,但是提供的插件地址是很老的插件地 ...
最新文章
- 5分钟学会Java 9~Java11的七大新特性
- 改变示波器TDS3054D图片颜色
- 【转载】在服务器上用Fiddler抓取HTTPS流量
- 【django】模型
- 剖析boot.img的制作流程
- 博客开源系统（待续......）
- pat 乙级 1056 组合数的和(C++)
- 特斯拉上海工厂开工 Model 3月销量有望破万
- [论文翻译] Medical Matting: A New Perspective on Medical Segmentation with Uncertainty
- Linux系统配置kvm+vlan
- （转）ArcObjects SDK（AE）10.1在vs2012安装的方法
- linux安装perl模块
- SVNKit学习——使用低级别的API（ISVNEditor接口）直接操作Repository的目录和文件（五）...
- Redis面经：重新梳理了 5 种数据类型的用法和应用场景
- 最大后验估计_极大似然估计 V.S. 贝叶斯估计
- 两分钟搞懂，五花八门的门禁卡（ID卡、IC卡、CPU卡），免费复制
- 关闭华硕笔记本触摸屏
- 服务器修复工具,Microsoft .NET Framework 修复工具可用
- DA数模转换 DAC0832 笔记
- 苹果电脑(macOS)查看 WiFi 密码的两种方法