WordPress上でコマンドやソースをスクロールバーを入れて見やすく表示させる。

色々なサイトを参考にしながら、このサイトも作ったりしているのですが、Blog上でコマンドやソースコードがフレームの中で表示されている場合がある。

こんな感じに。

これはどうやって表示されるのかといったら “<pre></pre>” というタグを使用するようで、これは人様のサイトのソースを確認することで判明した。実際”<pre></pre>”で記入をしてみると、あれ？なんかちょっと違う。

一体なにが違うのかと思ったら、長いコマンドはスクロールバーが出ずに改行されて表示されてしまうのだ。

個人的には、１コマンド１行でないと気持ちが悪いので、なんとかスクロールバーを表示させたいと調査。

その結果”<pre></pre>”に関する設定は、Style.css に記載されている模様。

参考サイトを便りに変更を試みてみる。

WordPressの管理画面から　外観＞テーマ編集　を選択
右側のバーからスタイルシート Style.cssを編集
以下の様な位置に　pre{} を新規に追加してみた。

html {
	overflow-y: scroll;
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
a:focus {
	outline: thin dotted;
}

pre {
    white-space: pre;
    overflow: auto;
    background-color: #F5F5F5;
}

article,

あれ？
スクロールされない。

ということで、また色々調べていたら一つのサイトを発見。
http://kanonji.info/blog/2014/01/21/css-word-wrap-break-wordのせいでoverflow-x-autoが効かない件/

どうやら、この記事によると、word-wrap: break-word;が設定されていると、overflowよりも優先されるみたいとのこと、
そこで、同じくStyle.cssファイル内で、word-wrap; を検索し、break-work;　が記載されるところに, normal;を記載したところ、やっとスクロールバーが表示されました。まさに今このサイトで使っているのがこれ。
Style.css

.site-content article {
	border-bottom: 4px double #ededed;
	margin-bottom: 72px;
	margin-bottom: 5.142857143rem;
	padding-bottom: 24px;
	padding-bottom: 1.714285714rem;
	word-wrap: normal;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

いやーCSSファイルなんて初めていじりました。