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 相关文章推荐
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
浅谈express 中间件机制及实现原理
Aug 31 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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操作文件方法问答
2007/03/16 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
json 实例详细说明教程
2009/10/31 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
浅说js变量
2011/05/25 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
python感知机实现代码
2019/01/18 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
python简单的三元一次方程求解实例
2020/04/02 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
出国英文推荐信
2014/05/10 职场文书
我的中国梦口号
2014/06/16 职场文书
新文化运动的基本口号
2014/06/21 职场文书
课外小组活动总结
2014/08/27 职场文书
师德师风剖析材料
2014/09/30 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers
Python 中面向接口编程
2022/05/20 Python