シンプルなシンタックスハイライト「google-code-prettify」
こんにちはWebデザイナーのあさみです。
今回は以前、覚書した
ブログ内でコードの表示を綺麗に表示してくれる「Syntaxhighlighter」
よりシンプルで見やすく、コードが少ないので採用した
「google-code-prettify」のご紹介です。
と言うのも、「Syntaxhighlighter」ではちょくちょく不具合が(・・;)
私の環境では、他のJQueryやプラグインの関係で競合してしまいERRORが連発する事が何度かありました。
そこで、Google先生と相談して私の環境に合うものを見つけた次第です。
まずは本家
「google-code-prettify」
https://code.google.com/archive/p/google-code-prettify/
SyntaxHightlighterでjs や css 等をダウンロードしてごにょごにょするのはめんどくさい！
という方は Google が公式サイトで使っている google-code-prettify をオススメします。
ごにょごにょするのが嫌な方はコチラを使ってみてはいかがでしょうか？
通常ならファイルをアップロードするんですが、私は大好きなCDNを使用することにしました。
cdnjs - the missing cdn
※私はココで欲しいJQueryがないか探しています。
<head>内でprettify.jsを読み込みます。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
bodyの読み込み完了のタイミングでprettyPrint()を呼び出します。
<body onload="prettyPrint()">
ハイライトしたい<pre>ブロックに「prettyprint」クラスを指定
<pre class="prettyprint">source code here</pre>ただし、<pre>は「<」、「>」、「&」などを特殊文字として認識してしまうために置き換えを行うことが必要でした。
似たような働きを持つタグ<plaintext>があります。
<plaintext>ではそのまま表示されます。
<xmp>はHTMLの初期の仕様にあった要素で、対応していないブラウザが多いため現在では<pre>が推奨されています。
HTML5では、<xmp>は廃止される予定です。
<pre>や<code>に置き換えることが推奨されていますが、
bootstrapなどを使用して制作していた場合<pre>はコードが表示されないなどの問題が発生します。
私のようにDreamweaverを使用して制作すると間違いなくこの問題に直面します。
また、seesaaブログなどの無料ブログを使用していると同じく表示されない等のエラーが発生するようです。
そのような際にgoogle-code-prettifyの開発者様は<xmp>の使用をオススメしているようです。
実際に<plaintext>を使用してみましたがこちらではただコードがそのまま表示されるだけでprettifyの恩恵は受けられませんでした。
なので、当ブログは
<XMP class="prettyprint">source code here</XMP>を使用しています。
他にも行番号を表示したりハイライトのカラーリングをカスタマイズできます。
詳細は参考記事を御覧くださいm(_ _)m
ハイライトのカラーリングをカスタマイズする際はデフォルトのCSSと一緒に記載して下さい。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>※サーバーにアップロードする必要があります。
一つ問題があります。
「改行を<br/>タグに変換する」に設定は出来ません。
<xmp>内で改行すると<br/>が表示されるので
<br/>タグを手打ちする必要があります。
面倒ですが、手打ちしてください^^;
何か方法が見つかればまたお知らせします♪
それでは、また(^_^)/~