Google Code-Prettifyについて

らら
らら

はじめに

今回は、メモです・・

最終的には、Google Code-Prettifyからprism.jsにしたって感じです。。

メモ

Google Code-Prettify

https://github.com/googlearchive/code-prettify

下記にようにCDNで呼び出しした場合は、C言語系、Bash等に似ている言語、または、XMLに似ているすべての言語をサポートします。（注）

これはC言語に似ている　C,C++,perlなど、xmlに似ているhtmlなどはオプションjsを使用しなくても使用できます。


<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

CDN先は上記が最新です。cdn.rawgit.comのCDNは現在使えませんでした。

ローカルでrun_prettify.jsを呼びだしてもオプションjsはCDNを見に行くようです。

それ以外は下記 url lang=にて指定できます。


<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=sql&lang=css"></script>

オプションjsで指定できるのは下記のファイルがあり、ファイル名のlang-XXXX.jsのXXXXの部分をlang=XXXXで指定して呼びだします。

複数は、lang=css&lang=sqlで&でつなぎます。フォーマットはCGI引数です。

ここに下記にないphpとかperlとは引数にしても意味がありません。


lang-aea.js
lang-agc.js
lang-apollo.js
lang-basic.js
lang-cbm.js
lang-cl.js
lang-clj.js
lang-css.js
lang-dart.js
lang-el.js
lang-erl.js
lang-erlang.js
lang-ex.js
lang-exs.js
lang-fs.js
lang-go.js
lang-hs.js
lang-kotlin.js
lang-lasso.js
lang-lassoscript.js
lang-latex.js
lang-lgt.js
lang-lisp.js
lang-ll.js
lang-llvm.js
lang-logtalk.js
lang-ls.js
lang-lsp.js
lang-lua.js
lang-matlab.js
lang-ml.js
lang-mumps.js
lang-n.js
lang-nemerle.js
lang-pascal.js
lang-proto.js
lang-r.js
lang-rd.js
lang-rkt.js
lang-rust.js
lang-s.js
lang-scala.js
lang-scm.js
lang-Splus.js
lang-sql.js
lang-ss.js
lang-swift.js
lang-tcl.js
lang-tex.js
lang-vb.js
lang-vbs.js
lang-vhd.js
lang-vhdl.js
lang-wiki.js
lang-xq.js
lang-xquery.js
lang-yaml.js
lang-yml.js

スキンは


<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=スキン名"></script>

下記のスキンがあります。スキンの呼び出しは先頭文字が小文字で指定をします。skin=desert 先頭が大文字の場合反応してくれません。


Default
Desert
Sunburst
Sons-Of-Obsidian
Doxy

呼び出しはpreに下記のクラスをつけることで、自動認識してくれます。


<pre class="prettyprint">

言語を指定する場合は、下記になります。オプションjsを使用する場合は、上記のlang=引数で呼び出ししておかないと使用できないので注意が必要です。


<pre class="prettyprint lang-sql">

標準で内蔵されている言語は下記となります。（注）

言語指定する場合は、preタグにclassにlang-XXXを指定する。　XXXは下記を用途にあわせて設定


"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
"js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml","xsl"

自動認識させない場合は、下記を指定します。


<pre class="prettyprint lang-bsh">

問題点

ぐぐるとlang-noneって記述もあって、本家にはなく、これは現在のバージョンは動作しない。

なので、色付けしたくない場合、指定ができない。ただのテキストでも色付けされてしまう場合がある。

また、オプションjsで&lang=cssを指定すると、テキストの誤色付けが多くなってしまって、テキストが見づらくなった・・・

オプションjsでCSS指定しなくても、ある程度は色付けされるが"値のみ"なのでオプションjsすると誤認識度が高まるよう・・

lang-css.jsを見ると正規表現でおこなっていて、CSSの単語を認識しているわけでないのでこのあたりが、誤認識される感じかと・・

なので、prism.jsに切り替えることにした。

lang-noneも使えて、CSSもいい感じで色付けされた。軽量タイプは、そのあたりの割り切りが必要かと・・・

prism.jsインストール

下記サイトでdownloadを押します。

https://prismjs.com/

download画面で、お好みの設定にチェックしておきます。

https://prismjs.com/download.html

LanguagesでSelect/unselect allすべてにするとjs cssがおもたくなるので注意しましょう。

prismjs

prismjs

注意）言語をあたらに増やす場合は、再度、js,cssの作り直しが必要です。

以前のダウンロードオプションは、前回ダウンロードした、css or jsの先頭にURLがコメントされているので、そのURLでアクセスすることで以前の設定が反映されます。

Google Code-Prettifyより、言語は多いです。

使用方法

ダウンロードした、JS　CSSを呼び出します。


<link rel="stylesheet" href="prism.css">
<script src="prism.js" defer></script>

ソースコードを表示するには


<pre><code class="language-言語名">
ソースコード...
</code></pre>

番号つけは


<pre class="line-numbers"><code class="language-言語名">
ソースコード...
</code></pre>

プラグイン一覧

Line Highlight 指定行をハイライトすることができます。
Line Numbers kuba-kubula 行番号を表示します。
Show Invisibles タブ、スペース、改行などをわかりやすく表示します。
Autolinker URLやメールアドレスを自動でリンク可能にします。
WebPlatform Docs WebPlattform Docs にリンク可能にします、
Custom Class dvkndn クラスをカスタマイズできます。
File Highlight 外部ファイルから、コード表示できるようになります。
Show Language nauzilus 指定した言語をツールバーに表示します。
JSONP Highlight nauzilus JSONPで表示する言語を取得してコード表示できるようになります。
Highlight Keywords vkbansal ソース中のキーワードを指定して独自の色分けができるようになります。
Remove initial line feed Golmote ソース中に初めに改行がある場合、自動で削除されます。
Inline color RunDevelopment CSSなどのソースコード中にカラーコードがあった場合、その色を表示させることができます。
Previewers Golmote ソースコードの内容をプレビューできるようになります。
Autoloader Golmote 指定のコードがローカルにない場合、自動でロードされます。
Keep Markup Golmote ソースコードがHTMLの場合ソースが保持されます。
Command Line chriswells コマンドプロンプトの表示内容を表示させる場合、先頭にコマンドプロンプトの表示(C:\)を追加できます。
Unescaped Markup HTMLソースをエンコードしなくても使用できるようになります。
Normalize Whitespace zeitgeist ソース中の不要な空白は削除されます。
Data-URI Highlight Golmote Data-URIを強調表示します。
Toolbar mAAdhaTTah ツールバーを付けることができます。コピー、ダウンロード機能を付ける場合必要です。
Copy to Clipboard Button mAAdhaTTah ツールバーにクリッブボードのコピーボタンが付きます。
Download Button Golmote ツールバーにダウンロードボタンが付きます。
Match braces RunDevelopment 括弧の始まり、終わりを一致するもので色分けされます。
Diff Highlight RunDevelopment よくわかりません。
Filter highlightAll RunDevelopment オリジナルの条件で表示できます。
Treeview Golmote ファイルツリーなどの構造をわかりやすく表示できます。

prismjsでは1ページごとでテーマを変えるには、それ毎のjs cssをダウンロードして下記のように配置します。


prism +
      +-- Coy+
             +-prism.css
             +-prism.js
      +-- Dark
             +-prism.css
             +-prism.js

jsで下記のようにします。


	var codetheme = "Dark";
	var el = document.createElement('script');
	el.src = "./prism/"+codetheme+"/prism.js";
	el.type =  "text/javascript";
	// HEAD要素の最後に追加
	document.getElementsByTagName('head')[0].appendChild(el);
	el = document.createElement('link');
	el.href = "./prism/"+codetheme+"/prism.css";
	el.rel =  "stylesheet";
	// HEAD要素の最後に追加
	document.getElementsByTagName('head')[0]

Google Code-Prettifyのテーマ替えは下記で


	var codetheme ="desert";
	var el = document.createElement('script');
	el.src = "https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?&skin="+codetheme;
	el.type =  "text/javascript";
	// HEAD要素の最後に追加
//	document.getElementsByTagName('head')[0].appendChild(el);
	var s = document.getElementsByTagName( 'head' )[ 0 ];
	s.parentNode.insertBefore( el, s );

さいごに

prism.jsに変えて、コピーボタンできたのでよかったです。。ダウンロードボタンはためしてないです・・

関連記事