3. シンタックスハイライト/highlight.js/行番号表示プラグインを使ってみる

 
3.1 設置方法
3.2 表示例
3.3 現時点でのまとめ

3.1 設置方法

 <head>~</head>
<link rel="stylesheet" href="highlight/styles/default2.css">
<script src="highlight/highlight.pack.js"></script>
<script src="highlight/highlightjs-line-numbers.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>hljs.initLineNumbersOnLoad();</script>

 と 5行ほど埋め込みます。

3.2 表示例

#include <stdio.h> int main(int argc, char* argv[]) { print("Hello World!"); return 0; } if (cli) { } ってなんなの~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ふにふにを単語として数えているんだね~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~どういう数え方をしているんだろうか? ちゃんと行数数えてる? 行数の数え方は Good 8 9 10 コードって何か定義してたっけ? それは <div> のせいでした。<code> 後 </code> 前の改行を解釈しないようにするのが大変そうだな。あれこれは何だか変。行数が出ないよ 難関が漢字の解釈のさせかただな 行番号がどうやってつくのかも不思議? あれ複数行になると行数が出るようになる <?php if (こう書けば php と解釈してくれるのかな) ?>

3.3 現時点でのまとめ

 現時点では、<code></code> 前後の改行をコードとして読み込んでしまうのが第一の問題。  このサイトで採用するには、漢字をハイライトさせたいが、まだ、ソース内容まで解析する元気がない。  小さな問題として、行番号を表示できない時がある・・・。