プラグイン「Highlighting Code Block」に新たに言語を追加する方法。
WordPressで技術的な記事を書く際に便利なプラグイン、Highlighting Code Block。
ただ、Highlighting Code Blockに最初から適用されている言語は限られており、ここにないものは新しく追加する必要があります。
Highlighting Code Block(HCB、コードブロック)に言語を追加する方法を紹介します。
今回は、例としてyaml(yml)を追加していきます。
目次
ファイルのダウンロード
まずはこちらのサイトから、追加したいファイルをダウンロードします。
英語で分かりづらいのですが、今回は
- Compression level:Minified version
- Themes:Default(デザインなのでお好みで)
とし、「Languages」のチェックを外してから「YAML」にチェックを入れます。
「Plugins」のところは「Line Highlight」「Line Numbers」を選択しています。(写真だと「Line Numbers」だけになっていますが)
※「YAML」だけのチェックだと他の言語がハイライトされなくなったので、デフォルトのチェック+「YAML」としておくのが無難かと思います。
チェックが終わったら、一番下の「DOWNLOAD JS」「DOWNLOAD CSS」をそれぞれクリックしてダウンロードします。
テーマフォルダ内にアップロードする
ダウンロードしたファイルをFTPソフトなどを使い、自分のテーマフォルダ内にアップロードします。
僕はFileZillaを使っているので、こちらを例に解説します。
FileZillaのダウンロード方法などはこちらをご覧いただければと思います。
FileZillaを起動し、メニューの「ファイル」→「サイトマネージャー」→右下の「接続」でサーバーに接続します。
右のサーバー側で、「public_html」以下のフォルダをクリックして開いていき、以下のディレクトリを開きます。
/public_html/(サイト名)/wp-content/themes/(テーマ名)
開いたら左のローカル側から右のサーバー側へ先ほどダウンロードしたファイルをドラッグ&ドロップします。
サーバー側に「prism.js」「prism.css」の2つのファイルが入っていれば成功です。
Highlighting Code Blockの設定
WordPress管理画面のメニューから、「設定」→「HCB設定」とクリックします。
「高度な設定」の「使用する言語セット」に「prismでのクラス名:”言語の表示名”」の形で追記します。
「prismでのクラス名」のところは以下のサイトを参考にしていただければと思います。
今回はyamlを追加したいので、「yaml:”YAML”」と記述しました。
「独自カラーリングファイル」「独自prism.js」には以下のように書きます。
左下の「変更を保存」を押して保存します。
試しに表示させてみます。
WordPressのクラシックエディターを開き右上の「Code Block」をクリックすると、このように「YAML」が追加されていますので、こちらを選択します。
無事に表示されました。
version: '3'
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: somewordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
wordpress:
depends_on:
- db
image: wordpress:latest
ports:
- "8000:80"
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
volumes:
db_data:
参考になれば嬉しいです。
サービスメニュー
Postscript執筆後記
先月作った源泉税支払いのRPAを動かそうとしたのですが、なぜか上手く行かず…明日修正してみます。
Something New一日一新
川口駅荒井由美 「卒業写真」 カバー
中島みゆき 「糸」 カバー