秘伝のソースではありません。
- ソースコードをきれいに表示したい！
- 「見たままモード」で編集したいのよ
- お約束の注意事項
- 先人の記事を発見
- まずは導入するコードを組み立てる
- はてなブログに設定していく
- 定型文を準備して手間を減らす
- 実際に編集してみる
- まとめ
ソースコードをきれいに表示したい！
ここまで２回カスタマイズ方法を書いてきました。
いずれもブログの印象に影響するデザインまわりだった。
今回はこれらの説明をしていく中でぶち当たった「CSSのソースコードをそれなりにちゃんと表示したい」という問題を解決するまでの流れ的なもの。
「見たままモード」で編集したいのよ
はてなブログにはいくつかブログ編集方式がある。
そのうちの「はてな記法」と「markdown記法」なら最初からソースコードを表示するための仕組みがある。
でもぼくが使っているのは「見たまま」モードなのです。
視覚的に分かりやすく編集できるし、コンテンツ以外の記入が不要なので編集しやすいし、細かくいじくりたいときはHTML使えるしで自分向き。
一応そのままでもHTML編集でPREタグとCODEタグを使って書くことはできる。
<pre><code>.entry-content .twitter-tweet {
border-radius: 12px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
}</code></pre>こんな↓感じの表示になるのでCSSを調整すれば一応それなりにはなるはず。
でもこれじゃ良く見るアレとか他の記法のヤツとかと比べてカッコワルイ。
カッコワルイヨクナイ。
検索すると「他の記法でHTML作成してから見たままモードのHTML編集で貼り付ける」という方法もあるようだけど、手順覚えてないといけないからめんどくなってやらなくなるなと。
他に手がないか検索してみた。
お約束の注意事項
この先はWeb開発についての知識やブログをカスタマイズする知識がそれなりに必要です。
今回は外部ライブラリを導入するために設定周りもいじくるので、そのあたり怖い！という方は諦めてください。
とはいえソースコードを貼りたい欲のある人はこっち側の人だと思うので、手順さえ分かればなんとかなる系が多いのではと思ってます。
先人の記事を発見
色々と調べていくうちにシンタックスハイライトするライブラリを入れる方法があると分かる。
早速入れてみようと思ったが昔良く使ってた SyntaxHighlighter.js は7年前に更新が止まってた。
確かGoogleのがあったなと見てみたら4年前に更新が止まってた。
OSSはDeveloperの善意で成り立っているものなので、更新されていないことを恨むつもりはない。
最近こんな話もあったし。
とはいえ、日進月歩どころか秒進分歩とすら言われる我がIT業界の根底を支えるプログラムコード、その表示を更新が止まった古いライブラリで対応させるのは申し訳ない。
そこで現在アクティブなのを探したところ、Prism.js を発見。
インストールはできないのでCDN使う方法を検索したところ、ブログサービスは違うものの適用したという記事を発見！
まさにこれ！
こちらの記事を参照し、はてなブログ版 Prism.js 導入を行うことに。
まずは導入するコードを組み立てる
ここから先の説明は元記事の説明をかなり省略した版なので、細かい手順や操作意図等を知りたい方は元記事を参照してください。
CDNは元記事と同じく jsDelivr を使用。
まずは Prism.js のページに行く。
「Files」をクリックするとファイル選択モードになる。
このUIで必要なファイルを選択する。
コアファイル（components/prism-core）とデフォルトテーマ（themes/prism）の他、プラグインとして、行番号表示（prism-line-numbers）と行ハイライト（prism-line-highlight）、ツールバー（prism-toolbar）に言語表示（-show-language）とコピーボタン（prism-copy-to-clipboard）、CDN利用なので言語オートローダー（prism-autoloader）を選択。
- prismjs/components/prism-core.min.js
- prismjs/themes/prism.css
- prismjs/plugins/toolbar/prism-toolbar.min.js
- prismjs/plugins/toolbar/prism-toolbar.min.css
- prismjs/plugins/show-language/prism-show-language.min.js
- prismjs/plugins/line-numbers/prism-line-numbers.min.css
- prismjs/plugins/line-numbers/prism-line-numbers.min.js
- prismjs/plugins/line-highlight/prism-line-highlight.min.css
- prismjs/plugins/line-highlight/prism-line-highlight.min.js
- prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js
- prismjs/plugins/autoloader/prism-autoloader.min.js
prism-toolbar は他のツールバーを使うプラグインよりも先にロードする必要があるようなので注意。
この後の作業の都合上「prism-autoloader」は一番最後になるようにすること。
その他必要なのがあったら選んでおく。
必要なプラグインを選択したら「Show & Configure all links」ボタンを押す。
取得するコードを選択する画面になる。
はてなブログにはHTMLとして埋め込む必要があるので、「HTML output」ボタンを押してHTMLが含められるようにする。
シンタックスハイライトならメジャーバージョン内で大きな変化はないでしょうということで「Version aliasing」ボタンを押して最新のマイナーバージョンが適用されるようにする。
これでコードの準備は整った。
はてなブログに設定していく
まずはCSSをコピー。
先頭の赤字のがすべてのCSSをまとめたやつなので、それの右端にあるコピーボタンを押せばOK。
別タブではてなブログの設定ページを表示し、詳細設定を選択。
項目「<head>要素にメタデータを追加」にコピーしたlinkタグを貼り付け。
既に他のタグがある場合は上書きしないように注意。このブログの場合は既にWebフォントのタグがいくつかあったので、その下に追記。
ページ最下部の「変更する」ボタンを押して確定。
jsDelivrに戻り、今度は JavaScript の先頭にあるまとまったやつをコピーして、一旦メモ帳などに貼り付ける。
元記事によるとオートローダーは別に読み込ませた方が良いそうなので、その箇所を削除。
↓
jsDelivrで JavaScript からオートローダー単独のをコピー。
先のスクリプトの次行に貼り付けたら全体をコピー。
はてなブログでテーマのカスタマイズに進みフッタに追記する。既存の上書き注意。
「変更を保存する」ボタンを押して確定。
これで Prism.js の導入は完了。
定型文を準備して手間を減らす
Prism.js の記法はざっくりこんな感じ。
<pre class="line-numbers"><code class="language-css">.entry-title,
#content,
.hatena-module-title {
font-family: 'Kosugi Maru', sans-serif !important;
}</code></pre>記入量はそんなにないんで毎回HTML編集で書いてもいいんですが Prism.js 独自の記法を覚えておくのも面倒なので、定型文を利用してテンプレート化することに。
CSS用の定型文。
HTML用の定型文
これらを登録。
これですべての準備が完了。
他の記法を使いたい場合は必要分登録しておくと楽かも。
実際に編集してみる
見たまま編集でコードを貼りたいところに定型文を貼り付け、■と■の間にソースコードをコピペする。
↑を表示した結果がこれ↓
■<html>
<head>
<title>ぼくのホムペにようこそ！</title>
<head>
<body>
<h1>ごめんなさい工事中でっす！</h1>
</body>
</html>■あれ？予想と違う。
1行になっていて改行が反映されていない。
HTML編集で見るとこうなっている。
そのままで書けない「<」「>」「"」などは実体参照になっているものの、改行までHTML化されていたのが原因。
PREタグの中なのでそのまま改行でいいのだが！
何か改善する方法がないか探してみたものの分からず。
仕方ないのでHTMLエンコードしたソースコードを貼り付けることで手間を最小化する方向で手順を考えてみた。
- 貼り付けたいソースコードをHTMLエンコードする
- 改行はそのままでBRタグにしない
- HTMLエンコードはテキストエディタの拡張機能やWebサイト等で可能（ぼくは秀丸エディタのHTMLエンコード変換モジュールを使用）
- 定型文を貼り付けたらHTML編集にして■と■の間にHTMLエンコードしたソースコードを貼り付け■を削除
- プレビューで確認
この手順に沿ってHTMLエンコードしたソースコードをHTML編集で貼り付けてみた。
↑を表示した結果がこれ↓
<html>
<head>
<title>ぼくのホムペにようこそ！</title>
<head>
<body>
<h1>ごめんなさい工事中でっす！</h1>
</body>
</html>ちゃんと表示された！
とりあえずこれで良しとする。
補足
プラグインの「unescaped-markup」を使うとHTMLエンコード無しで記述できるようになる。
見たままモードでのコードの見え方が変わるので思案中。
やっぱりこれがいいかなと思ったら別記事で書きます。
まとめ
見たまま編集のみでもソースコードを貼ってそれなりに見せられるようになった。
当初の想定ではHTML編集せずに完結させたかったのだけど、貼り付けの仕様は乗り越えられないようなので仕方なし。
他の記法から持ってくるよりは楽だからまあいいかなということで。
今回の記事はこれらの条件が全て揃ったので書くことができました。
- はてなブログの柔軟なカスタマイズ設定
- Prism.js と関連OSSをメンテナンスしているDeveloperの皆様
- CDNを提供してくれている jsDelivr
- 検証してまとめて記事化してくださった先人達
皆様ありがとうございます！
「このブログのデザインをカスタマイズしてみた件」まとめはこちら。
