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 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
微信小程序实现上传图片功能
May 28 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
javascript+Canvas实现画板功能
Jun 23 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 extract 将数组拆分成多个变量的函数
2010/06/30 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
js实现内置计时器
2019/12/16 Javascript
python轻松实现代码编码格式转换
2015/03/26 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
python 全文检索引擎详解
2017/04/25 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python hashlib模块实例使用详解
2019/12/24 Python
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
运动会表扬稿大全
2014/01/16 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
初中作文评语
2014/12/25 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB