WordPress

【WordPress】Highlighting Code Blockで言語を追加してハイライトする方法

設定→CODE BLOCKを開く

まずは、以下の画像を参考にHighlighting Code Blockの設定画面を開きます。

使用する言語設定に言語を追加する

以下の部分に追加したい言語を追加します。

書き方

prismでのクラス名: “言語の表示名” の形で記述します。

prismでのクラス名、の部分は以下のリンクを参考にして下さい。
prism.js公式サイト

yamlファイルの場合:

yaml:”YAML”,

を追加する。

しかし、これだけではまだ反映されません。。。

独自prism.jsをダウンロード&アップロード

独自prism.jsをダウンロードする

以下のリンクで、先ほど追加した言語にチェックを入れてファイルをダウンロードします。
prism.jsダウンロード

Dockerfileを例に挙げると、以下のような感じです。
デフォルトの言語は、初めからチェックが入っているので、そのままでいいです。

チェックができたら画面最下部でダウンロードしましょう。

自分のテーマ内にアップロードする

それでは最後の作業です、ダウンロードしたファイルをFileZillaを使ってアップロードしましょう!

アップロード方法は、以下のサイトが分かりやすいです。
FileZillaでファイルをアップロード

COMMENT

メールアドレスが公開されることはありません。