私はスペースによるインデントが、どうしても許せません。
1つ段落を落としたいときに、何度もバックスペースを連打するのが面倒ですし、スペースの個数が整えられていないと、コードがぐちゃぐちゃに崩れる原因になるからです。
タブであれば、個人ごとにエディタ側で好きな大きさに切り替えられますからね。
一番見やすいのはスペース4個分だと思いますが。
それはさておき、当サイトにソースコードを載せるときも、もちろんインデントはタブで統一しています。
…そのはずだったのですが、タブを入れたはずなのに勝手にスペース4つに変換されていることがあったので、それの原因と対処法について。
タブがスペース4つに変換されていた原因について。
いつもWordpressで記事を書く際は、クラシックエディターかつJetpackというプラグインを入れて、Markdown記法を使用しています。
そしてエディター内にソースコードを書くときは、下記のような感じです。
|
1 2 3 4 5 6 7 |
// 実際の「～」は半角です。~~~ ～～～ <div> <p>test</p> </div> ～～～ // pタグのインデントはタブ1つです。 |
そして記事を保存し、実際に表示させると、~~~はpre codeに変換されて、その中身がソースコード表示用の枠となります。
|
1 2 3 4 |
<div> <p>test</p> </div> // pタグのインデントが、スペース4つになっている。 |
しかし上記のように、pタグの横にあったタブによるインデントが、勝手にスペース4つに変換されてしまいます。
なお、Jetpackをいったん無効化し、~~~ではなくpre codeタグで直接囲った場合は、タブのままでした。
よって、Jetpackに原因があると思われます。
タブをスペース4つに変換されない方法。
|
1 2 3 4 5 |
add_filter("wpcom_markdown_transform_post", function ($text) { $text = str_replace(" ", "t", $text); return $text; }); // ダブルクオートの中身はスペース4つです。 |
上記コードを、使用中のテーマのfunctions.phpに入れましょう。
そして記事を保存し直すことで、タブはそのままタブとして維持されるようになります。
なお注意点として、すでにスペース4つで表示されてしまっている記事は、再度保存し直す必要があります。
このコードを入れてから保存した記事に対してのみ有効となります。
また、エディタによっては保存のたびに、スペース4つをタブに変換する設定があるかもしれません。
そういう設定を使っている場合は、functions.phpを編集するときに、上記コードのダブルクオート内のスペースが、勝手に置き換えられないように注意しましょう。
余談。おすすめのコード表示用Wordpressプラグイン。
以前は「WP Code Highlight.js」というプラグインを使用していましたが、すでにWordpress公式のプラグイン一覧の中から消失していました。
現在でも使えないことはなかったのですが、もうサポートされないプラグインだと、のちのWordpress本体やphpのアップデートなどで、使用不能になる恐れがあります。
Urvanov Syntax Highlighter – WordPress プラグイン | WordPress.org 日本語
よって現在は、「Urvanov Syntax Highlighter」というプラグインに乗り換えました。
あちこちのサイトで「Crayon Syntax Highlighter」というプラグインがおすすめされており、現在も存在はするのですが、そのプラグインはすでに更新が何年も停止してしまっており、php7以上ではエラーになります。
かつての人気だったCrayonの代替であり、なおかつ現在の環境にも対応しているので、おすすめです。
(実際に、設定画面ではCrayonの名前がそのまま残ってる。)
また、他のプラグインだとソースコードを、専用のショートコードや専用のclassが付いたタグで囲わないといけない手間がありますが、Urvanovであればpre codeもしくは~~~のままでも使用可能です。
過去の記事を書き換える必要がありません。もし多くの記事が存在していたら大変なので。
ただ、デフォルト設定だとHTMLタグがエスケープされてしまうので、「コード内のHTMLエンティティを出力」は有効にしておきましょう。
追記。(2021/8/12)
今はもう、Jetpack使っていません…。
ブロックエディターに置き換えました。
コードブロックを使ってもタブが勝手にスペース4つに置き換わるということはないですし、Markdown記法をそのままブロックエディター上に貼り付けると、見出しなどを自動的に適したブロックに置き換えてくれるのがすごい。
クルマやバイクのゲーム、ニッチな端末いじり、ランチ・モーニング巡りにお熱です。