ソースコードをハイライト表示にする
①ソースコードを見やすくハイライトにするには?
Wordpress でブログの記事にHTML/CSSやプログラムソース等のコードを表示する際に、色分けしたりハイライトして見やすくしたいことがあります。
方法としては、自力でHTMLにてデザインするのは大変なので、ハイライト用のプラグインを入れるのが早いと思いますが、現在利用しているテーマの「Cocoon」には標準で機能があるので、今回はその機能を試してみたいと思います。(※2022.02時点)
②変更前 (Cocoon初期状態)
Cocoon設定内容(変更前)初期状態
ハイライト表示の設定は以下にあります。
「管理画面」→「Cocoon設定」→「コード」を押下すると以下の画面が表示されます。

ハイライト表示の設定は「ソースコード設定」の「ハイライト表示」の項目で設定できるようです。
ソースコード表示 (変更前) ※ハイライトなし
実際にサンプルのソースコードをブロックに張り付けてみましたが、初期の状態では、以下のように色分けはされていません。

そこで、早速ハイライト表示の設定をしてみたいと思います。
③変更後 (Cocoonハイライト設定)
Cocoon設定内容(変更後)ハイライト表示設定
「管理画面」→「Cocoon設定」→「コード」を押下し、ハイライト表示の項目「ソースコードをハイライト表示」と「行番号」にそれぞれチェックを入れて「変更をまとめて保存」を押下します。

ソースコード表示(変更後)※ハイライトあり
設定反映後は、ハイライト表示で色分けされ、行番号も表示されて見やすくなりました。
#####################################
# python program(サンプルソース)
#####################################
import urllib.request
from bs4 import BeautifulSoup
# ファイル取込
fl = open('c:/temp/in/url_lists.txt')
urlList = fl.readlines()
fl.close()
for i in range(len(urlList)):
url = urlList[i]
with urllib.request.urlopen(url) as infile:
html = infile.read()
soup = BeautifulSoup(html, 'html.parser')
head = soup.find('head')
title = head.find('title').getText()
サンプルソースの表示は、ハイライト表示すると見やすくなりますね。今回は以上です。
コメント