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.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
vue实现简单loading进度条
Jun 06 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
Nest.js散列与加密实例详解
Feb 24 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 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
php操作redis缓存方法分享
2015/06/03 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
javascript void(0)的妙用
2009/10/21 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
关于Python如何避免循环导入问题详解
2017/09/14 Python
python学习教程之使用py2exe打包
2017/09/24 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
python实现浪漫的烟花秀
2019/01/30 Python
Numpy的简单用法小结
2019/08/28 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
大学生职业生涯设计书
2014/01/02 职场文书
消防器材管理制度
2014/01/28 职场文书
人民调解协议书范本
2014/10/11 职场文书
医生见习报告范文
2014/11/03 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
员工自我工作评价
2015/03/06 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python