エンジニアブログらしく「コード」を載せたい！
Pythonの学習記録をつけるにあたって、避けて通れないのが「プログラムのコードをどう載せるか」という問題です。
普通の文章として書いてしまうと読みづらいですが、Cocoonの標準機能を使うだけで、驚くほどプロっぽく表示できることがわかりました。
専用の「ソースコード」ブロックが便利
WordPressの編集画面で「ソースコード」というブロックを使うと、専用の枠の中にコードを記載できます。
これを使うメリットは主に2つあります。
- 等幅フォントで見やすくなるプログラミングに最適なフォントで表示されるため、インデント（字下げ）や記号がはっきりと判別できるようになります。
- コードとして独立する本文と混ざらないため、読者がコピー＆ペーストしやすくなります。
自動で色が付く「ハイライト機能」
さらに驚いたのが、Cocoonには**「ハイライト機能」**が備わっていることです。
- シンタックスハイライト：
printや"文字"などの要素を自動で判別して、色を変えてくれます。 - 行番号の表示： コードの左側に「1, 2, 3…」と番号が出るので、後から解説する時に「○行目を見てください」と言いやすくなります。
これらは Cocoon設定 ＞ コード のタブから簡単にオンオフができました。
実際に設定してみた見た目
例えば、Pythonのコードを載せるとこんなにスッキリします！
Python
# 行番号や色が付いて読みやすい！
print("Hello Sandbox!")
print("Cocoonの設定完了")
設定画面で「Atom One Dark」などのスタイルを選ぶと、エンジニアが使い慣れた黒背景のエディタ風にもできるので、自分の好みの「砂場」を作っている感覚があって楽しいです。
まとめ
今回は「中身（記事）」ではなく「器（デザイン）」の設定を学びました。
- コードは専用のボックス（ブロック）で書く
- Cocoon設定でハイライトと行番号を有効にする
これで、これからPythonで複雑なコードを学ぶ準備が整いました。見た目が整うと、更新のモチベーションも上がりますね！
コメント