prism.jsの使い方(組み込みとWordPressプラグイン)

プログラミング学習

プログラミングをやっているためprism.jsを組み込んでみました。また、WordPressのプラグインも以前、試したので覚書程度の残しておきます。

highlight.jsとprism.jsの比較

個人的に色味などはhighlight.jsの方が好みです。ただprism.jsは対応言語が多いです。またhtmlをエスケープしなくても貼り付けられるプラグインが提供もされています。

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

スポンサーリンク

prism.jsの使い方(組み込み編)

電子書籍で使う機会があったため覚書を残しておきます。個人的にはダウンロードして組み込んでいます。

ダウンロード方法は以下のとおりです。

非圧縮(Minified version)を選択

テーマはDefaultか、Tomorrow Nightかな。
Okaidiaってたぶんよく使われているけど、個人的に好みじゃないんですよね。
ハイライト.jsの方が色は好みが多いけど色ぐらい変えられますよね。

デフォルトのhtml、css、javascriptに加え

C#
Git
Markdown
PHP
TypeScript

を選択しましたが、このあたりは各人によります。

PHP選択すると、Markup templatingが自動で入るっぽい。
Markup templating解除したらPHPが抜けていた。。

Line Highlight(行強調)
Line Numbers(行ナンバー表示)
Unescaped Markup(htmlのエスケープ処理がいらない)
Treeview(階層)

ダウンロードします。その後、VsCodeのアセットに突っ込んでインポートします。

CSSのパスを書くだけでいけるっぽいです。

軽く試しただけなので必要なら後日追記します。

スポンサーリンク

シンタックスハイライトおすすめプラグイン(WordPrsss編)

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.jsどっちがよいのでしょう?— あらゆ (@arayutw) 2016年10月17日

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…。こちらのサイトが参考になります。

個別対応の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は対策用のコードが書かれているのかアンエスケープする必要がないようです。とても楽です。

ソースコードの表示方法

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

<code></code>

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

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

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

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

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

language-css
language-php

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

コメント

タイトルとURLをコピーしました