ブログ(HTML)でソースコード引用を綺麗に その２
<<
作成日時 ： 2010/06/22 22:10
>>
ブログ気持玉 0 /
トラックバック 3 /
コメント 0
前回から引き続いて、ブログへの綺麗なコード引用について。
いろいろググりながら調べてみると、こういったコードの色づけ処理はコードハイライトと言うらしいですね。
というわけでコードハイライトのキーワードでググってたどりついたのがこちらのページでした。
■あなたのソースコードを彩る、Syntax Highlighterまとめ
今回やりたいことがそのものズバリまとめてありました。
上記の記事によると、方法は大きく分けて三つあるとのこと。
一つ目がコードをそのまま貼って前後をタグで囲う等のマーキングし、そのマーキングした部分をJavascriptで動的にコードハイライトさせる方法(Javascript系）
二つ目がソースコードを何らかのツールで事前にコードハイライトさせたHTMLに変換してそれをブログに貼る方法（変換ツール系）
三つ目がブログ自体にコードハイライト機能がある、もしくはプラグイン等でコードハイライトを実現する方法（ブログツールプラグイン系）
ではそれぞれ検討してみましょう。
まず第3のブログツールプラグイン系は却下ですね。ウェブリブログにコードハイライト機能があったりプラグインが使えたりということは残念ながらありません。
第1のJavascript系はコード部分がそのままの形で残る（タグ等で汚くならない）ので後々メンテしやすいという特徴があるんですが、Javascript環境が必須となり、ブラウザが非対応もしくはセキュリティ的に使えない場合や、そもそもブログ側がJavascript非対応の場合は使えないということになります。
ここで問題になるのがウェブリブログの仕様なのでした。
ウェブリブログにアップできるのは、普通の記事を除くと、画像・音声のみ。なので、Javascriptのコードを入手してもアップロード先がないのです…。（scriptタグは使えるようです）
まぁ、これもセキュリティ的な制限なんでしょうね。
サンプルコードをアップしてるWebスペースに置いとけば可能は可能ですが…使える人が限られちゃうので、役に立つ記事じゃなくなってしまう…
と言うわけで、残る第2の方法、変換ツールを模索することにします。
改めて上記の記事を読むと、GeSHiと言うのが対応している言語数や使用しているサイト数から見て有力な感じです。3つのサイトが引用されていますので、それぞれ見てみます。
なお、今回変換するのは前回と同様のXAMLコードです。XAMLはXMLの一種ですから、今回はXMLとして変換を試みています。
●KoshigoeBLOG：なんとなくGeSHiでWebAPI書いてみた
記事中にテストフォームへのリンクがありますので、そこからたどってください。languageをxmlに、output modeはRawにしてます。
まずこれが変換後のコードで…
<pre class="xml"><span style="color: #009900;"><span style="font-weight: bold; color: black;"><StackPanel</span> <span style="color: #000066;">KeyUp</span>=<span style="color: #ff0000;">"TopLevelKB"</span><span style="font-weight: bold; color: black;">></span></span>
<span style="color: #009900;"><span style="font-weight: bold; color: black;"><Button</span> <span style="color: #000066;">Name</span>=<span style="color: #ff0000;">"ButtonA"</span> <span style="color: #000066;">Content</span>=<span style="color: #ff0000;">"Button A"</span><span style="font-weight: bold; color: black;">/></span></span>
<span style="color: #009900;"><span style="font-weight: bold; color: black;"><Button</span> <span style="color: #000066;">Name</span>=<span style="color: #ff0000;">"ButtonB"</span> <span style="color: #000066;">Content</span>=<span style="color: #ff0000;">"Button B"</span><span style="font-weight: bold; color: black;">/></span></span>
<span style="color: #009900;"><span style="font-weight: bold; color: black;"><TextBlock</span> <span style="color: #000066;">Name</span>=<span style="color: #ff0000;">"statusTextBlock"</span><span style="font-weight: bold; color: black;">/></span></span>
<span style="color: #009900;"><span style="font-weight: bold; color: black;"></StackPanel<span style="font-weight: bold; color: black;">></span></span></span></pre>
で、次がその表示結果です。
<pre class="xml"><StackPanel KeyUp="TopLevelKB">
<Button Name="ButtonA" Content="Button A"/>
<Button Name="ButtonB" Content="Button B"/>
<TextBlock Name="statusTextBlock"/>
</StackPanel></pre>
まず、最初に気付くのがpreタグですね。ウェブリブログではpreタグは使えないのか(T_T)
そのおかげで本来スペースが入っている部分がなくなってしまって、インデントが効いてません。
半角スペースを に変換するなりしないと駄目ですね。ちと残念。
●ハタさんのブログ：勝手にGeshiWebAPI
目的のページはリンク切れのようです…残念。でも記事中にもう一つ変換ツールのページがリンクされてました。
Enjoy*Study：Code Syntax Highlighter(Copy&Paste HTML)
そちらも見てみましたが…XAMLやC#のコードは非対応のようですね…こちらも残念。
●Quick Hilighter
対応言語が半端ないですね。これがGeSHiの力か。
行番号付加機能があったりスタイルシート部とHTMLが分離できたり、なかなか高機能そうです。
languageはXML、Line NumbersはNone、Combine Style and HTML Codeをオンにして変換してみます。
<div class="xml" style="font-family:monospace;color: #006; border: 1px solid #d0d0d0; background-color: #f0f0f0;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"><StackPanel</span> <span style="color: #000066;">KeyUp</span>=<span style="color: #ff0000;">"TopLevelKB"</span><span style="color: #000000; font-weight: bold;">></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"><Button</span> <span style="color: #000066;">Name</span>=<span style="color: #ff0000;">"ButtonA"</span> <span style="color: #000066;">Content</span>=<span style="color: #ff0000;">"Button A"</span><span style="color: #000000; font-weight: bold;">/></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"><Button</span> <span style="color: #000066;">Name</span>=<span style="color: #ff0000;">"ButtonB"</span> <span style="color: #000066;">Content</span>=<span style="color: #ff0000;">"Button B"</span><span style="color: #000000; font-weight: bold;">/></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"><TextBlock</span> <span style="color: #000066;">Name</span>=<span style="color: #ff0000;">"statusTextBlock"</span><span style="color: #000000; font-weight: bold;">/></span></span><br />
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></StackPanel<span style="color: #000000; font-weight: bold;">></span></span></span><br />
</div>
そして表示結果は…
<StackPanel KeyUp="TopLevelKB">
<Button Name="ButtonA" Content="Button A"/>
<Button Name="ButtonB" Content="Button B"/>
<TextBlock Name="statusTextBlock"/>
</StackPanel>
改行が余計に入ってるorz
まぁでもインデントが崩れるよりは対処が楽です。後ろの<br />をエディタで削除してからアップすればいいですからね。ちょっと修正してみると…
<StackPanel KeyUp="TopLevelKB">
<Button Name="ButtonA" Content="Button A"/>
<Button Name="ButtonB" Content="Button B"/>
<TextBlock Name="statusTextBlock"/>
</StackPanel>
おお、うまく出た。
後は…色がちょっと思ってたのと違いますかね〜。
まぁこちらはCSSとHTMLを別に出力するモードで、CSSは編集して、ブログのCSS編集で追加しておけばいいかな。
|
ブログ気持玉
クリックして気持ちを伝えよう！
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
ニコッとタウン