【プラグインなし】記事内のコードにシンタックスハイライトを適応

以前、シンタックスハイライトのプラグインを紹介しましたが、

実際使ってみるとかなり重くて都合が悪かったので、プラグインなしでシンタックスハイライト表示を試みる事にしました。

いくつかみたのですが、「Prism.js」が良さげだったので、こちらを導入しました。

以下、方法の備忘録。

Prism.js のダウンロード

公式サイトからダウンロードします。

テーマ を選択

Theme は、

• Default
• Dark
• Funky
• Okaidia
• Twilight
• Coy
• Solarized light
• Tomorrow night

から選べます。

※ 3/31/2023追記：最初はOKAIDIAを使用していましたが、現在はTOMORROW NIGHTを使用しています。

必要な言語を選択

たくさんの種類の言語を扱っていますが、全部選択すると重くなるので、必要最低限を選択。

デフォルトは、下記。

• Markup + HTML + XML + SVG + TathML + SSML + Atom + RSS
• CSS
• C-like
• JavaScript

私はこれに下記３つを追加しました。

• R
• Python
• Regex

プラグインを選択

プラグインもたくさんありますが、必要だと思うもののみ。

私は下記を選択。

• Line Highlight
• Nine Numbers
• WebPlatform Docs
• File HIghlight
• Highlight Keywords
• Command Line
• Toolbar
• Copy to Clipboard Button

ダウンロード

選択が終わったらダウンロード。

JS と CSS の２つをダウンロードします。

JS ファイルと CSS ファイルのアップロード

ダウンロードしたファイルをサーバーにアップロードします。

私は、わかりやすいように子テーマの中にいれました。

私はエックスサーバーを使っているので、下記方法でアップロード。

function.php に追記

prism.js と prism.css を読み込みの方法はいくつかあるのですが、私は子テーマの function.php の一番下に、下記を追記しました。

// prism.jsの有効化 Start
function my_prism() {
wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prism.css' );
wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prism.js', array('jquery'), '1.9.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_prism' );
// prism.jsの有効化 End

使い方

記事中でこの機能を使うときは、

<pre>

タグと

<code>

タグでコードを括ればOK。

言語の指定

<code class="language-言語>

という感じに、codeタグの中で言語を指定します。

<pre>
<code class="language-css">
.chart{
background-color: #fafafa;
margin: 40px 0px;
padding: 30px 30px 5px 30px;
font-weight:600
}
</code>
</pre>

output

.chart{
background-color: #fafafa;
margin: 40px 0px;
padding: 30px 30px 5px 30px;
font-weight:600
}

下記から Example を確認できます。

行番号を追加

プラグインで「Line Numbers」をいれていると、行番号を追加することが可能です。

<pre class="line-numbers">

で指定します。

<pre class="line-numbers">
<code class="language-r">
x <- 2 + 3

install.packages(knitr)
y <- 1:20 plot(y)
</code></pre>

output

x <- 2 + 3
x
install.packages(knitr)
y <- 1:20 plot(y)

行のハイライト

指定した行をハイライトします。

<pre data-line = "行番号">

で指定します。

複数行をつなげるときは、「,」でつなぎ、連続する場合は、「-」でつなぎます。

<pre data-line = "1,3">
<code class="language-r">
x <- 2 + 3

install.packages(knitr)
y <- 1:20 plot(y)
</code></pre>

output

x <- 2 + 3

install.packages(knitr)
y <- 1:20 plot(y)

行番号 + 行のハイライト

行番号を追加し、指定した行をハイライトする場合は、

<pre class="line-numbers" data-line = "1,3">
<code class="language-r">
x <- 2 +3

install.packages(knitr)
y <- 1:20 plot(y)
</code></pre>

output

x <- 2 + 3

install.packages(knitr)
y <- 1:20 plot(y)

記述の注意点

<pre>タグの中に「<」 や 「>」 を入れる場合は、コードそのものと勘違いされるので、

「&lt;」「&gt;」 でエスケープする必要があります。

※ 3/31/2023追記：いつのまにか &lt;でエスケープしなくても大丈夫なようになっていました。

References