[原创].基于SyntaxHighlighter的Verilog HDL高亮组件

引子

一直在用PreCode Snppnet在Liver Writer中处理代码高亮；用起来蛮方便的。但是没有我喜欢的Verilog HDL的高亮。今天我在loydsen的启发下，决定写个基于SyntaxHighlighter的Verilog HDL组件，其实很简单。目前还在整理期间，一些关键字和函数还没有加入，还请各位长辈、行家多提意见和建议。

源代码

shVerilogEnhanced.js

/*
 * Name: SyntaxHighlighter.brushes.Verilog 
 * Author: Yuphone Chang
 * Email: yuphone@qq.com/
 * Create Date: 5.17, 2010
 */

SyntaxHighlighter.brushes.Verilog = function()
{
  var datatypes = 'reg integar unsigned ' +
                  'wire tri wand triand tri0 tri1 supply0 supply1 trireg ' +
                  'parameter specparam defparam event ';

  var primitives = 'and nand or nor xor xnor ' +
                   'buf not ' +
                   'bufif0 bufif1 notif0 notif1 '
                   'pullup pulldown ' +
                   'pmos rpmos nmos rnmos ';

  var keywords  = 'module endmodule ' +
                  'input output inout ' +
                  'begin end ' +
                  'assign deassign always initial genvar ' +
                  'forever repeat disable wait ' +
                  'function endfunction' +
                  'task endtask ' +
                  'generate endgenerate ' +
                  'specify endspecify ' +
                  'posedge negedge ' +
                  'if else for while ' +
                  'case casex casez endcase default ' +
                  'include timescale ' +
                  'ifdef endif ' +
                  'celldefine endcelldefine ' +
                  'attribute '
                  'fork join ';
                  
  var functions = 'display displayb displayo displayh ' +
                  'write writeb writeo writeh ' +
                  'strobe strobeb strobeh strobeo ' +
                  'monitor monitorb monitoro monitorh ' +
                  'fopen fclose ' +
                  'readmemb readmemh ' +
                  'finish stop ' +
                  'time stime realtime timeformat ' +
                  'printtimescale ' +
                  'setup hold setuphold skew recovery period width ';

  this.regexList = [
    // one line comments
    { regex: SyntaxHighlighter.regexLib.singleLineCComments,css: 'comments' },
    // multiline comments
    { regex: SyntaxHighlighter.regexLib.multiLineCComments, css: 'comments' },
    // double quoted strings
    { regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' },
    // single quoted strings
    { regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' },
    // constants
    { regex: new RegExp("[0-9]+['][bBoOdDhHeEfFtT][0-9a-fA-FzZxX_]+", 'g'), css: 'constants' },
    // datatypes
    { regex: new RegExp(this.getKeywords(datatypes), 'gm'), css: 'color1 bold' },
    // primitives 
    { regex: new RegExp(this.getKeywords(primitives), 'gm'), css: 'color2 bold' },
    // keywords
    { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword bold' },
    // functions
    { regex: new RegExp(this.getKeywords(functions), 'gm'), css: 'functions bold' }
    ];
};

SyntaxHighlighter.brushes.Verilog.prototype	= new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Verilog.aliases	= ['verilog', 'v'];

如何使用

1. 在博客园——管理——设置——页首Html代码中添加以下代码。

<!--SyntaxHighlighter的核心脚步-->
<script type="text/javascript" src="https://files.cnblogs.com/yuphone/shCore.js"></script>
<!--自定义的SyntaxHighlighter的Verilog高亮-->
<script type="text/javascript" src="https://files.cnblogs.com/yuphone/shVerilogEnhanced.js"></script>
<!--SyntaxHighlighter的核心样式表-->
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/yuphone/shCore.css">
<!--SyntaxHighlighter的默认主题样式表-->
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/yuphone/shThemeDefault.css">
<!--打开SyntaxHighlighter高亮-->
<script type="text/javascript">
  SyntaxHighlighter.all();
</script>

注：此处的的shCore.js、shCore.css和shThemeDefault.css为必需组件，shVerilogEnhanced.js是我自定义Verilog高亮组件。

2. 在Liver Writer或博客园的在线编辑器上，切换到HTML模式，加上pre标签，即可实现Verilog高亮。

<pre class="v;">
module water_led(
  input        CLOCK_50,                // 板载时钟50MHz
  input        Q_KEY,                   // 板载按键RST
  output [8:1] LED                      // LED[1] ~ LED[8]
);    
</pre>

测试代码

water_led.v

module water_led(
  input        CLOCK_50,                // 板载时钟50MHz
  input        Q_KEY,                   // 板载按键RST
  output [8:1] LED                      // LED[1] ~ LED[8]
);    

//++++++++++++++++++++++++++++++++++++++
// 分频部分 开始
//++++++++++++++++++++++++++++++++++++++
reg [23:0] cnt;                         // 计数子

// 溢出后自动重新计数 
always @ (posedge CLOCK_50, negedge Q_KEY)
  if (!Q_KEY)
    cnt <= 0;
  else
    cnt <= cnt + 1'b1;
  
wire led_clk = cnt[23];                 // 每(2^24/50M = 0.3355)sec取一次
//--------------------------------------
// 分频部分 结束
//--------------------------------------


//++++++++++++++++++++++++++++++++++++++
// 流水灯部分 开始
//++++++++++++++++++++++++++++++++++++++
reg [8:1] led_r;                        // 定义输出寄存器
reg       dir;                          // 循环方向控制

always @ (posedge led_clk, negedge Q_KEY)
  if (!Q_KEY)                           // 复位后右移
    dir <= 0;                        
  else
    // 到达左右端点否？到达则换向
    if(led_r == 8'h7F && dir == 0)
      dir <= 1;
    else if(led_r == 8'h01 && dir == 1)
      dir <= 0;

always @ (posedge led_clk, negedge Q_KEY)
  if (!Q_KEY)                           // 复位后右移               
    led_r <= 8'h01;          
  else
    // 根据dir，左右移位
    // 注意：LED实际移位方向与led_r移位方向相反
    // 因为开发板上LED[1]在左，LED[8]在右
    if(!dir) 
      led_r <= (led_r << 1) + 1'b1;     // LED右移；加法比移位的运算优先级高
    else
      led_r <= (led_r >> 1);            // LED左移

// 为什么要取反？
// 因为开发板上的LED是送0亮，送1灭
assign LED = ~led_r;                    // 寄存器输出
//--------------------------------------
// 流水灯部分 结束
//--------------------------------------

endmodule

参考

1 Lloyd Sheng Blog.玩转博客园的5个小技巧

2 SyntaxHighlighter.Developing a custom brush