WordPressでコードを表示して共有する！
プラグインHighlighter Code Block

ブログを読んだ後、違和感をもつことがあります。

たとえば、プログラミングのコードを紹介している記事です。

違和感を発展的に解消していきます。

コードを表示・共有　違和感の正体と解消

ブログを読んだ後で違和感をもつことがあります。

投稿された内容とは別に、表示に対してです。

とりわけプログラミングのコードを示されている記事では、

• きれいに表示されている上に
• コードのコピーが可能である

といった表示形式がみられることがあります。

これに対して、

• スクリーンショットを貼り付け
• コードを閲覧するのみ

という表示もみられます。

たとえば、私の過去記事(笑)。

残念な状態＝改善対象です。

今回WordPressのプラグイン「Highliter Code Block」で
コードの表示と共有を発展的に解消してみました。

コードを表示・共有　プラグインHighliter Code Block

「code syntax highliter wordpress」などでウェブを検索してみると、
コードをWordPressで表示するためのプラグインが見つかります。

私が「Highliter Code Block」を選択した理由は以下の通りです。

• 表示がすっきりしている
• コードのコピーが容易
• 複雑な設定が不要

WordPressの「プラグイン」より「Highliter Code Block」を
インストールして有効化します。

「設定」→「[HCB]設定」より機能の設定が可能です。

私は初期設定の状態にしています。

WordPressのエディタでは下記のように利用が可能です。
　(私はクラシックエディタを使用しています)

print('Hello World')

簡潔ですね(笑)。

とはいえ、「Highliter Code Block」を導入することで、
もやもやした違和感は解消できました。

コードを表示・共有　Give & Take

私はプログラマーではありません。

税理士業務の効率化の一環でプログラミングを利用できないか
試行錯誤しています。

泥縄式でプログラミングの知識を補っているので、
ウェブ上のサンプルコードも参照しています。

試行錯誤は、

• サンプルコードを参照→実験→成果の確認

というプロセスです。

効率化を局所的にとらえるなら、上記のプロセスで完結します。

一方で、情報発信を通じて、

• 現在何らかのかかわりのある方
• 今後関わりの可能性のある方

へと視野を広げると自己完結では物足りなくなります。

ノンプログラマーだからこその目線で発信できる内容もあります。

「Highliter Code Block」の導入と利用は
そうした情報発信のきっかけにもなります。

追記　クラシックエディタでの「Highliter Code Block」

クラシックエディタでの「Highliter Code Block」の利用時には、

1. 「ビジュアル」でコードを入力
2. コードをマウスでドラック選択した状態で
3. 「Code Block」より該当言語を選択

といった手順できれいに出力されます。

蛇足
プラグイン「Highliter Code Block」は利用方法で悩みませんでしたが、
ウェブ検索で難儀しました。
「WordPress　コード　表示」ではお門違いの記事ばかり…。
専門分野以外の調べ物はことばの壁にぶつかりますね。

＜ご案内＞

■林友範税理士事務所

ご依頼はこちら

■災害と税金の情報

災害と税金

■確定申告のご依頼も受付中！

確定申告のご依頼