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 相关文章推荐
js中call与apply的用法小结
Dec 28 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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
15种PHP Encoder的比较
2007/04/17 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python装饰器知识点补充
2018/05/28 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
python输入多行字符串的方法总结
2019/07/02 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
销售文员的岗位职责
2013/11/20 职场文书
竞聘上岗演讲
2014/05/19 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技