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 select操作控制方法小结
May 26 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
浅析vue数据绑定
Jan 17 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
浅谈JavaScript作用域
Dec 06 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 Ctemplate引擎开发相关内容
2012/03/03 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
js实现缓动动画
2020/11/25 Javascript
详解Python命令行解析工具Argparse
2016/04/20 Python
json跨域调用python的方法详解
2017/01/11 Python
python matplotlib画图实例代码分享
2017/12/27 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
python调用百度语音REST API
2018/08/30 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
双十佳事迹材料
2014/01/29 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
个人年终总结范文
2015/03/09 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
mysql函数全面总结
2021/11/11 MySQL