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 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
javascript用函数实现对象的方法
May 14 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 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字符串截取问题
2006/11/28 PHP
扩展你的 PHP 之入门篇
2006/12/04 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
javascript各种复制代码收集
2008/09/20 Javascript
js电信网通双线自动选择技巧
2008/11/18 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
JS实现复制功能
2017/03/01 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
Python 含参构造函数实例详解
2017/05/25 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
PyQt5实现简易电子词典
2019/06/25 Python
pandas的resample重采样的使用
2020/04/24 Python
python3.5的包存放的具体路径
2020/08/16 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
python matlab库简单用法讲解
2020/12/31 Python
单位介绍信范文
2014/01/18 职场文书
地质灾害防治方案
2014/05/14 职场文书
学校施工安全责任书
2015/01/29 职场文书
学生退学证明
2015/06/23 职场文书
公司费用报销管理制度
2015/08/04 职场文书
大学生社会实践感想
2015/08/11 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang