1. トップページ
  2. JavaScript
  3. WebDesign
  4. Syntax Highlighterを導入する

Syntax Highlighterを導入する

公開
更新日

スポンサーリンク

Syntax Highlighterはhtmlやプログラムのソースコードを見やすくしてくれる機能です。JavaScriptで提供されているものがほとんどでしょう。様々なシンタックスハイライターが公開されていますが、おそらく最も多く使われているであろうSyntaxHighlighterを使うことにします。

なお、SyntaxHighlighter以外のものについて知りたければ、こちらのブログが非常に充実した内容となっています。ただ、最終更新が2009年で、SyntaxHighlighterについての記述は古くなっています。<ul>でマークアップされているが多少気になりますと書かれていますが、現在のSyntaxHighlighterは<code>でマークアップされています。その他の部分も、もしかしたら情報が古くなっているかもしれませんので、その点はご注意ください。

SyntaxHighlighterを選んだわけ

ちなみに、私は別のブログではSyntaxHighlighterではなく、Google謹製のシンタックスハイライターであるgoogle-code-prettifyを使っていました。このブログでsyntaxhighlighterの方を使うことにしたのは、やはり行番号があった方がいいなと思ったからです。

また、ここではJavaScriptを自分で設置する方法を採っていますが、WordPressをお使いの方なら、WordPressプラグインを使ってシンタックスハイライターを導入するという方法もあります。私はなるべくプラグインを使わずにすませたいので、JavaScriptを選んでいます。

ということで、前説が長くなりましたが早速導入してみることにします。

導入

こちらから最新版をダウンロードします。2011年5月現在の最新版は3.0.83です。SyntaxHighlighterをGoogleで検索すると、こちらのサイトが一番に出てくるのですが、旧バージョンまでしか置いていませんのでご注意ください。

さてダウンロードしたzipファイルを解凍すると大量のファイルが出てきます。あまり不必要なものをサーバーに置いておくのは気持が悪いので、必要なものだけアップロードすることにします。面倒なのでまるごとアップロードするという人はそれはそれで構わないでしょう。

私は今のところ、必要なのはhtmlとcss、JavaScript、php、sqlで充分なので、これらに関係するものだけを選びます。

まず、コードの種類に関係なく、絶対に必ず必要なのはscriptsフォルダの中にあるshCore.jsです。これは必ずアップロードします。これ以外のものはファイル名を見て判断します。JavaScript用が必要なら、shBrushJScript.jsを、Php用が必要ならshBrushPhp.jsをアップロードします。html向けはshBrushXml.jsです。

次はスタイルシートですが、stylesフォルダの中に多くのスタイルが用意されています。基本的なもので良ければ、shCoreDefault.cssを一つだけアップロードすればこと足ります。EclipseやEmacs風のスタイルも用意されていますので、そちらがいい人はそれらを選びます。各スタイルのプレビューはこちらで見ることができます。

さて、必要なjsとcssをアップロードしたら早速使ってみます。まずはhtmlで試してみます。

<head>
  <title>Syntax Highlighter</title>
  <script type="text/javascript" src="http://kihon-no-ki.com/js/syntaxhighlighter/scripts/shCore.js"></script>
  <script type="text/javascript" src="http://kihon-no-ki.com/js/syntaxhighlighter/scripts/shBrushJScript.js"></script>
  <link type="text/css" rel="stylesheet" href="http://kihon-no-ki.com/js/syntaxhighlighter/styles/shCoreDefault.css"/>
</head>
<pre class="brush: html">
  <h1>Syntax Highlighterを導入する</h1>
  <p>Syntax Highlighterを使って、ソースコードを見栄え良くしよう！</p>
</pre>

うまく表示されました。表示したいソースを<pre>タグの中に書いて、<pre>のclassで言語を指定するということです。htmlならclass="brush : html"。JavaScriptならclass="brush : js"です。要はbrush :の後ろに目的の言語を指定すればいいわけでです。

言語の指定

なお、言語の指定は以下の通りです。

言語表記
ActionScript3as3, actionscript3
Bash/shellbash, shell
ColdFusioncf, coldfusion
C#c-sharp, csharp
C++cpp, c
CSScss
Delphidelphi, pas, pascal
Diffdiff, patch
Erlangerl, erlang
Groovygroovy
JavaScriptjs, jscript, javascript
Javajava
JavaFXjfx, javafx
Perlperl, pl
PHPphp
Plain Textplain, text
PowerShellps, powershell
Pythonpy, python
Rubyrails, ror, ruby
Scalascala
SQLsql
Visual Basicvb, vbnet
XMLxml, xhtml, xslt, html, xhtml

JavaScriptであれば、class="brush : js"、class="brush : jscript"、class="brush : javascript"のどれでも構わないということです。

スポンサーリンク

このエントリーをはてなブックマークに追加
Pocket

JavaScriptカテゴリーの投稿

» JavaScriptカテゴリーの記事をもっと見る

WebDesignカテゴリーの投稿

Comment