SyntaxHighlighter 3.0.83使用笔记


Posted in Javascript onJanuary 26, 2015

1、下载

    SyntaxHighlighter 3.0.83 : http://alexgorbatchev.com/SyntaxHighlighter

2、配置

    (1) SyntaxHighlighter解析的默认标签,默认为pre

SyntaxHighlighter.config.tagName="div";

    (2) 去除HTML换行标记
        如果您的软件会在每行末尾添加< br /> 标记,此选项允许您忽略这些标记。
        shCore.js中实现代码为:

        if (sh.config.stripBrs == true)

            str = str.replace(br, '');

SyntaxHighlighter.config.stripBrs=true;

    (3) 不显示工具条

SyntaxHighlighter.defaults['toolbar'] = false;

3、代码中使用

3.1 brush为必选项,其余为可选:

<div class="brush:java;class-name:mycode;highlight:[1,3];">some java code</div>

brush取值:java/xml/sql/c/js/css等,详见:http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

3.2 着色调用:

    SyntaxHighlighter.highlight();

    或

    SyntaxHighlighter.all();

all()与highlight()区别在于all()是注册到onload()事件中的。

4、在博客园中使用

    博客园默认支持SyntaxHighlighter。代码修改默认值(因为jQuery不支持设置!important的样式所以需要设置cssText):

    var sh = $(".syntaxhighlighter");

    var code = sh.find("code");

    var line = sh.find(".line");

    var caption = sh.find("table caption");

    sh.css("cssText", "width: auto !important");

    code.add(line)

            .add(caption)

            .css("cssText", "font-size: 20px !important;white-space: nowrap !important;line-height: 1.5em !important;");

以上就是本文的全部内容了,小伙伴们对SyntaxHighlighter的使用方法是否有了新的认识呢,希望大家能够喜欢本文。

Javascript 相关文章推荐
Prototype源码浅析 String部分(二)
Jan 16 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 #Javascript
JavaScript事件委托用法分析
Jan 24 #Javascript
jQuery统计上传文件大小的方法
Jan 24 #Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 #Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 #Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 #Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
You might like
php 进度条实现代码
2009/03/10 PHP
php实现读取内存顺序号
2015/03/29 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python实现多线程下载文件的代码实例
2014/06/01 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
学前教育专业毕业生自荐信
2013/10/03 职场文书
办理生育手续介绍信
2014/01/14 职场文书
毕业横幅标语
2014/10/08 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
客房部经理岗位职责
2015/02/02 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
MySQL约束超详解
2021/09/04 MySQL