WordPress コードの書き方

本ブログのコードは以下のようにして書いています

■ブロックのカスタムHTMLの書き方

記述のポイント
<div class="hcb_wrap"> プラグイン Highlighting Code Block 使用
<p class="prism-title">prime3time.py</p> 左上にファイル名prime3time.py表示
<pre class="prism line-numbers language-python ">
 prism 独自カラーリングファイル・独自prism.js
 line-numbers 行ナンバー表示
 language-python 右上に言語名python表示

<code>コード</code>

<code>
コード
</code>
とかかないこと

<code>import time
…
 print(f'計算にかかった時間{t}秒')</code></pre>
</div>
のように書き始め、書き終わる
<div class="hcb_wrap">
<p class="prism-title">prime3time.py</p>

<pre class="prism line-numbers language-python "><code>import time
n = int(input('素数判定したい3以上の自然数nを入れてね n='))   # 入力されたnを整数に変換
start = time.time()                       # 時間計測開始
p = 0                                     # 約数の個数カウンター
for k in range(1,n+1):                    # k=1,...,n
	if n % k == 0:                        # n÷kの余りが0ならば
		print(f'{n} は {k} を約数にもつ')   # 約数kを表示
		p = p + 1                         # 約数の個数カウンターpを+1
if p > 2:                                 # 約数の個数が3以上の場合
	print(f'{n} は約数を{p}個もつ合成数で素数ではない')    # 素数ではない
	t = time.time() - start               # 時間計測終了
	print(f'計算にかかった時間{t}秒')
else:                                     # そうでない場合(p=2)
	print(f'{n} は素数!')                 # 素数
	t = time.time() - start
	print(f'計算にかかった時間{t}秒')</code></pre>
</div>

prime3time.py

import time
n = int(input('素数判定したい3以上の自然数nを入れてね n='))   # 入力されたnを整数に変換
start = time.time()
p = 0    # 約数の個数カウンター
for k in range(1,n+1):   # k=1,...,n
	if n % k == 0:       # n÷kの余りが0ならば、(kはnの約数ならば)
		print(f'{n} は {k} を約数にもつ')    # 約数kを表示
		p = p + 1        # 約数の個数カウンターpを+1
if p > 2:                # for文を抜け出した後 約数の個数で条件分岐 2個よりも大きい場合には
	print(f'{n} は約数を{p}個もつ合成数、素数ではない')    # 合成数
	t = time.time() - start
	print(f'計算にかかった時間{t}秒')
else:                    # そうでない場合(p=2)
	print(f'{n} は素数!')         # 素数
	t = time.time() - start
	print(f'計算にかかった時間{t}秒')

プラグイン+追加CSS

p.prism-title {
 background: #333333;
 font-size: 90%;
 display: inline-block;
 color: #ffff00;
 letter-spacing: 0.1em;
 margin: 0px 0px;
 padding: 3px 15px 3px 15px;
 border: 0px solid #f5f2f0;
 border-radius: 1px 5px 0px 0px;
 position: relative;
 top: 2px;
 z-index: 100;
}