【javascript】Webページにシンタックスハイライトを導入する

こんにちは。
unitopiではよくCSSやJavascript、HTMLなどのソースを公開していますが、より皆様に伝わりやすいようシンタックスハイライトを導入してみたいと思います。

シンタックスハイライト(Syntax highlighting)とは

シンタックスハイライトとは、テキストエディタの機能であり、テキスト中の一部分をその分類ごとに異なる色やフォントで表示するものである。シンタックスカラーリングとも。
この機能により、プログラミング言語やマークアップ言語といった構造化された言語において、その構造や構文上のエラーが視覚的に区別しやすくなるため、ソースコードの記述が容易となる。
引用:シンタックスハイライト – Wikipedia

というわけです。メモ帳で開発をせず、お好きなエディタ(sublimetextやcodaなど)で構築する大きな理由の一つでもあるのではないでしょうか?

例えば僕の場合、sublimetextのカラーリングはこんな感じです。
Screen_Shot_2014-12-08_at_02_33_56

やはり色分けされているとわかりやすいですよね。

Webページではどうだろう

最近のブログではカラーリングされているものが多いのでおそらくご覧になっていると思いますが…。

<?php
/**
 * The main template file
 *
 * @link http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

     <div id="primary" class="site-content">
          <div id="content" role="main">
          <?php if ( have_posts() ) : ?>

これだと味気ないですよね?

<?php
/**
 * The main template file
 *
 * @link http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

     <div id="primary" class="site-content">
          <div id="content" role="main">
          <?php if ( have_posts() ) : ?>

これがやはりわかりやすいですね!

これらはjavascriptによって実装されており、たくさんのライブラリが存在します。

もちろんWordPressのプラグインでも数多くのシンタックスハイライトプラグインがありますが、今回はWordPress以外のWebページでも使えるものということで、WordPressプラグイン以外でご紹介します。

Prism

Prismはダウンロードをするときにカスマイズでき、自身の使用方法に応じて必要最小限にできます。軽量ですむのは素晴らしいですね!

ダウンロード手順

STEP1

Screen-Shot-2014-12-08-at-02.13.16
Compression level:ちゃんとスペースやタブ、改行が入った状態か、libraryが読み込めさえすればいいか、ということです。通常はMinifiedで問題ありません。
Themes:お好きなのを選んでください。当ブログではDefaultです。

STEP2

Screen-Shot-2014-12-08-at-02.13.22
Languages:言語によってカラーリングが異なるため、使用する言語はチェックを入れておきましょう。使う予定がないなーというものは外しておけば軽量化になります。

STEP3

Screen-Shot-2014-12-08-at-02.13.33
Plugins:Prismのプラグインの同梱版をダウンロードできます。行番号をいれたり、URLがあればリンクにしたり、といったプラグインが用意されています。個々にDemoがあるので確認してみてください。

STEP4

Screen-Shot-2014-12-08-at-02.13.49
ラストです。あとはJSとCSSをDLして、反映したいサイトに読み込ませます。

使い方

通常コードを掲載するときは、

<pre>
    <code>
        <div id="primary" class="site-content">
        <div id="content" role="main">
    </code>
</pre>

といった形にしますが、

<code class="language-xxxx"></code>

のようにcodeタグにclassをつけてあげることで簡単に反映されます。
※ xxxxの部分をcssやhtml(markup)にしてあげてください。

まとめ

いかがでしたか? javascriptとcssを1つずつ読みこむだけで簡単に実装できるので、是非お試しください。

フォローして続編をチェック

@universionsをフォロー