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」の利用時には、
- 「ビジュアル」でコードを入力
- コードをマウスでドラック選択した状態で
- 「Code Block」より該当言語を選択
といった手順できれいに出力されます。
蛇足
プラグイン「Highliter Code Block」は利用方法で悩みませんでしたが、
ウェブ検索で難儀しました。
「WordPress コード 表示」ではお門違いの記事ばかり…。
専門分野以外の調べ物はことばの壁にぶつかりますね。
＜ご案内＞
■林友範税理士事務所
■災害と税金の情報
