本記事ではHighlighting Code Blockプラグインを使って実装するときにコードを改行できないときの対処法について書いていきます。
Highlighting Code Block内のコードを改行できない
技術系ブログを運営されている方はプラグインの「Highlighting Code Block」を使われている方も多いと思います。先月、wordpressとthe thorをアップデートしてサイトのSEO設定をぽちぽちいじっていたらいつの間に「Highlighting Code Block」のコードが改行できていないことに気付きました。下の画像のようにコードを改行して更新後、サイトを確認すると改行されていないという。コードが一行になってしまうので、とにかく見にくいサイトになっていました。
改行できない原因
では、改行できない原因はなんでしょうか。最初プラグインを疑い、別のハイライト系のpluginをインストールして試したものの結果は同じ。htmlコードに<br>を記述しても改行されない。ということで次に疑ったのはサイトテーマの「THE・THOR」。色々調べた結果、SEO設定のHTMLを圧縮するにチェックを入れていたのが原因でした。そのため、改行できない不具合をなくすためには
- ①ダッシュボード「外観」→「カスタマイズ」→「SEO設定［THE］」→「HTML圧縮設定」と選択②「HTMLを圧縮する」
- 「HTMLを圧縮する」のチェックを外す
HTML圧縮とは
HTMLを圧縮することによって不要な改行や空白を取り除いてくれます。そのため、ファイルが軽量化し、サイト表示が早くなるというメリットがあります。一方で私のように改行したいのに改行できないことがあるので、HTMLの圧縮をしないように設定しておきましょう。