【Cocoon】ソースコードのハイライト表示設定

WordPress
この記事は約3分で読めます。

ソースコードをハイライト表示にする

①ソースコードを見やすくハイライトにするには?

 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()

 サンプルソースの表示は、ハイライト表示すると見やすくなりますね。今回は以上です。

コメント