前回の記事「WordPressのテーマをTHE THOR(ザ・トール)に変更した件」の中でTHE・THOR(ザ・トール)では行頭に挿入したスペースが消えてしまう問題を改善して欲しいと書きました。
本記事ではプラグインを使わずにこの問題を解消する手立てを紹介したいと思います。
行頭のスペースが消える問題
例えば以下のようなソースコードを記事編集画面で入力したとします。
if a == b:
(スペース)x = a
(スペース)x = a
ビジュアルエディタとテキストエディタを行ききするか記事を保存すると以下のようにスペースが消えてしまいます。
if a == b:
x = a
x = a
プラグインを使わずに解消する方法
本記事では<pre>タグを使った解消方法を紹介します。
<pre>タグはpreformatted textの略で、このタグで囲われた部分は整形済みテキストとして認識されるブロック要素です。すでに整形されたテキストとしてブラウザに解釈されるので、スペースや改行が書いたままに出力され、よくソースコードを表示するときに使われます。
上記のソースコードを例に<pre>タグを挿入した例を以下に示しました。ソースコードの前後に<pre>タグを挿入しています(赤字部分)。
<pre style=”border: none; background-color: transparent; padding: 0; color: black;”>
if a == b:
(スペース)x = a
</pre>
if a == b:
(スペース)x = a
</pre>
<pre>タグにstyleを指定していますが、styleなしで<pre>タグだけで囲うと以下のようにTHE THOR(ザ・トール)でプリセットされているスタイルになるため、これを調整しています。
▼ <pre>タグにstyleを指定しない場合の表示
if a == b:
x = a
