「礼」の~IT人材を目指して~
作成：2025/05/25
更新：ー
はじめに
現在、WordPressでWEBサイト構築の勉強をしています。
このサイト自体をWordPressで作成し、勉強の実験台にしています。
そして、勉強の進捗があればその都度、このサイトで、報告しているところです。
これまでの経緯と課題
前回は、WordPress導入後、最初に設定変更したことを紹介しました。（関連記事）
記事を書いていくにあたり、本文中にプログラムのコードを引用するのですが、WordPressのデフォルトでは、このような表示になってしまいます。
悪くは無いのですが、もう少し見やすい表示のほうが良いのではないかと思います。
今回実施すること
そこで、今回は、ソースコードを綺麗に表示する方法を検討したいとおもいます。
以前、ブログ作成用に使用していたGoogleが提供するサービス「Blogger」では、Javascrypt等で、プログラムを書いて、表示を整形する必要がありましたが、WordPressでは、プラグインという便利なものがあるようです。
プラグインを選ぶ
■表■
| プラグイン | 特徴 |
|---|---|
| Urvanov Syntax Highlighter | クラシックエディターで使える |
| Highlighting Code Block | 日本語対応でわかりやすい |
| Code Block Pro | 標準的な機能・デザイン |
| Enlighter | 自分好みに細かく調整したい |
プラグインによって特徴が異なるようなので、目的に応じて選ぶのが良いとおもいます。
私は、クラシックエディターを使用していますので、「Urvanov Syntax Highlighter」を採用することにしました。
最初は、標準的な機能の「Code Block Pro」を選んでみましたが、クラシックエディターでは、うまく使用できませんでした。
プラグインのインストール
使用するプラグインがきまったら、次はプラグインをインストールします。
プラグインのインストールも簡単で、WordPressの設定画面の左側にあるリストから、「プラグイン」の項目を選んで、プラグイン名を検索すると、該当するプラグインが表示されます。
■画面１■
「Urvanov Syntax Highlighter」を選んだところです。
「今すぐインストール」を選んで、「有効化」すれば、使用可能となります。
プラグインの機能を使ってみる
では、実際にプラグインの機能を使ってみます。
WordPressの投稿編集画面の右上に「＜＞」マークのボタンがあります。
■画面２■
これをクリックすると、編集画面がポップアップ表示されますので、ここにコード貼り付けます。
■画面３■
細かい設定等ができるようですが、今回は、特に変更はせず、そのまま使用してみました。
なお、都度フォントサイズを変更するの面倒な場合は、デフォルトの設定を変更することができます。
サイドバーの設定からCrayonを選択すると設定画面が開きますのでここで設定変更を行いましょう。
■画面４■
結果
結果は、下のように表示されます。
■コード■
|
1 2 3 4 5 6 7 8 9 10 |
from flask import Flask app = Flask(__name__) @app.route('/') def hello(): return 'Hello World!' if __name__ == '__main__': app.run(debug=True) |
さいごに
プラグインを使用することでソースコードを綺麗に表示することができました。
コメント