軽量のhighlight.jsとprism.jsの比較、どっちか迷ったらプラグインPrismatic!シンタックスハイライトのおすすめ!

プログラミング

highlight.jsとprism.js、その両方が使えるプラグインPrismatic、他いろいろと紹介していきます。

Crayon Syntax HighlighterやSyntaxHighlighter Evolvedからhighlight.jsやprism.jsに乗り換え

利用者が多いCrayon Syntax Highlighterですが、重たいという弱点があります。高速化するために軽量のhighlight.jsやprism.jsに乗り換える人は少なくなくありません。ちなみに私はSyntaxHighlighter Evolved(こちらも重め)から乗り換えました。

ただ、highlight.jsとprism.jsのどちらにしようかちょっと迷う方もいるかもしれませんね。

また、あまりITに詳しくない人や非エンジニアはプラグイン化されたものを使いたいかもしれませんね。

Highlight.jsやPrism.jsを両方試したいのなら、プラグインPrismatic!

そんな人にオススメなのが、Highlight.jsやPrism.jsの両方を使えるプラグインです。

Prismatic
Display beautiful syntax-highlighted code snippets with Prism.js or Highlight.js

ダウンロード数は多くはありませんが、結構、評判がよいプラグインを多数開発している作者さんです。日本語で紹介しているサイトがありませんし(今紹介した( *´艸`))。うまくぐぐらないとひっからないかもしれません。

プラグインなしがいい人もテスト的に使ってみるのはありかもしれません。

Highlight.jsとPrism.jsの公式サイトも一応紹介しておきます。

highlight.js

Prism

highlight.jsとprism.jsはどっちがいいの?

w3cはHighlight.jsなのですね、なるほど。どっちでも気楽に使えるため、しばらく使って見てから決めようと思います。highlight.jsは作者のポリシーにより行番号が表示できません。それって本当にいるの?という感じみたいですから、今後も実装されないでしょう。

私は行番号は別にいらない派なので気になりませんね。

highlight.jsやprism.jsを採用するメリット

メリットとして感じられたものは次のようなことです。

  • 軽くなった。
  • カラフルでかわいいデザインがいい。
  • 改行問題などもちょっとあったため解消。

また、cssやphpだけではなくc++やc#など他の言語も対応していたため採用しました。

javascriptのスクリプト、SHJS、SyntaxHighlighter、Rainbow、Microlight.js、Google Prettyprint

一応、他の選択肢も紹介しておきます、他のスクリプトも検討する方はPrismaticを使う前に検討してもいいかもしれません。

highlight.jsとprism.jsのほか、javascriptのスクリプトは結構でているのですよね!

SHJS、SyntaxHighlighter、Rainbow、Microlight.js、Google Prettyprint…。こちらのサイトが参考になります。

Top 5 : Best code syntax highlighter javascript plugins
See our review from 5 of the best code syntax highlighter plugins for your project.

個別対応のWP Code Highlight.jsやPrism Syntax Highlighterというプラグインもあり

実は個別対応のプラグインがあります。

highlight.jsはWP Code Highlight.jsです。

WP Code Highlight.js
This plugin allow you to use highlight.js to highlight codes on any wordpress page. And you can easily migrate from SynaxHighlight, Google Prettify or …

prism.jsはPrism Syntax Highlighterというプラグインもあります。

Prism Syntax Highlighter
Prism syntax highlighter controller plugin for WordPress.

ただ、サポートフォーラムをみると、開発者さんが以下のようにアナウンスしています。

This plugin is no longer maintained.
This plugin will not receive any updates.

Prismaticの使い方

使い方は簡単です。

General > Libraryで使うライブラリを選びます。

Highlight.jsやPrism.jsなど3種類のライブラリから選択できます。

Highlight.js > Code Escaping > Content > Frontend & Admin Area(もしくはFrontend)

Prism.js > Code Escaping > Content > Frontend & Admin Area(もしくはFrontend)

少なくともコンテンツの設定を変更してください。そうしないとコードがコードとして認識されません。

Prismaticはアンエスケープする必要は!?

preで記述する場合、アンエスケープをすることが一般的ですが、Prismaticは対策用のコードが書かれているのかアンエスケープする必要がないようです。とても楽です。

ソースコードの表示デモ

こちらの記事をみてください。

内部リンクのブログカードを作成(PHP、CSS、HtmlのWordpressのカスタマイズ)
内部リンクのブログカードを作成しました。プラグインなしです。「続きを読む」などのボタンもつけたりアニメーションもかけたりしました。完成デモと実装計画完成デモです。実装計画は次のとおりです。ブロ...

ソースコードの表示方法

コードはコードで囲めばOKです。

<code></code>

ただインデント、改行やスペースをそのまま表示するためにpreが必要になります。そのため下記の形になります。

<pre><code></code></pre>

あと、W3Cの仕様のようですが、クラス名を追加することにより構文をハイライトするプログラムが正しく動作するようです。

つまり最終形態はこれですね。言語の部分は言語にあわせてください。

<pre class=’language-php’><code></code></pre>

language-css
language-php

ちょっと詳細はおいきれていませんが、クラス名は記事の一箇所に書けば大丈夫のようです。

参考になったサイト

参考になりました。ありがとうございます。

ソースコードをハイライトする軽量ライブラリ、Highlight.jsの使い方
ソースコードをハイライトして見やすく表示するには、Highlight.jsが、軽量でバグもなく、お勧めです。
シンタックスハイライトの5システム比較のまとめ・WordPressでも使える
シンタックスハイライト5種の比較検討のまとめ記事。WordPressで使う目的だがプラグインの比較検討ではないのでどのサイトでも導入可能。highlight.js、Google Code Prettify、SyntaxHighlighter。
WordPress 記事にソースコードを埋め込むテクニック&プラグイン紹介 | Game Users 開発ノート
解説系の記事を書いていると、HTML のタグや、JavaScript、スタイルシートなどのソースコードを埋め込んで紹介したくなるときがあります。 この記事ではそんな時に使える、簡単にコードを貼れるタグ、ウェブサービス、おすすめのプラグインを紹介していきます。 簡単にコードを貼れるタグ まずは簡単にコードを貼れるタグを紹...

この記事がご参考になれば幸いです。

コメント

最初から↑
タイトルとURLをコピーしました