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对URL字符串进行编码/解码分析
Oct 25 Javascript
Js 本页面传值实现代码
May 17 Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
Less 安装及基本用法
May 05 Javascript
详解JS函数stack size计算方法
Jun 18 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 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
node实现基于token的身份验证
2018/04/09 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
node后端服务保活的实现
2019/11/10 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
Python 判断是否为质数或素数的实例
2017/10/30 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
Python绘制数码晶体管日期
2021/02/19 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
作风建设年度心得体会
2014/10/29 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
校运会宣传稿大全
2015/07/23 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
导游词之四川武侯祠
2019/10/21 职场文书