preタグを画面端で折り返してソースコードを表示する方法

preタグとcodeタグを同時に使うと長いソースコードの場合、横スクロールバーが表示されてしまいますが、場合によっては結構見にくくなる原因になります。

そこで今回はpreタグを画面端で折り返してソースコードを表示する方法を紹介します。

 

preタグを画面端で折り返す方法

以下のCSSを適用するだけです。

.code_break {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: auto;
}

 

プロパティの意味は以下の通りです。

  • white-space:ホワイトスペース(空白)に関するプロパティ。pre-wrapを指定すると画面端の自動改行と通常の改行の両方が反映される
  • word-wrap:単語の途中で改行するかを指定するプロパティ。break-wordを指定すると単語の途中でも改行される(英単語でも改行される)
  • overflow:要素からはみ出た部分をどう表示するかを指定するプロパティ。wihte-spaceやword-wrapに対応していないブラウザではスクロールバーが表示されるよう、autoを指定。

 

preタグに上のCSSを適用するだけでコードが端で折り返されるようになります。

 

Prism.jsで使うときは注意

WordPressではPrism.jsを使ってソースコードのハイライトができるプラグイン「Prism for WP」があります。

このプラグインと上記のCSSを同時に使用しても折り返しはできません。

<pre class="code_break">
<code class="language-markup">
1行ソースコード
</code>
</pre>

 

これはcodeタグの中で折り返しが勝手に禁止されているのが原因です。

なので、codeタグに指定する用のCSSを作りましょう。

.code_break {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow: auto !important;
}

 

各プロパティの最後に!importantを指定することで最も優先度の高いスタイルにすることができます。

そしてこのスタイルをpreタグではなくcodeタグに指定してください。

<pre>
<code class="language-markup code_break">
長い1行ソースコード
</code>
</pre>

 

このように指定するとPrism.jsを使ってもpreタグ内でコードの折り返しができるようになります。