Enlighter Customizable Syntax Highlighter プログラムを見やすく表示するWordPressプラグイン

Enlighter Customizable Syntax Highlighter プログラムを見やすく表示するWordPressプラグイン

ソースコードを記事内で表示するとき、そのままでは見にくいため、各言語でシンタックスハイライトして強調表示したり行番号を表示したり、コピーしやすくしたり…といったニーズを満たしてくれるプラグイン「Enlighter Customizable Syntax Highlig」を紹介します。
Crayon Syntax Highlighterが有名ですが、最終更新が2年前で最新版のWordpressの動作保証もないため、こちらをお勧めします。

Enlighter Customizable Syntax Highlighter

対応している言語

以下の言語に対応しています。
対応言語は言語特有の宣言が色付けされて見やすく表示されます。

  • AVR Assembly
  • Generic Assembly
  • C
  • CSS
  • C#
  • C++
  • Cython
  • Diff
  • Generic
  • HTML
  • Ini
  • JSON
  • Java
  • Javascript
  • Kotlin
  • LUA
  • MarkDown
  • Matlab
  • NSIS
  • PHP
  • Python
  • RAW
  • Ruby
  • Rust
  • SQL
  • Squirrel
  • Shell
  • VHDL
  • XML

対応ブラウザ

かなり古いバージョンのブラウザからサポートしています。
よく問題になるIEに関しても、バージョン8どころか6から対応しているのでブラウザは気にする必要はないでしょう。

  • Chrome 10+
  • Safari 5+
  • Internet Explorer 6+
  • Firefox 2+
  • Opera 9+

サンプル・特徴

ブロック表示

<head>
    <!-- Include EnlighterJS Styles -->
    <link rel="stylesheet" type="text/css" href="../Build/EnlighterJS.yui.css" />
    <!-- Include MooTools Framework -->
    <script type="text/javascript" src="mootools-core-1.4.5-full-nocompat.js"></script>
    <!-- Include EnlighterJS -->
    <script type="text/javascript" src="../Build/EnlighterJS.yui.js" ></script>
    <!-- Initialize EnlighterJS -->
    <script type="text/javascript">
    window.addEvent('domready', function() {
      // highlight all pre tags
      document.getElements('pre').enlight({
        indent : 2
      });
    });
    </script>
</head>
// Load language parser
language = new EnlighterJS.Language[languageName](this.getRawCode(true));
// compile tokens -> generate output
var output = this.renderer.render(language, specialLines, {
  lineOffset: (this.rawCodeblock.get('data-enlighter-lineoffset') || null),
  lineNumbers: (this.rawCodeblock.get('data-enlighter-linenums') !== 'false')
});
// set class and id attributes.
output.addClass(themeName.toLowerCase() + 'EnlighterJS');
output.addClass('EnlighterJS');
output.set('id', 'EnlighterJS_' + String.uniqueID());

インライン表示

window.addEvent('domready', function() {
// highlight all pre tags
document.getElements('pre').enlight({
indent : 2
});

・タブ表示で複数ソースを簡潔に表示できます。(タブの有無は設定で制御可)
・予め指定した行をハイライトして表示できます。
・インライン表示も可能で、文章中に記述したソースをハイライトできます。
・設定は全てGUIで完結している為、ソース表示して設定する必要はありません。

デザインテーマ

16種類のテンプレートから選択できます。
実際のデザインテーマのサンプルは公式ぺージから確認下さい。

デザインテーマ示サンプル

Advertisement

インストール・ダウンロード

WordPressのプラグインとしてWordPress プラグインディレクトリで提供されています。
Wordpress管理画面のプラグインから「EnlighterJS」を検索してインストールする事で、ワンクリックで使用可能になります。

※Wordpressを利用しない場合でも、別途JS・CSSをセットアップすることで利用できます。

EnlighterJS

使い方

ここではWordpressで使用する場合について説明します。
JSプラグインとして使用する場合は、公式サイトのドキュメントを参照して下さい。

入力

インストールすると、記事作成画面に「Code Insert」ボタンが追加されます。
※Wordpressの新しい入力エディタのGutenbergにも既に対応済みです。

詳細な使い方は公式ドキュメントを参照下さい。

公式ドキュメント

設定

WordPress管理画面にメニュー「Enlighter」が追加されます。
こちらから、デザインテーマや表示方法の詳細を設定できます。

注意点

WordPressのテーマによって、ソース表示に関連するタグ自体(ul・li)にスタイル設定されている場合があります。
そうすると、意図した行間隔が広くなったり行数表示が複数表示される事があります。

対処法として、WordpressのテーマのCSS定義の本プラグインのclassが付与されている要素に限り、設定を初期化して無効化します。
以下、本サイトで使用しているLION MEDIAテーマで設定しているCSSを記載しておきます。

設定例(使っているテーマに応じて変更して下さい)

/* li要素の連番削除 */
.content ol.enlighterEnlighterJS li:before{
    counter-increment: initial;
    content: initial;
    position:initial;
    left:initial;
}
/* 行間隔 */
.content ul.enlighterEnlighterJS li, .content ol.enlighterEnlighterJS li {
    position: initial;
    line-height: initial;
    padding: initial;
    font-size: initial;
}

 

ツールカテゴリの最新記事