SyntaxHighlighter代码高亮框架使用方法

一、SyntaxHighlighter介绍

SyntaxHighlighter是一款用于web页面的代码着色工具，可以用来着色多种语言，可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言。它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言：C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML。

下载地址：

https://download.csdn.net/download/qq15577969/15681220

效果图展示：

二、使用教程

1、将下载的SyntaxHighlighter文件解压缩，只保留里面的Scripts文件夹和styles文件夹。

2、在网页的<head></head>之间引入css文件：

<link rel="stylesheet" type="text/css"  href="/static/syntaxhighlighter/Styles/shCoreDefault.css"></link>

3、在网页的</body>标签前面引入js文件：

<script class="javascript" src="/static/syntaxhighlighter/Scripts/shCore.js"></script>
<script class="javascript" src="/static/syntaxhighlighter/Scripts/shAutoloader.js"></script>
<script class="javascript">
function path() {var args = arguments,result = [];for (var i = 0; i < args.length; i++)result.push(args[i].replace('$', '/static/syntaxhighlighter/Scripts/'));return result;
}
$(function() {SyntaxHighlighter.autoloader.apply(null, path('php                    $shBrushPhp.js','java                   $shBrushJava.js','objc obj-c             $shBrushObjC.js','actionscript3 as3      $shBrushAS3.js','bash shell             $shBrushBash.js','coldfusion cf          $shBrushColdFusion.js','c# c-sharp csharp      $shBrushCSharp.js','delphi pascal          $shBrushDelphi.js','jfx javafx             $shBrushJavaFX.js','js jscript javascript  $shBrushJScript.js','perl pl                $shBrushPerl.js','py python              $shBrushPython.js','ruby rails ror rb      $shBrushRuby.js','vb vbnet               $shBrushVb.js','xml xhtml xslt html    $shBrushXml.js'));SyntaxHighlighter.defaults['gutter'] = true;//是否显示代码行数SyntaxHighlighter.defaults['toolbar'] = false;SyntaxHighlighter.defaults['auto-links'] = false;SyntaxHighlighter.defaults['quick-code'] = false;SyntaxHighlighter.all();
})
</script>

3、使用方法一：使用pre

<pre name="code" class="php">
//这里是你需要高亮的代码
</pre>

4、使用方法二：使用textarea

<textarea name="code" class="c#" cols="60" rows="10">
//这里是你需要高亮的代码
</textarea>

SyntaxHighlighter代码高亮框架使用方法相关推荐

syntaxhighlighter 代码高亮 - 插件化
syntaxhighlighter 代码高亮 - 插件化之前做过很多网站,不同的网站也都有不同的经验总结,只是前些年都不怎么注重线上博客.由于现在自身技能的不断丰富,个人的插件库.总结性的经验文档. ...
chajian8.com谈：SyntaxHighlighter 代码高亮
题外话:上次提到的显示各种微博的 WordPress 插件进度可喜,已经完成了九个微博的 OAuth.Basic HTTP 验证部分. 写这篇文章时我非常郁闷,因为这篇本是介绍如何智能判断加载 Syn ...
kindeditor4.x整合SyntaxHighlighter代码高亮
文章来源:https://my.oschina.net/duwaiweb/blog/74613 kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提 ...
markdown mysql高亮_修改博客园markdown编辑器代码高亮风格的方法
作为一个工程师,追求极致与艺术也应当成为我们生活中的一部分,作为自己的心爱之物--博客,当然也得装扮一下,我对代码高亮有自己所喜欢的风格~还好程序员的世界总是共通的,已经有前辈开发了一些代码高亮的样式 ...
SyntaxHighlighter代码高亮插件
SyntaxHighlighter官方支持的brush aliases表如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...
SyntaxHighlighter -- 代码高亮插件
SyntaxHighlighter 下载文件里面支持皮肤匹配. 地址:http://alexgorbatchev.com/SyntaxHighlighter/ 转载于:https://www.cnbl ...
SyntaxHighlighter代码高亮插件显示时第一行会多出几个空格问题。
如下图: 求解决!
SyntaxHighlighter示例源码[代码高亮]
[实例简介] SyntaxHighlighter,代码高亮 [实例截图] 文件:590m.com/f/25127180-493827392-6c240a(访问密码:551685) [核心代码] var ...
onenote使用python开发_OneNote 代码高亮方法总结
前言微软的 OneNote 是一个很强大的笔记工具,但是其本身并不支持代码高亮,这让我们在记录代码时很不方便.还好我们可以通过 OneNote 插件和一些方法实现代码高亮. 本篇就总结下 OneNo ...

SyntaxHighlighter代码高亮框架使用方法

一、SyntaxHighlighter介绍

下载地址：

https://download.csdn.net/download/qq15577969/15681220

效果图展示：

二、使用教程

SyntaxHighlighter代码高亮框架使用方法相关推荐

最新文章

热门文章