Noël Café : Blog
Noëlの公開備忘録とひとりごと。コメント・トラックバックご自由に

SyntaxHighlighter 導入

2022.5.2 追記 SyntaxHighlighter → Prism.jsに変更しました。
このページのHighlighterもPrism.jsです。悪しからず。

プラグイン名というかコード名を思い出せず、
どこのサイトに使われていたかも思い出せずに
しばらく入れられていなかったシステム。
これで、MTでコードを簡単にUPできます。
ハイライトもコピーも行数も!
最初に見たときに入れれば良かった。
以下備忘録です。


1. スクリプトをダウンロード
3.x系はクリップボードにコピー機能がないので、
2.x系をダウンロードします。
今回は、2.1.382を導入します。(として話を進めます)
http://alexgorbatchev.com/SyntaxHighlighter/
2. アップロード
適当な箇所に、syntaxhighligher フォルダを作成し
ダウンロード→解凍したファイルをUP。
私はルート直下にフォルダを作成しました。
3. SyntaxHighligherモジュール作成
MT テンプレートのモジュールを作成。
SyntaxHighligher とでも名前をつけて以下を記入
(ファイルの場所は適宜変更してください)

<script type="text/javascript" src="/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPerl.js"></script>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/syntaxhighlighter/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

私はPerl大好きなのでPerlも追加。
4. Headerをいじる
先ほど作成した SyntaxHighligher モジュールを読み込めるよう
以下を<head>中に記入

<$MTInclude module="SyntaxHighlighter"$>

記事を表示する系のところのみでOK。
5. 再構築する
これにてとりあえず導入は完了です。


6. codeを入力する
コードを入力するときは以下のように
<pre class=”brush: html;”>~</pre>で囲います。
言語ごとにbrush: の後を変えます。

<html>

テストだよ。

よく使用されている1.5の方が使いやすいかも・・・
と、導入してから思ってしまいました・・・。


ちなみに、バージョンは古いですが、
Movable Type用のプラグインもあります。
SyntaxHighlighter for Movable Type @ KWLOG


2011.3.27 追記
Reference :

Leave a Reply

*


CAPTCHA



Trackback URL