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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
Vue渲染函数详解
Sep 15 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
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 冒泡排序算法的实现代码
2010/08/08 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
javascript 闭包详解
2015/02/15 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python print不能立即打印的解决方式
2020/02/19 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
装潢设计专业推荐信模板
2013/11/26 职场文书
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
培训讲师邀请函
2014/01/10 职场文书
对标管理实施方案
2014/03/12 职场文书
小学新学期寄语
2014/04/02 职场文书
公务员考察材料范文
2014/12/23 职场文书