Cocoonテーマはシンプルで高速なWordPressテーマであり、ブログ運営において非常に人気があります。その中で、コードをきれいに表示するための機能も備わっています。この記事では、Cocoonテーマを使ってコードを見やすく表示するための設定方法を解説します。
Cocoon設定の表示
まず、WordPressの管理画面にログインし、Cocoonの設定画面にアクセスします。
- WordPressの管理画面にログインします。
- 「Cocoon設定」に移動します。
- 「Cocoon設定」のメニューから「コード」タブをクリックします。
コードブロックの設定
ここでは、コードを表示するためのブロックの設定を行います。
- ハイライト表示から、ソースコードをハイライト表示にチェックを入れます。これにより、コードのシンタックスハイライトが適用され、コードが見やすくなります。
- 必要に応じて、「行番号を表示する」などのオプションを設定します。
ハイライト方法の選択
ハイライトのスタイルにはいくつか種類があります。
スタイルの選択は、ハイライトスタイルを変更することで設定できます。
今回は、atom-one-lightを選択しました。
どのようなレイアウトになるかはhightlight.jsのデモページで確認できます。
このページでどのようなテーマを選ぶと、どのようなレイアウトになるのか確認することができますので、自分がよく使う言語を選択して実際のコードの部分にコードに入力してみましょう。
そして、テーマを色々と選択するとレイアウトが変わるのが確認できるかと思います。ここで気に入ったテーマの名前を選択してください。
投稿テスト
設定が完了したら、実際に投稿にコードを挿入してみましょう。
- 投稿や固定ページの編集画面に移動します。
- 「コードブロック」を追加します。ブロックエディタを使っている場合は、「+」ボタンをクリックして「コード」ブロックを選択します。
- コードブロックに、表示したいコードを貼り付けます。
# 例: Pythonのコードを表示
def hello_world():
print("Hello, World!")
5. プレビューで確認
コードを挿入したら、プレビューで実際の表示を確認します。コードが正しく表示されているか、シンタックスハイライトが適用されているかを確認してください。
まとめ
以上が、Cocoonテーマを使ってコードをきれいに表示する方法です。設定は非常に簡単で、コードブロックを使えば誰でも簡単に美しいコード表示が可能になります。ぜひこの方法を試して、ブログのコードを見やすく整えてみてください。
