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遍历表格的实例
Jul 10 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
Ajax常用封装库——Axios的使用
May 08 Javascript
React Fragment介绍与使用详解
Nov 11 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中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
php限制ip地址范围的方法
2015/03/31 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
自动更新作用
2006/10/08 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
Python分支结构(switch)操作简介
2018/01/17 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
医药类个人求职的自我评价
2014/02/12 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
股权转让协议范本
2014/12/07 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
vue特效之翻牌动画
2022/04/20 Vue.js
vue实现在data里引入相对路径
2022/06/05 Vue.js
Python时间操作之pytz模块使用详解
2022/06/14 Python
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js