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