コードをWeb上で表示するときのコードハイライターって言うんですか？
10年以上も使っていたSyntaxHighlighterから
Prism.jsに変更しました。
覚書とWordPressで楽に書くためのカスタマイズです。
使用準備
Prism.jsダウンロード
- Prism.jsより[DOWNLOAD]ボタンを押してダウンロードページへ
- オプション類を選択
- Themeを選ぶ
- VersionはMinified versionで充分
- 言語を選ぶ
- プラグインを選ぶ
下のページの下の方に日本語でプラグインの解説があるのがわかりやすいです。
Google Code-Prettifyについて ← 題名と中身が合っていないけど…
- ページ下の方にある[DOWNLOAD JS] [DOWNLOAD CSS]両方ともクリックしダウンロード
カスタマイズされたprism.js, prism.cssがダウンロードされる - オプション類を変更したい場合は、
prism.jsの上方に書いてあるURLからアクセスすると
現状の状態が反映されているのでそこから加えて再ダウンロード。
js, cssファイルを上書きする
ファイルの編集
- サイトの適当な場所にprism.js, prism.cssを入れる(アップロードする)
- HTMLのheadタグ内に以下を入力
prism.cssの場所に合わせて適宜変更のこと
WordPressの場合は多分header.php
<link href="prism.css" rel="stylesheet">- HTMLのbodyタグ内の一番下に以下を入力
prism.jsの場所に合わせて適宜変更のこと
WordPressの場合は多分footer.php
<script src="prism.js"></script>使用方法
bodyタグ内に以下のようにpreとcodeタグに入れて記入
codeタグの中はできたらHTMLエンコード(&→&)を
例はCSSの場合
WordPressのブロックエディターの場合「カスタム HTML」ブロック内に入力
<pre><code class="language-css">p { color: red }</code></pre>classの部分のlanguageは以下のページを参照
https://prismjs.com/index.html#supported-languages
Pluginの使用方法も以下のページからそれぞれのプラグインのリンク先を参照
https://prismjs.com/index.html#plugins
(公式サイトは英語ですが、結構わかりやすく書いてあります。)
WordPress用のカスタム
preとcodeタグ両方書くのは面倒なので
ショートコードを実装したいと思います。
- 準備
function.phpに以下を入力
例はcssの場合。[code_css]〜[/code_css]で囲む。
同様に他の言語も必要範囲で作成
function prism_css($atts, $content){
return ‘<pre class="line-numbers"><code class="language-css">' . esc_html($content) . '</code></pre>‘;
}
add_shortcode(‘code_css’, ‘prism_css’);- 使用方法
WordPressのブロックエディターの場合「カスタム HTML」ブロック内に入力
[code_css]p { color: red }[/code_css]POINTですが、[code_xxx]の中身が普通に動作してしまうと困るので
HTMLエンコードしています。
esc_html($content)の部分ですね。
Reference
- Prism.jsのこと
- Prism (公式) 英語ですがかなりわかりやすいです
- Google Code-Prettifyについて 下の方にPrism.jsについて丁寧に記載あります
- WordPressのこと
余談
余談 1 Prism.jsにした理由
MovableTypeからWordPressにしたら(すでに4年近く前)
うまく動かなくなってしまいそのまま放置でした(笑)。
流石にこのところコードを書くようなブログ記事も書きたくなっているので
重い腰を持ち上げて対策することにしました。
蓋を開けてみたら、SyntaxHighlighterの元のサイトがなくなっていたため
SyntaxHighlighter以外のプログラムを使うことに。
過去10年SyntaxHighlighterを使ったり、
他のBlogを見て以下の要求を満たすものが欲しいな
と思って探してPrism.jsになりました。
- SyntaxHighlighterでないもの
- WordPressのPlugInでないもの
- Copyボタンかテキスト選択しやすいもの
- そこそこ軽いもの
余談 2 普通に余談
Blogをマメに書くタイプではないのですが
10年以上ちまちまと自分のやりたいことをやっていると
自分で困ったことはメモしておかないと困ってしまうという事態に陥るんですよね。
10年ほぼそのまま持っているWebコンテンツってほぼない、
それどころか5年も持っていない気が。
リンク切れが恐ろしいことになっているんですよね。
今回は自分の過去の投稿を見返したら10年以上も前のこと。
流石にびっくりしました。
今度も10年使えるかなー。
さて、Highlighterの設定をするのがやりたいことではなく
やりたいことの途中。
途中で色々壁が出てきて、最初に何をやろうと思ったか忘れてたり。
(さっきまで本気で忘れていて思い出した。)
とりあえずのんびり行きますか。
Leave a Reply