ホーム / Bloggerカスタマイズ /

Blogger.comにPrism.jsをCDNで導入する

2020-07-06

Bloggerカスタマイズ

t f B! P L
SyntaxHighlighterを使ってきました(linuxBean14.04(113)SyntaxHighlighter v４のビルド-p--q)がもう更新もされておらず、ビルドもできないので今後はPrism.jsを使うことにします。ブログ大改造予定なのでとりあえずCDNで導入することにします。

テーマの選択



PrismのTHEMEからテーマを選択するとExamplesの部分がそのテーマになります。

テーマはDEFAULTにすることにしました。

 プラグイン一覧


Prism.jsではプラグインで機能を追加できます。

Pluginsにプラグイン一覧があり、プラグイン名をクリックするとプラグインの実行例が確認できます。


Line highlight ▲ Prism plugins
指定行をハイライトする。

Line Numbers ▲ Prism plugins
行番号の表示。

 Show Invisibles ▲ Prism plugins
タブや改行文字などの表示。

 Autolinker ▲ Prism plugins
URLやEmailのリンクを有効にする。

 WebPlatform Docs ▲ Prism plugins
HTMLのタグやCSSについて解説のページへのリンクをつける。

 Custom Class ▲ Prism plugins
 Prism.jsで作成されるHTMLのクラス名をカスタマイズする。

File Highlight ▲ Prism plugins
ファイルからコードを取得して表示する。

Show Language ▲ Prism plugins
右隅にシンタックスハイライトしている言語名を表示する。

JSONP Highlight ▲ Prism plugins
JSONPで取得したコードを表示する。

Highlight Keywords ▲ Prism plugins
ハイライトするキーワードを追加する。

 Remove initial line feed ▲ Prism plugins
廃止予定。

Inline color ▲ Prism plugins
スタイルシートで定義している色のプレビューを表示。

Previewers ▲ Prism plugins
angle, color, gradient, easing, timeについてツールチップでプレビューさせる。

Autoloader ▲ Prism plugins
ハイライトする言語を自動的にロードする。

Keep markup ▲ Prism plugins
コード内でmarkタグを有効にする。

Command Line ▲ Prism plugins
コマンドラインのプロンプトを行頭に表示させる。

Unescaped markup ▲ Prism plugins
コード内でHTMLエンティティにエスケープしなくてもよいようにする。

 Normalize Whitespace ▲ Prism plugins
空白やタブの削除など。

 Data-URI Highlight ▲ Prism plugins
data-URIをハイライトする。

Toolbar ▲ Prism plugins
ツールボタンを追加する。Copy to Clipboard、Download Button、Show Languageにはこれが必要です。

Copy to Clipboard ▲ Prism plugins
コピーボタンを追加する。

 Download Button ▲ Prism plugins
ダウンロードボタンを追加する。

 Match braces ▲ Prism plugins
マウスオーバーで対応する括弧をハイライトする。

Diff Highlight ▲ Prism plugins
language-diff内でシンタックスハイライトを有効にする。

Filter highlightAll ▲ Prism plugins
highlightAllやhighlightAllUnderでハイライトするときにフィルタリングする。

Treeview ▲ Prism plugins
language-treeviewでツリービューを表示。

Golmote/prism-treeview: Treeview language definition for Prismにソースの例があります。

 プラグインを選択する


Line highlight　指定行をハイライトする。
Line Numbers　行番号の表示。
Show Language　言語名を表示する。
Copy to Clipboard　コピーボタンを追加する。
Toolbar　ツールバーを追加する。Show Language、Copy to Clipboard、Download Buttonのプラグインの導入に必要。
Autoloader　言語のオートロード。CDNで利用する場合に推奨(Usage with CDNs)。

これらのプラグインを導入することにします。

CDNからスクリプトのURLを取得する


Usage with CDNs

CDNでprism.jsを使うには次のファイルを取得する例が書いてあります。

themes/prism.css
components/prism-core.min.js
plugins/autoloader/prism-autoloader.min.js

取得ファイルをまとめる機能があるのでCDNはjsDelivr - A free, fast, and reliable CDN for open sourceを使うことにします。

【jQuery】CDNならこのサイトが超便利！jsDelivrの使い方 | WEBDESIGNDAY

jsDelivrの使い方はこのページを参考にしました。

 jsDelivrからURLを取得する


prismjs CDN by jsDelivr - A CDN for npm and GitHub


componentsをクリック。

Show allをクリック。

prism-core.min.jsを選択。


元のフォルダに戻って今度はthemesをクリック。


ここではテーマを選択します。

今回はデフォルトテーマを使うのでprism.cssを選択します。

 導入するプラグインの選択


これが結構手間取りました。

プラグインを単純に選択するだけだと、エラーがいくつかでました。

重要なことはプラグインの読みこむ順番です。

まず元のフォルダに戻って今度はpluginsをクリックします。

 導入したいプラグイン名をクリックして中にあるmin.jsファイルを選択します。

プラグインによってはcssファイルもありそれも選択します。

  Show Languageプラグイン、Copy to Clipboardプラグイン、Download Buttonプラグインを使うときはその前にToolbarプラグインをロードしないといけませんので、まずはToolbarプラグインを選択してから、これらのプラグインを選択するようにしないといけません。

またAutoloaderプラグインは自身のURLを利用して言語ファイルをロードするので、combineモードで呼び出すときは一番最後に呼び出すようにします。

しかしその場合combineした他のプラグインもすべて再度読み込むことになります。

さらには複数の言語をロードしないといけないときは、一番最後にロードした言語にしかシンタックスハイライトが適用されませんでした。

そのためAutoloaderプラグインだけはcombineせずにロードすることにしました。

ファイル名が長いときは拡張子が見えずどのファイルがcssかmin.jsなのかjsなのかわからないので、Copy to ClipboardボタンをクリックしてCopy URLでエディタなどにペーストしてファイル名を確認しないといけませんでした。

11ファイルを選択しました。

左のアイコンをドラッグすると順番が変更できます。

SHOW&CONFIGURE ALL LINKSをクリック。

HTML outputを有効にしてHTMLを取得できるようにします。

 Auto-optimizationを有効にしてすべて圧縮形式で取得するようにします。

 Version aliasingを有効にしてマイナーバージョンアップは自動更新にします。

JavaScriptの一番上の行にあるCopy to ClipboardボタンをクリックするとcombineモードでのHTMLが取得できます。
<script src="https://cdn.jsdelivr.net/combine/npm/prismjs@1/components/prism-core.min.js,npm/prismjs@1/plugins/toolbar/prism-toolbar.min.js,npm/prismjs@1/plugins/show-language/prism-show-language.min.js,npm/prismjs@1/plugins/line-numbers/prism-line-numbers.min.js,npm/prismjs@1/plugins/line-highlight/prism-line-highlight.min.js,npm/prismjs@1/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js"></script>
先程述べたようにAutoloaderプラグインはcombineで読み込まないほうが良いのでnpm/prismjs@1/plugins/autoloader/prism-autoloader.min.jsは消去して、AutoloaderプラグインのURLだけ別に取得するようにしてあります。

同様にしてCSSの1行目のCopy to Clipboardボタンをクリックします。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/prismjs@1/themes/prism.min.css,npm/prismjs@1/plugins/toolbar/prism-toolbar.min.css,npm/prismjs@1/plugins/line-numbers/prism-line-numbers.min.css,npm/prismjs@1/plugins/line-highlight/prism-line-highlight.min.css"/>
このままBloggerテンプレートに貼り付けると</link>が無いと言われるので最後の>を/>に変えてあります。

BloggerのテンプレートにCDNへのリンクを貼り付ける


Bloggerのダッシュボードで、テーマ ー＞HTMLの編集。


</head>の上に取得したlinkタグを貼り付けました。


 scriptタグは</body>の上に貼り付けました。

 テーマを保存して、ブログを表示させてウェブブラウザのコンソールでエラーがでていないことを確認しておきます。

Prism.js用の投稿テンプレートを追加する


毎回コード貼り付け用のタグを書くのは面倒なので投稿テンプレートに貼り付けておきます。

 Bloggerのダッシュボードで、設定 ー＞投稿、コメント、共有。

投稿テンプレートは次のように5つのパターンを書き込んでおきました。
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<pre class="line-numbers" data-start="1" style="white-space: pre-wrap;"><code class="language-shell-session">// 行番号あり改行あり</code></pre>
<br />
<pre class="line-numbers" data-line="1" data-start="1" style="white-space: pre-wrap;"><code class="language-shell-session">// 行番号あり改行あり行ハイライトあり</code></pre>
<br />
<pre class="line-numbers" data-start="1"><code class="language-shell-session">// 行番号あり改行なし</code></pre>
<br />
<pre><code class="language-shell-session">// 行番号なし</code></pre>
<br />
<code class="language-shell-session">//インライン</code>

このブログではPythonをよく扱うのでデフォルト言語はPythonにしようかと思いましたが、書き換えるのが一番面倒なshell-sessionにしました。

サポート言語一覧はSupported languagesにあります。

 設定を保存。

 これで新規投稿画面ででてくる「// ココにソースを記述」の上にハイライトしたいコードをプレインテキストでペーストすればHTMLエンティティにエスケープする手間が省けます(2020.10.19追記。Bloggerエディタの仕様が変更になってこの方法はうまくいかなくなりました。HTMLモードにして貼り付けるしかありません。貼り付けるときはFree Online HTML Escape / Unescape Tool - FreeFormatter.comのようにHTMLの特殊文字をエスケープする必要があります)。

上記の5つのパターンはHTMLでやってみると次のようになります

行番号あり改行あり
<script src="https://cdn.jsdelivr.net/combine/npm/prismjs@1/components/prism-core.min.js,npm/prismjs@1/plugins/toolbar/prism-toolbar.min.js,npm/prismjs@1/plugins/show-language/prism-show-language.min.js,npm/prismjs@1/plugins/line-numbers/prism-line-numbers.min.js,npm/prismjs@1/plugins/line-highlight/prism-line-highlight.min.js,npm/prismjs@1/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js"></script>
行番号あり改行あり行ハイライトあり
<script src="https://cdn.jsdelivr.net/combine/npm/prismjs@1/components/prism-core.min.js,npm/prismjs@1/plugins/toolbar/prism-toolbar.min.js,npm/prismjs@1/plugins/show-language/prism-show-language.min.js,npm/prismjs@1/plugins/line-numbers/prism-line-numbers.min.js,npm/prismjs@1/plugins/line-highlight/prism-line-highlight.min.js,npm/prismjs@1/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js"></script>
行番号あり改行なし
<script src="https://cdn.jsdelivr.net/combine/npm/prismjs@1/components/prism-core.min.js,npm/prismjs@1/plugins/toolbar/prism-toolbar.min.js,npm/prismjs@1/plugins/show-language/prism-show-language.min.js,npm/prismjs@1/plugins/line-numbers/prism-line-numbers.min.js,npm/prismjs@1/plugins/line-highlight/prism-line-highlight.min.js,npm/prismjs@1/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js"></script>
行番号なし
<script src="https://cdn.jsdelivr.net/combine/npm/prismjs@1/components/prism-core.min.js,npm/prismjs@1/plugins/toolbar/prism-toolbar.min.js,npm/prismjs@1/plugins/show-language/prism-show-language.min.js,npm/prismjs@1/plugins/line-numbers/prism-line-numbers.min.js,npm/prismjs@1/plugins/line-highlight/prism-line-highlight.min.js,npm/prismjs@1/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js"></script>
インライン
<script src="https://cdn.jsdelivr.net/combine/npm/prismjs@1/components/prism-core.min.js,npm/prismjs@1/plugins/toolbar/prism-toolbar.min.js,npm/prismjs@1/plugins/show-language/prism-show-language.min.js,npm/prismjs@1/plugins/line-numbers/prism-line-numbers.min.js,npm/prismjs@1/plugins/line-highlight/prism-line-highlight.min.js,npm/prismjs@1/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js"></script>

「行番号なし改行あり」はいまのところやり方はわかりません。

インラインの場合以外は背景色があるところにマウスカーソルをいれると右上に言語とCopyボタンが表示されます。

プレビュー画面でもシンタックスハイライトされますが、ツールバーは表示されません。

 Pythonのときの行頭のスペースを4倍にする


Bloggerの投稿でタブを保存するとタブがスペース1個に置換されてしまいます。

なので、行頭のスペースを4倍に置換するスクリプトを設置します。

Blogger:SyntaxHighlighterにコピペしたタブインデントをスペースインデントに置換する-p--qと同じことをPrism.jsの場合でもやります。 
<script>
  document.addEventListener("DOMContentLoaded", event => 
        document.querySelectorAll("code.language-py").forEach(e => 
            e.textContent = e.textContent.split("\n").map(s => s.replace(/^ +/, m => m.repeat(4))).join("\n")
      )
  );
</script>
Prism.jsはDOMContentLoadedの時点ではまだ修飾されていないので、textContentで文字列を取得して、またtextContentで元のノードに戻しています。

最初は修飾されてから置換することを考えていたので、window.onloadで置換していましたが、やはり表示が遅くなるのでやめました。

次のコードは採用しませんでしたが、Prism.jsの修飾タイミングがDOMContentLoadedでは合わないときはこれを使うことになりそうです。 
<script>
window.onload = () =>
    document.querySelectorAll("code.language-py").forEach(e =>
        e.childNodes.forEach(n => {
             if (n.nodeType == Node.TEXT_NODE) {
                n.data = n.data.replace(/(?<=\n) +/, m => m.repeat(4))
             }
        })
);
</script>

ブログ検索 by Blogger

Translate

最近のコメント

読込中...

全記事

Created by Calendar Gadget

QooQ