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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
vue-cli常用设置总结
Feb 24 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
PHP 高手之路(二)
2006/10/09 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
php文件缓存方法总结
2016/03/16 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
使用Vue构建可重用的分页组件
2018/03/26 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
python分割列表(list)的方法示例
2017/05/07 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
2014全国两会大学生学习心得体会
2014/03/10 职场文书