WordPressでシンタックスハイライトするのにPrismを使う

このエントリーをはてなブックマークに追加

元々プラグインでシンタックスハイライトさせていたのですが、動作が重かったり表示が一昔前っぽくなってしまうのでモダンな表示になるものを探していました。今回はPrismを使って記事中のコードのシンタックスハイライトをさせてみることにしました。Prismを使ったプラグインもあるようですが今回はプラグインを使わずテーマに組み込みました。

Prismで対応している言語のリストはこちらです。大抵の言語はカバーできています。

必要なスクリプトのダウンロード

Prismを使うにはprism.cssとprism.jsが必要です。
ダウンロードボタンを押すとダウンロードページに遷移します。
Download

次にダウンロードするスクリプトの形態とテーマカラーを選択します。
通常使用にはMinified versionで問題ないと思います。色は好きなものを選びましょう。
ダウンロード設定

シンタックスハイライトが必要な言語を選択します。
Prism　必要な言語を選択

すると、ページ下部にコードとコードサイズが表示されます。
コードのダウンロード
表示されているスクリプトをコピーアンドペーストしてもいいですし、Downloadボタンからダウンロードでも問題ありません。

WordPressで使う場合はダウンロードしたファイルをのテーマフォルダに追加してください。

npmからのインストールももちろん可能です。

npm install prismjs

実装方法

ヘッダ部に先ほどダウンロードしたprism.cssとbody部の下部でprism.jsを読み込みましょう。
WordPressのテンプレートフォルダにcssとjsを入れる場合は別途get_template_directory_uri()をechoして正しいパスを指定しましょう。

<!DOCTYPE html>
<html>
<head>
...
<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>

使い方

以下のようにpreとcodeタグで囲みます。codeのクラス名が対応言語名になるのでjavascriptならlanguage-javascript、C++ならlanguage-cppなどとします。言語の略称は公式サイトに一覧があります。

<pre><code class="language-javascript">
alert('hi!')
</code></pre>
この記事が参考になったので記事を書いた作者にコーヒーをおごる

この記事を読んでいる人は この記事も読んでいます

atnr.net の RSS登録はこちらから

コメントは受け付けていません。

© 2024 atnr.net. All rights reserved.