首页 > IT大师 > JavaScript > 文章正文

SyntaxHighlighter3.0.83 配置

2010/03/18 21:50:01 iTdos

为啥要用SyntaxHighlighter?为了看起来愉快一些!


最新版本可以在这里下载到


首先需要载入样式,脚本。如果是基于jQuery的,要载入jQuery。然后选择刷子载入,刷子支持PHP、JS、xml等等


然后载入样式文件。样式很多挑一个就行了。下面是一个示例代码,3.0开始,你可以用拖动鼠标,或者双击代码区来选择复制代码,所以就没有工具条存在的必要了。


<script type="text/javascript" src="/js/jquery.js" > </script>

<script type="text/javascript" src="js/shl/scripts/shCore.js"> </script>

<script type="text/javascript" src="js/shl/scripts/shBrushJscript.js"> </script>

<script type="text/javascript" src="js/shl/scripts/shBrushPhp.js"> </script>

<link href="js/shl/styles/shThemeEclipse.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">SyntaxHighlighter.all();</script>


<pre class="brush:js;gutter: false;toolbar:false;width:500">

function helloSyntaxHighlighter()

{

  return "SyntaxHighlighter 3.0.83 配置";

}

</pre>

上面是一个简单的配置,写在<pre>标签的CLASS中,当然也可以使用


SyntaxHighlighter.config.配置名 = ‘’


SyntaxHighlighter.defaults['gutter'] = ''


这样的方法配置,不过必须在调用 SyntaxHighlighter.all() 之前。


下面是抄来的配置列表,源码中也有解析。


1、下面这些配置使用SyntaxHighlighter.config.配置名 = ‘’ 的方式配置


配置名描述

bloggerModebool(false)博客整合模式?不理解,没有用过

stringsobject

允许用户自定义系统消息,比如出错,复制到剪切板等,很多只在2.×系列版本中有效


expandSource

help

alert

noBrush

brushNotHtmlScript

viewSource 2.x

copyToClipboard 2.x

copyToClipboardConfirmation 2.x

print 2.x


配置方法

SyntaxHighlighter.config.strings.noBrush= "你是不是忘了拿刷子了?";

stripBrsbool(false)如果你的编辑软件为每一行的结束自动加上<br>标签,这个选项允许你忽略它们

tagName‘pre’没事别动吧。换一个标签,还是用pre比较好

2、还有一些配置可以使用js也可以在标签中配置


下面这些配置使用SyntaxHighlighter.defaults['gutter'] = ''的方式配置


auto-linksbool(true)如果此项开启,代码中的超链接文字将被a标签套上,也就可以点击了。

class-name‘’为代码块加上自定义样式类,比如加上border ,写到这,我发现这是个好主意,我也加:)

collapsebool(false)在页面刚加载时,代码被折叠起来,如果代码篇幅较大,可以考虑考虑

first-line1行号从这个设置值开始,一般都是1

guttertrue是否显示行号

highlightnull标记重要的行,让他们高亮

html-scriptbool(false)如果你是个前端开发人员一定很喜欢这个,它能混合高亮HMLT 和 script脚本,但是你必须载入 xml 的笔刷shBrushXml.js

smart-tabsbool(false)姑且先叫它智能缩进好了。有时候开启确保你的代码格式保持原貌,毕竟通过网页显示后缩进有些变形

tab-size4自定义tab宽度

toolbarbool(true)对 3.0版本来说,这个选项关掉就是了,没啥用

小例子:关闭行号显示


SyntaxHighlighter.defaults['gutter'] = false;


SyntaxHighlighter.all();


IE 6 ,7 及IE8混杂模式BUG


IE的工程师总是给人“惊喜”,老毛病了,不多说。


1、当代码在一开始处于折叠状态时,代码折叠的字样飞到右边去了,而且会挡住下面的一些东西,方法很简单,在样式文件中找到


.syntaxhighlighter .toolbar 和


.syntaxhighlighter.collapsed .toolbar ,


将顺序按照 我上面写的方式放置,自然就解决了。主要是里面的两个position需要覆盖。IE听从靠后面的,FF听从子选择深的。。。


另一个BUG就是双击代码复制的问题,IE下代码会挤到上面去,虽然没啥影响,但是很不舒服。


找到如下样式,改为一样即可,主要是去掉最后两行


.syntaxhighlighter table td.code .container textarea {

box-sizing: border-box !important;

position: absolute !important;

left: 0 !important;

top: 0 !important;

width: 100% !important;

height: 100% !important;

border: none !important;

background: white !important;

padding-left: 1em !important;

}


重要提示:代码块的外框样式中有个 width:100% !important 有时会超出文本边界,可以通过class-name另外定义样式覆盖它


用户登录
服务器端开发
C#.Net Mvc 数据库
前端开发
JavaScript Div+Css Html