これからPythonによるポイ活検証を行っていくにあたり、どうしてもこだわりたかったのが「ソースコードの見た目」です。
エンジニアのブログといえば、黒い背景にカラフルな文字（シンタックスハイライト）、そして右上の「コピーボタン」。これが標準です。
しかし、SWELL標準の「コード」ブロックを使ったところ…
「あれ？ 背景が白いし、なんか地味…？」
と、いきなり躓いてしまいました。 結論から言うと、SWELLでプロっぽいコードを表示するには「Highlighting Code Block」というプラグインが必須です。
導入時に「似た名前の別プラグイン」を入れてしまう罠もあったので、備忘録として正しい設定手順をまとめます。
なぜ標準の「コード」ブロックではダメなのか？
SWELL（WordPress）には元々「コード」というブロックが入っています。 これを使えばコード自体は書けるのですが、以下のような不満がありました。
- 背景が白くて見づらい（エディタっぽくない）
- 行番号が表示されない
- 「コピーボタン」がない（読者が不便）
技術ブログとして運用するなら、読者がコードをサッとコピーできる機能は必須です。これらを一発で解決してくれるのが、SWELL開発者が提供しているプラグイン「Highlighting Code Block」です。
手順1：正しいプラグインをインストールする（ここが罠）
プラグインの新規追加画面で検索するのですが、ここで注意が必要です。
WordPressのプラグイン検索窓に Highlighting Code Block と入れると、同名のプラグイン（Weston Ruter氏作成）が出てくることがあります。がこれは別物です。
実際に私が検索した時には、同名のプラグインが出てきてしまい、SWELL開発者が提供しているプラグインはどれなのか探すのに苦労しました。
SWELLに最適化された本物を探すには、以下のキーワードで検索してください。
- 検索ワード：
lofrまたはRyo Watanabe
作成者が 「Ryo」 となっているものが正解です。これをインストールして有効化します。
手順2：背景を「黒（Atom One Dark）」にする設定
有効化したら、好みのデザインに設定します。
以下の手順でカラーリングを変更できますが、特段変更を行わなくても見やすくよく見るような体裁にできます。
- 管理画面の左メニューから [設定] ＞ [Highlighting Code Block] を開く。
- 「カラーリング設定」 の中にある 「コードの配色」 を変更する。
※「コピーボタンを表示する」には最初からチェックが入っているのでそのままでOKです。
手順3：記事を書く時の注意点（ブロックの使い分け）
ここも私がハマったポイントです。 プラグインを入れても、標準の「コード」ブロックを使うと背景は白いままです。
記事を書く時は、必ず以下の手順で専用ブロックを呼び出す必要があります。
マウスを使わない「爆速」呼び出し術
いちいちメニューから探すのは面倒なので、以下のショートカットがおすすめです。
メニューから探すと沢山のブロックの中から画面をスクロールしなくてはいけませんし、似たようなブロックを誤って選択してしまうリスクもありますので、是非ショートカットを使用してみてください。
- 本文の入力欄で
/（スラッシュ） を打つ。 - 続けて
highと入力する。 - 候補に出る 「Highlighting Code Block」 をEnterで選択。
これで入力枠が出現します。 あとはコードを貼り付け、右側の設定パネル（言語設定）に python と入力すれば完了です。
（言語設定をしなくても恐らくそのまま使用できます。）
完成形はこちら
実際に設定して表示させたPythonコードがこちらです。
Highlighting Code Block
def hello_money():
print("Hello, SWELL & Python!")
print("これでポイ活コードも綺麗に表示できます")
if __name__ == "__main__":
hello_money()通常のブロック
def hello_money():
print("Hello, SWELL & Python!")
print("これでポイ活コードも綺麗に表示できます")
if __name__ == "__main__":
hello_money()
背景が黒くなり、行番号が付き、右上にコピーボタンが表示されています。 これでようやく、技術ブログとしてのスタートラインに立てました。
これからこの環境で、Pythonを使ったポイ活効率化コードをどんどん公開していきます！
コメント