はじめに
今回は、メモです・・
最終的には、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がおもたくなるので注意しましょう。
注意）言語をあたらに増やす場合は、再度、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に変えて、コピーボタンできたのでよかったです。。ダウンロードボタンはためしてないです・・
