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 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
vue 子组件和父组件传值的示例
Sep 11 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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php一个找二层目录的小东东
2012/08/02 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
linux中cd命令使用详解
2015/01/08 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
php创建类并调用的实例方法
2019/09/25 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
js读取本地文件的实例
2017/12/22 Javascript
js实现计算器功能
2020/08/10 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
python re模块常见用法例举
2021/03/01 Python
社区活动总结报告
2014/05/05 职场文书
奶茶店创业计划书
2014/08/14 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
zabbix监控mysql的实例方法
2021/06/02 MySQL
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
python中取整数的几种方法
2021/11/07 Python
关于使用Redisson订阅数问题
2022/01/18 Redis