投稿日: 投稿者: のんき

JavaScript (41) SyntaxHighlighter のカスタマイズ

前回、いろいろ試してうまくいかなかった点がありました。ダウンロードしたバージョンが正しくなかったようです。今回は改めて最初から SyntaxHighlighter 3.0.83 を使って Small Basic のコードをきれいに表示できるようにしてみたいと思います。

SyntaxHighlighter 3.0.83 のダウンロード
GitHub の zip ファイルをダウンロードします。

ファイルのコピー
このうち以下のファイルを自分のサイトにコピーします。
・ styles\shCore.css
・ styles\shThemeEclipse.css
・ scripts\shCore.js
・ scripts\shBrushCss.js
・ scripts\shBrushJScript.js
・ scripts\shBrushVb.js
・ scripts\shBrushXml.js

ココログの設定
ココログの設定 | ブログのサブタイトル の下に以下のコードを設定し、反映します。

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shCore.js"></script>
<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushJCss.js"></script>
<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushJScript.js"></script>
<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushVb.js"></script>
<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.nonkit.com/javascript/css/shCore.css">
<link type="text/css" rel="stylesheet" href="http://www.nonkit.com/javascript/css/shThemeEclipse.css">
<script type="text/javascript">SyntaxHighlighter.all();</script>

VB のブラシを使って SB のプログラムを表示
以下のようなコードをブログに埋め込むと、

<pre class="brush:vb">
For i = 1 To 100
  TextWindow.WriteLine("Hello World!")
EndFor
</pre>

このように表示されます。

For i = 1 To 100
  TextWindow.WriteLine("Hello World!")
EndFor

SB のブラシとテーマを作成
作成したブラシ (.shBrushSBjs) とテーマ (shThemeSb.css) をこちらに公開しました。

SB のブラシを使って SB のプログラムを表示
ココログの設定に作成したブラシを追加して以下のようなコードを埋め込むと、

<pre class="brush:sb">
For i = 1 To 100
  TextWindow.WriteLine("Hello World!")
EndFor
</pre>

このように表示されます。

“” への1件の返信

  1. この記事はココログ上では正しく動いていたのですが、Wordpress.com の SyntaxHighlighter 機能では独自の言語を追加することができないので、最後の部分はココログの表示イメージを貼り付けてあります。

    いいね

    返信する

コメントを残す