ハイライト表示を横スクロールに変更する

Cocoon 設定 → ソースコード設定にてソースコードをハイライト表示 （highlight.js） する際、 表示結果を 「折り返し・改行」 ではなく 「横スクロール」 に変更する。 Cocoon は親テーマの style.css にて

 /************************************ 
 **  基本表示
 ************************************/ 
 /* 初期化 */ 
 * { 
   padding: 0; 
   margin: 0; 
   box-sizing: border-box; 
   word-wrap: break-word;/* ← こちらで適用されています。  */ 
   overflow-wrap: break-word; 
 } 

となっているので、 pre タグ内には適用されない様に css を追加します。

カスタマイズ方法

Cocoon Child: スタイルシート  (style.css)

Cocoon Child の スタイルシート  (style.css) に下記を追加します。

 /*  コード改行禁止  */ 
 pre code, 
 pre code span { 
	 word-wrap: normal; 
	 overflow-wrap: normal; 
 } 

word-wrap は overflow-wrap に変更される予定？らしいので、 併せて処理しておきます。

サイズ調整などはこちらで

 pre code { 
	 font-size: 1rem; 
	 line-height: 1rem; 
 } 

2018-12-30 　追記

gutenberg のカラムブロック内は 「.wp-block-column」 クラスにて 「word-break: break-word;」 が指定されているので改行されてしまいます。

下記の追加で回避が可能です。

 /*  カラムブロック内コード改行禁止  */ 
 pre { 
	 word-break: normal; 
 }