シンタックスハイライトの覚書です。
プログラミングをやっているためPrism.jsを組み込んでみました。
また、WordPressのプラグインも以前、試したので覚書程度の残しておきます。
Prism.js vs Highlight.jsの比較！シンタックスハイライトはどっち!?
個人的に色味などはhighlight.jsの方が好みです。実際、カラバリも豊富です。ただprism.jsは対応言語が多く軽量っぽいです。
Highlight.jsとPrism.jsの公式サイトも一応紹介しておきます。
個人的に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の使い方自体はこちらの記事をみてください。
任意のハイライトを適用したい場合はダウンロードして手間がかかります。
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を元に戻す手順は簡単です。それ用のツールがでています。
その後、不要なコードを引き算していきます。
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の両方を使えるプラグインです。
ダウンロード数は多くはありませんが、結構、評判がよいプラグインを多数開発している作者さんです。日本語で紹介しているサイトがありませんし(今紹介した)。うまくぐぐらないとひっからないかもしれません。
プラグインなしがいい人もテスト的に使ってみるのはありかもしれません。
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です。
prism.jsはPrism Syntax Highlighterというプラグインもあります。
ただ、サポートフォーラムをみると、開発者さんが以下のようにアナウンスしています。
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
ちょっと詳細はおいきれていませんが、クラス名は記事の一箇所に書けば大丈夫のようです。
コメント