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」をそれぞれクリックしてダウンロードします。

JSファイルとCSSファイルをそれぞれダウンロード

テーマフォルダ内にアップロードする

ダウンロードしたファイルをFTPソフトなどを使い、自分のテーマフォルダ内にアップロードします。

僕はFileZillaを使っているので、こちらを例に解説します。

FileZillaのダウンロード方法などはこちらをご覧いただければと思います。

 

FileZillaを起動し、メニューの「ファイル」→「サイトマネージャー」→右下の「接続」でサーバーに接続します。

FileZillaでサーバーに接続

右のサーバー側で、「public_html」以下のフォルダをクリックして開いていき、以下のディレクトリを開きます。

/public_html/(サイト名)/wp-content/themes/(テーマ名)

 

開いたら左のローカル側から右のサーバー側へ先ほどダウンロードしたファイルをドラッグ&ドロップします。

FileZillaでサーバーにファイルをアップロード

サーバー側に「prism.js」「prism.css」の2つのファイルが入っていれば成功です。

Highlighting Code Blockの設定

WordPress管理画面のメニューから、「設定」→「HCB設定」とクリックします。

プラグインHCBの設定

「高度な設定」の「使用する言語セット」に「prismでのクラス名:”言語の表示名”」の形で追記します。

「prismでのクラス名」のところは以下のサイトを参考にしていただければと思います。

Prism

 

今回はyamlを追加したいので、「yaml:”YAML”」と記述しました。

「使用する言語セット」に言語を記述

「独自カラーリングファイル」「独自prism.js」には以下のように書きます。

「独自カラーリングファイル」「独自prism.js」の記述

左下の「変更を保存」を押して保存します。

 

 

試しに表示させてみます。

WordPressのクラシックエディターを開き右上の「Code Block」をクリックすると、このように「YAML」が追加されていますので、こちらを選択します。

WordPressのエディタで追加された言語を選択

無事に表示されました。

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一日一新

川口駅
荒井由美 「卒業写真」 カバー
中島みゆき 「糸」 カバー

\本を出版しました/

\セルフマガジン無料送付/

Seiji Aihara / 相原 征爾

Seiji Aihara / 相原 征爾

お金・時間・やりがいなどのバランスを取り人生を楽しむことをサポートする税理士・ミュージシャン・ひとり社長。
ブログ「FAVPRESSO」では生き方・ミニマリズム・ひとり仕事の効率化・音楽・おすすめアイテムなどについて発信。

得意な仕事はクラウド会計の導入・ペーパーレス化・経理業務効率化・各種シミュレーション・独立支援・デザインに関するコンサルティング・アコギの初め方サポートなど。
遠方・オンライン・スポット対応可能です。
簿記がわからなくても、一から経理ができるようにお伝えします。
Windows・Mac両対応。

音楽、映画、カレーが大好き。
名刺、ロゴ、WordPressテーマ、本の表紙から音楽まで自作する、自称超クリエイティブ。

詳しいプロフィールはこちら
税理士事務所のHP・サービス一覧はこちら

著書 【Amazon】著書一覧