ビジュアルエディタの整形済みテキスト（pre）をカスタマイズする

プログラムソースを記述するBOXを整形済みテキスト（preformatted text）と呼びpreタグを使います。

ここではこのサイトで使っているpreタグの設定と使い方を解説します。

1.整形済みテキスト<pre>の設定

1-1.ビジュアルエディタのCSSに下記を追加します。

本テーマのビジュアルエディタのCSSは「editor-style.css」から「my-editor-style.css」に変更しています。

理由は下記ドキュメントを参照してください。

ブロックエディタ時代にビジュアルエディタを使う方法

親テーマが「editor-style.css」の時のスタイル機能の使い方

＜my-editor-style.cssの設定＞

/***********************************************************************/
/* preformatted text(プログラムソース)を表示するBOX */
/***********************************************************************/
pre{
	border: 1px solid #666;                                           /* 枠線設定 */
	color: #444;                                                            /* 文字色 */
	font-family:'メイリオ';                                               /* 文字フォント */
	font-size:14px;font-size:0.875rem;line-height:1.8em; /* 文字サイズ */
	margin:5px 0;                                                          /* BOXは上下に5pxあける */
	padding:10px;                                                         /* BOX内は上下に上下左右に10pxあける */
	tab-size:4;                                                              /* TABコードは4文字とする */
	overflow: auto;                                                        /* BOX内に入らない場合はスクロールバーを表示する */
}

各設定の意味はコメントを参照してください。

　TABコードについて

上記の設定でTABコードがあった場合は4文字表示としています。

これはEmEditor等のテキストエディタで作成した文字列をここにペーストした場合、TABコードは4文字分を開けろという意味です。テキストエディタの中で何文字開けるか？はテキストエディタの設定です。

尚、上記の整形済みBOXの中で編集する場合はブラウザの制約でTABコードは入力できません。

どうしてもTABコードを入力したい場合は下記の様にします。

①テキストエディタのTABコードをCtrl＋Cでクリップボードに入れる。

②整形済みテキストエリアの中でTABを入れたい所で、Ctrl＋VでTABコードを張り付ます。

注意事項：原因は不明ですがTABの前文字はカラーなし、後ろ文字はTAB操作をする前はカラーなしにする必要があります。

1-2.style.cssにも同様な設定を行います。

************************************************************************/
/* preformatted text(プログラムソース)を表示するBOX */
/***********************************************************************/
.entry-content pre{
	border: 1px solid #666;
	color: #444;
	margin:5px 0;
	padding:5px;
	font-family:'メイリオ';
	font-size:14px;font-size:0.875rem;line-height:1.8em;
	tab-size:4;
	overflow: auto;
}