higlight.jsを試す

ソースコードのハイライトを表示をするのにtitle=""を試す。

軽めなものを選んでみた。

ここでは見え方のテスト。

エディタから入力して<pre></pre>で括られた中身をもう一度<code></code>で括った場合。

module test

(

input RST_N,

input CLK

input DI,

output DO

)

reg data;

always @(posedge CLK or negedge RST_N) begin

if(!RST_N)

    data <= 1''b0;

end else begin

    data <= DI

end

assign DO = data;

endmodule

ここからはHTMLに直接コードを書いてみた場合。

module test ( input RST_N, input CLK

input DI,
output DO

) reg data; always @(posedge CLK or negedge RST_N) begin if(!RST_N) data <= 1''b0; end else begin data <= DI end assign DO = data; endmodule

見え方は同じっぽいので使えそう感じですな。

当分、使ってみてみよう。

コードの判別も自動で行ってくれるらしい。

<link rel="stylesheet" href="/path/to/styles/default.css">

<script src="/path/to/highlight.pack.js"></script>

<script>hljs.initHighlightingOnLoad(),</script>

こんな感じで自動判別するらしい。

下記を追加しておくと、<pre></pre>だけのコードだけでもハイライトできるようになった。

<script>

$(document).ready(function() {

    $(''pre'').each(function(i, block) {

        hljs.highlightBlock(block),

    }),

}),

</script>

こんな感じにハイライトされると見やすくなるかな？