Category Archives: 零碎修改

如何为SyntaxHighlighter编写自己的Verilog Brush

这几天为了找个合适自己的代码高亮插件

由于自己过于龟毛

所以试用了绝大部分网上推荐的插件

一一尝试了之后

最后决定试用SyntaxHighlighter Evolved

至于之前WP-Syntax

老实说,这个的确很棒,代码支持列表也完全足够绝大部分开发者,包括电子开发人员,默认自带verilog等,只是颜色搭配很一般,加上不知道是不是我自己没设置好,我装了这个之后,

<pre>标签里面的内容都不能居中对齐。

还有另外一个……我忘记名字了,换掉原因多是因为颜色搭配以及排版问题

虽然SyntaxHighlighter Evolved也不见得就是完美

我装了TinyACE Advanced,并选择保留不删除<br />等标签,因为自己习惯手工打回车空行

但是这个时候贴在Evolved里的代码

这些标签就都不会删掉,每行代码都会多出一个这个<br />……

只好最后又禁用掉那个选项

求完美解决方案,或者告诉我怎么胡乱打空行不被wordpress吃掉就可以……

既然要使用SyntaxHighlighter Evolved

这个插件外观漂亮是漂亮,但是支持的语言实在不够

想着日后我需要贴Verilog HDL代码

网上又遍寻不到

于是就自己写了个

以下附上此次编写过程并给点资料方便大家自己写个

准备工作

虽然我们要写个JavaScript的脚本文件,但是实际上,你现在不必去学它就可以写出这个东西了

你唯一可能需要了解的一个东西就是Regular Expression,也就是正则表达式

这个讨厌又很神奇的东西,花个30分钟学学吧,基本的应用蛮快学的

以下是各种推荐资料,先记下,后面需要再回来看吧

 

  • 中文正则表达式教程http://deerchao.net/tutorials/regex/regex.htmhttp://www.cyut.edu.tw/~ckhung/b/gnu/regexp.php
  • 英文教程http://www.regular-expressions.info/
  • 你可以在这里进行在线测试,看看你的正则表达式到底合不合用http://www.gskinner.com/RegExr/

从零开始

请新建一个js文件,我这里取名为shBrushVerilog.js,只是为了跟插件的其他笔刷有个相同的命名规则,整齐而已

1.编写shBrushVerilog.js文件

SyntaxHighlighter.brushes.Verilog = function()
{
	var datatypes = '';//这里的具体代码请看源文件
	var keywords = '';//每种不同语言的关键字都不一样,需要参考语言手册
 	this.regexList = [
	{ regex: SyntaxHighlighter.regexLib.singleLineCComments,	css: 'color1' },			// one line comments
	{ regex: SyntaxHighlighter.regexLib.multiLineCComments,		css: 'color1' },			// multiline comments
	{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,		css: 'string' },			// strings
	{ regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },			// strings
	{ regex: /^ *`.*/gm,						css: 'preprocessor' }
	{ regex: /\b\d+\'?[oObBdDhH]?[0-9xXzZA-Fa-f]*/g,		css: 'value' }
	{ regex: /\$\w+/g,						css: 'functions bold' }
	{ regex: new RegExp(this.getKeywords(datatypes), 'gm'),		css: 'variable bold' }
	{ regex: new RegExp(this.getKeywords(keywords), 'gm'),		css: 'keyword bold' }
	];
}
SyntaxHighlighter.brushes.Verilog.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Verilog.aliases = ['verilog'];

其实结构没什么好讲解的

你偷懒的话可以复制粘帖这一份代码然后进行修改

需要注意的地方是this.regexList之后的那些正则表达式对象需要根据语言的特性进行修改

默认风格的颜色参考请看这里:

  • comments, keyword, string, preprocessor, variable, value, functions, constants, script, color1, color2, color3

我的代码中

7-8行的注释因为verilog与c相同,所以可以直接这么套用原有的

9-10的string类型也有可以直接复用的代码

关键的是第11-13行

这里我只解释第13行的预处理字符中的正则表达式

regex: /^ *`.*/gm

  • ^ 意思是开头有可能含有0-无数个空格(记住^之后有空格哦)
  • 然后接着一个`字符,这是verilog中的预处理的字符
  • 之后的.*说明预处理字符之后含有0-无数个字符
  • g的意思是递归整个文件的匹配搜索
  • m的意思是多行匹配,如果不加上这个,比如:
    `timescale
    `timescale
    

    第二行是无法被匹配的

更多知识请自学正则表达式

我们写好这个文件之后,就可以把它加入到我们的插件中去

请编辑你的SyntaxHighlighter Evolved,在WordPress插件安装列表那里点击它的Edit选项

2.在一堆wp_register_script中间插入以下这句来注册我们新弄好的笔刷

wp_register_script( 'syntaxhighlighter-brush-verilog',
	plugins_url('syntaxhighlighter/third-party-brushes/shBrushVerilog.js'),
	array('syntaxhighlighter-core'),
	'20100420'
);
  • 函数的第一个参数是我们注册的笔刷名称,请保持“syntaxhighlighter-brush-你的笔刷名称”的格式
  • 第二个参数是我们笔刷的存放路径,请相应放个插件可以搜索得到的位置,最好就放在插件下
  • 照抄吧,我没去查这个的含义,现在快凌晨6点了,好困啊
  • 你的版本号,给自己个参考免得下次修改不知道哪个比较新

3.然后我们需要对我们的笔刷映射一个名称来代表它

请找到这个函数并在它下面添加

$this->brushes = (array) apply_filters( 'syntaxhighlighter_brushes', array(
/* ... */
'verilog' => 'verilog', //左边是日后我们要试用的标签名称,右边是笔刷名称
) );

4.最后,上传新笔刷文件到我们之前定义的目录下,然后贴段代码来试看看

怎么样,这样的效果满意不

你可以自己调整颜色搭配,考虑剔除掉某些关键字不着色都可以

Tagged