astel-labs.net

一応、まがりなりにもプログラミング関連記事を載せたいな～と思っている訳なので、コードを見やすく表示させるために「SyntaxHighlighter」を設置してみる

現在の最新バージョンは「2.1.364」ですが、日本語の記事がなかなか見つからない・・・
（わたしは日本人なので、英語なんてわかりません！）

とりあえずは、ネットで情報を探しながら自力で設置してみることに・・・
ちなみにわたしはwebアプリ系はほぼ知識がないので、タグをどこに配置すればいいのかも良くわかっていません！

不安要素が盛りだくさんですが、 まずはSyntaxHighlighterをダウンロードして・・・

ここからは、実際に試行錯誤しながら設置した手順になります

ダウンロードした「syntaxhighlighter_2.1.364.zip」を解凍すると、「scripts」「src」「styles」「LGPLv3.txt」「test.html」の５つのファイルがあると思います

実際に使用するのは、この中の「scripts」「styles」の２つのフォルダです

では、実際にMovableType5に組み込んでみましょう！

１．まずは名前は何でもいいのですが、判りやすいように「SyntaxHighlighter」というフォルダを自分のPCのローカルに作成します
２．作成した「SyntaxHighlighter」フォルダの中に、バージョンが判るように「2.1」というフォルダを作成し、その中に「scripts」「styles」の２つのフォルダをコピーします

ここからはMovableTypeをホストしているサーバー上の操作です
３．サーバー上のMovableTypeのインストールフォルダが「mt」だとした場合、「/mt/mt-static/plugins」と、フォルダをたどっていきます
４．「plugins」を開いたら、そのフォルダに手順１．で作成した「SyntaxHighlighter」フォルダをコピーします

ここからはMovableTypeにログインして操作します
５．メニューから、「デザイン」-「テンプレート」-「テンプレートモジュール」から、「HTMLヘッダー」を選択する

６．テンプレートを編集する

<!-- ここはデフォルトのテンプレート -->
<meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$>" />
<meta name="generator" content="<$mt:ProductName version="1"$>" />
<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
<link rel="start" href="<$mt:BlogURL$>" title="Home" />
<link rel="alternate" type="application/atom+xml" title="Recent Entries" href="<$mt:Link template="feed_recent"$>" />
<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
<!-- ここから追加 -->
<link rel="stylesheet" type="text/css" charset="utf-8" href="/mt/mt-static/plugins/SyntaxHighlighter/2.1/styles/shCore.css"/>
<link rel="stylesheet" type="text/css" charset="utf-8" href="/mt/mt-static/plugins/SyntaxHighlighter/2.1/styles/shThemeDefault.css"/>
<script type="text/javascript" src="/mt/mt-static/plugins/SyntaxHighlighter/2.1/scripts/shCore.js"></script>
<script type="text/javascript" src="/mt/mt-static/plugins/SyntaxHighlighter/2.1/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="/mt/mt-static/plugins/SyntaxHighlighter/2.1/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="/mt/mt-static/plugins/SyntaxHighlighter/2.1/scripts/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = '/mt/mt-static/plugins/SyntaxHighlighter/2.1/scripts/clipboard.swf';
SyntaxHighlighter.config.strings.expandSource = 'ソースを展開';
SyntaxHighlighter.config.strings.viewSource = 'プレーン表示';
SyntaxHighlighter.config.strings.copyToClipboard = 'クリップボードへコピー';
SyntaxHighlighter.config.strings.copyToClipboardConfirmation ='クリップボードへコピーしました';
SyntaxHighlighter.config.strings.print = '印刷';
SyntaxHighlighter.config.strings.help = 'help';
SyntaxHighlighter.all();
</script>
<!-- ここまで追加 -->
<$mt:CCLicenseRDF$>

７．設定を保存して、サイトを再構築する

とりあえずこれで準備は完了です
後は、実際にコードを書いてみましょう

８．ブログ記事内に、C#でサンプルコードを書いてみる

usingSystem;
namespace ConsoleApplication1
{
    class Program
    {
        static void Main( string[] args )
        {
            Console.WriteLine( "Hello, World!" );
        }
    }
}

こんな感じでhtmlコードを直接埋め込んであげると、表示されるはず・・・
表示されなかったら自力でがんばってください！
（わたしはここまでで３時間かかりました・・・）

あとは、HTMLヘッダーに埋め込んだスクリプトで、C#とhtml/XML以外の言語を使いたい場合には「Brushes」を参考に行を追加してください