MENU
  1. ホーム
  2. javascript
  3. 使い方!Prism.js vs Highlight.js(Vivliostyle電子書籍/WordPress)

使い方!Prism.js vs Highlight.js(Vivliostyle電子書籍/WordPress)

javascript

シンタックスハイライトの覚書です。

プログラミングをやっているためPrism.jsを組み込んでみました。

また、WordPressのプラグインも以前、試したので覚書程度の残しておきます。

エックスサーバーのお友達紹介プログラム!

Prism.js vs Highlight.jsの比較！シンタックスハイライトはどっち!?

個人的に色味などはhighlight.jsの方が好みです。実際、カラバリも豊富です。ただprism.jsは対応言語が多く軽量っぽいです。

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

あわせて読みたい
highlight.js The Internet’s favorite JavaScript syntax highlighter supporting Node.js and the web.
あわせて読みたい
Prism

個人的にPrism.jsだとうまくいくのに、Highlight.jsでハイライトが適用できないという症状に悩まされたことがあります。よって、Prism.jsでHighlight.jsのようなカスタムスタイル.cssを作ればいいのではないかという気がしました。

スポンサーリンク

Prism.jsとHighlight.jsの組み込み方・使い方(Vivliostyle電子書籍編)

Prism.jsとHighlight.jsの組み込み方の種類

各々のメリットとデメリットは簡単に記載するとこんな感じです。

  • CDN：URLを張り付ければいいだけだけど、デメリットはテーマが固定されるっぽい。好きなカラーにできない
  • ダウンロード：Highlight.jsとPrism.jsともに、好きなテーマを見繕える
  • npm install：容量的にはそれほど多くないけどたぶん全部入ってしまう(未検証)

デフォルトのものでよければ、VivliostyleのCSSからインポートだけすればいけるようです。

@import 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism.min.css';

Vivliostyleの使い方自体はこちらの記事をみてください。

ebookbrain
CSS組版VivliostyleはMarkdownでPDF変換におすすめ!?【VSCode】 電子書籍作成のために、PDFとePUBが作成できるvivliostyleの覚書です。現在は簡単に導入できます。 技術同人誌のまとめ記事はこちらです。 CSS組版Vivliostyleのおすすめ本…

任意のハイライトを適用したい場合はダウンロードして手間がかかります。

prism.jsのダウンロード

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

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

縮小バージョン(Minified version)を選択

テーマはDefaultか、Tomorrow Nightかな。Okaidiaってたぶんよく使われているけど、個人的に好みじゃないんですよね。ただ、カスタマイズするのが１番ですね。

ハイライト.jsの方が色は好みが多いけど色ぐらい変えられますよね。

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

  • C
  • C#
  • C++
  • Git
  • Markdown
  • PHP
  • TypeScript
  • Python
  • lua

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

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

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

ダウンロードします。行番号などなく色だけ付けたいのなら、CSSファイルのみでよさそうです。その後、VsCodeのアセットに突っ込んでインポートします。

CSSだけの場合、パスを書くだけでいけます。

prism.jsのカスタマイズ!自作する

公式サイトからダウンロードし、圧縮されているCSSを元に戻す手順は簡単です。それ用のツールがでています。

あわせて読みたい
圧縮したHTML・CSS・JavaScriptを元に戻すツール他!Webデザインおすすめツール! ちょっと便利だと思ったデザインツールのまとめです。 CSSのデザインツール border radius 4箇所 https://9elements.github.io/fancy-border-radius/ 8箇所 https://9el…

その後、不要なコードを引き算していきます。

pre[class*=language-] {
	/* border-radius: .5em;
	border: .3em solid #545454; */
	box-shadow: 1px 1px .5em #000 inset;
	margin: .5em 0;
	overflow: auto;
	padding: 1em
}
スポンサーリンク

Prism.jsとHighlight.jsの使い方(WordPrsssプラグイン編)

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

prism.jsはhtmlをエスケープしなくても貼り付けられるプラグインが提供もされています。

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の両方を使えるプラグインです。

WordPress.org
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です。

WordPress.org 日本語
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というプラグインもあります。

WordPress.org 日本語
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

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

スポンサーリンク
javascript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする