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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 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最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
Vue动态组件实例解析
2017/08/20 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
python并发和异步编程实例
2018/11/15 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
污水厂厂长岗位职责
2014/01/04 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
服务员态度差检讨书
2014/10/28 职场文书
婚姻出轨保证书
2015/05/08 职场文书
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电
DE1107机评
2022/04/05 无线电
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers