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

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

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

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

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

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

  • scripts
  • src
  • styles


ライセンス形式は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/




コメント(1)

hyperhands さんのコメント...

ページのローディングが最近遅くなりつつあるので、不要な時はSyntaxHighlighter関連の外部ファイルをローディングしないようにしてみました。
また、必要な時でも最後にローディングするよう、ソースのペースト位置を「/head」から「/body」へと修正しました。

コメントを投稿

関連記事
Blogger
Javascript
特殊文字