syntaxhighlighter 使用方法


Posted in Javascript onJuly 02, 2007

Placing the code

Place your code on the page and surround it with <pre> tag. Set name attribute to code and class attribute to one of the language aliases you wish to use.

<pre name="code" class="c-sharp">
... some code here ...
</pre>

NOTE: One important thing to watch out for is opening triangular bracket <. It must be replaced with an HTML equivalent of < in all cases. Failure to do won't break the page, but might break the source code displayed.

An alternative to <pre> is to use <textarea> tag. There are no problems with < character in that case. The main problem is that it doesn't look as good as <pre> tag if for some reason JavaScript didn't work (in RSS feed for example).

<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>

Extended configuration

There's a way to pass a few configuration options to the code block. It's done via colon separated arguments.

<pre name="code" class="html:collapse">
... some code here ...
</pre>

Making it work

Finally, to get the whole thing to render properly on the page, you have to add JavaScript to the page.

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

For optimal result, place this code at the very end of your page. Check HighlightAll for more details about the function.

下载地址:SyntaxHighlighter_1.5.0.zip

Javascript 相关文章推荐
JS中的this变量的使用介绍
Oct 21 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
js制作支付倒计时页面
Oct 21 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
javascript之dhDataGrid Ver2.0.0代码
Jul 01 #Javascript
javascript事件模型代码
Jul 01 #Javascript
如何快速的呈现我们的网页的技巧整理
Jul 01 #Javascript
IE autocomplete internet explorer's autocomplete
Jun 30 #Javascript
用javascript实现的激活输入框后隐藏初始内容
Jun 29 #Javascript
javascritp实现input输入框相关限制用法
Jun 29 #Javascript
优化网页之快速的呈现我们的网页
Jun 29 #Javascript
You might like
php中处理模拟rewrite 效果
2006/12/09 PHP
PHP学习资料汇总与网址
2007/03/16 PHP
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
PHP 命名空间实例说明
2011/01/27 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
Python3.6简单反射操作示例
2018/06/14 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
django将数组传递给前台模板的方法
2019/08/06 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
python生成word合同的实例方法
2021/01/12 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
大学生演讲稿范文
2014/01/11 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
静心口服夜广告词
2014/03/20 职场文书
公司授权委托书
2014/04/04 职场文书
毕业酒会致辞
2015/07/29 职场文书