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插件 大家可以收藏一下
Feb 07 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
编写React组件项目实践分析
Mar 04 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
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中CI操作多个数据库的代码
2012/07/05 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
python Django批量导入数据
2016/03/25 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
python os.listdir()乱码解决方案
2021/01/31 Python
台湾旅游网站:灿星旅游
2018/10/11 全球购物
请解释在new与override的区别
2012/10/29 面试题
培训主管的岗位职责
2013/11/23 职场文书
十佳教师事迹材料
2014/01/11 职场文书
法人代表授权委托书
2014/04/08 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
SpringBoot集成Redis的思路详解
2021/10/16 Redis
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers