Htmlでソースを表現する時に

プログラミング技術やHtmlなどの説明文章を記載する時に、JavaScriptやHtmlのソースを表示する方が閲覧者に分かりやすくなります。

この時、<pre>タグなどで囲んで表記するのですが、そのソースを欄の左上にソース表示・コピー・プリントのアイコンが表示されているHtmlページをよく見かけます。

それは、SyntaxHighlighterというJavaScriptとCSS、SWFファイルで構成されたソフトウェアを導入することで可能になります。

当サイトでも導入してみました。

ダウンロードはこちら、Ver2.0をダウンロードして自身のサーバに以下のディレクトリを配置しておきます。

• scripts
• src
• styles

http://code.google.com/p/syntaxhighlighter/

ライセンス形式はGNU LGPLとなっています。（参考：日本語Wiki説明）

Bloggerでは、テンプレートHtmlの編集画面から</body>の直前に以下のコードをペーストします。

<b:if cond='data:blog.pageType == &quot;item&quot;'>


<script src='http://prg.hyperhands.com/SyntaxHighlighter/Scripts/shCore.js' type='text/javascript'>
</script>
<script src='http://prg.hyperhands.com/SyntaxHighlighter/Scripts/shBrushJScript.js' type='text/javascript'>
</script>
<script src='http://prg.hyperhands.com/SyntaxHighlighter/Scripts/shBrushCss.js' type='text/javascript'>
</script>
<script src='http://prg.hyperhands.com/SyntaxHighlighter/Scripts/shBrushXml.js' type='text/javascript'>
</script>
<script src='http://prg.hyperhands.com/SyntaxHighlighter/Scripts/shBrushCSharp.js' type='text/javascript'>
</script>


<link href='http://prg.hyperhands.com/SyntaxHighlighter/Styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://prg.hyperhands.com/SyntaxHighlighter/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = &#39;http://prg.hyperhands.com/SyntaxHighlighter/scripts/clipboard.swf&#39;;
  SyntaxHighlighter.all();
</script>

</b:if>

そして、投稿するHtmlのソース部分を、タグ変換してペーストしたものを<pre>タグで囲みます。
<pre class="brush: javascript;">~</pre>


それだけで、表示ががらりと変化して便利に使えるソースになります。


ソースの種類によってリンクするJavascriptも多種多様で詳しい使い方は分かっておりませんが、SyntaxHighlighterでググってみると色々と参考になるサイトが表示されますので、参考にして下さいませ。

参考：http://ascii.jp/elem/000/000/401/401907/

この記事へのリンク記事を自身のBloggerへ作成する

関連記事

Blogger

Javascript

特殊文字