Editor Inline Code

その他オプション変更

そのほかに変更できるオプションになります。

行番号の表示

デフォルト:表示

  1. WordPress管理画面から、「設定」>「Editor Inline Code」の設定ページを開きます。

  2. 「行番号の表示」の部分のチェックを外します。

  3. 「保存」をします。

  4. 変更できました!

空白・改行の表示

デフォルト:表示

  1. WordPress管理画面から、「設定」>「Editor Inline Code」の設定ページを開きます。

  2. 「空白・改行の表示」の部分のチェックを外します。

  3. 「保存」をします。

  4. 変更できました!

言語の表示

デフォルト:表示

  1. WordPress管理画面から、「設定」>「Editor Inline Code」の設定ページを開きます。

  2. 「言語の表示」の部分のチェックを外します。

  3. 「保存」をします。

  4. 変更できました!

ツールバーの表示

デフォルト:ツールバーを常に表示する

フロント側のツールバーの表示を、「常に表示する」か、「マウスオーバーで表示」するかの設定です。

  1. WordPress管理画面から、「設定」>「Editor Inline Code」の設定ページを開きます。

  2. 「ツールバーの表示」の部分のチェックを外します。

  3. 「保存」をします。

  4. 変更できました!

ツールバーあたりをマウスオーバーすると、ツールバーが表示されます。

ツールバーのスタイル

デフォルト:プラグインのスタイルを適用する

ツールバーのスタイルを「プラグインのスタイル」を適用するか、デフォルトにするか選択できます。
独自のスタイルを当てる場合は、プラグインのスタイルを外してください。

  1. WordPress管理画面から、「設定」>「Editor Inline Code」の設定ページを開きます。

  2. 「ツールバーのスタイル」の部分のチェックを外します。

  3. 「保存」をします。

  4. 変更できました!

プラグインのスタイルを外した、デフォルトの表示です。

ツールバーに独自のスタイルを当てる場合

上記のように、プラグインのスタイルを外します。

CSSに下記部分を追加し、独自のスタイルを当てます。

						
							pre.code-toolbar > .toolbar > .toolbar-item {

							}
							pre.code-toolbar > .toolbar > .toolbar-item:last-child {

							}

							pre.code-toolbar > .toolbar a,
							pre.code-toolbar > .toolbar button,
							pre.code-toolbar > .toolbar span {

							}
							pre.code-toolbar > .toolbar a:hover,
							pre.code-toolbar > .toolbar button:hover,
							pre.code-toolbar > .toolbar span:hover {

							}
							pre.code-toolbar > .toolbar a:hover,
							pre.code-toolbar > .toolbar button:hover {

							}
							pre.code-toolbar > .toolbar span:hover {

							}
						
					

CSSサンプル:「ツールバーのスタイル」「プラグインのスタイルを適用する 」で設定されている、スタイルです。

						
							pre.code-toolbar > .toolbar > .toolbar-item {
								margin-right: 5px;
							}
							pre.code-toolbar > .toolbar > .toolbar-item:last-child {
								margin-right: 0;
							}

							pre.code-toolbar > .toolbar a,
							pre.code-toolbar > .toolbar button,
							pre.code-toolbar > .toolbar span {
								font-size: .8em;
								padding: .5em .8rem;
								background-color: #4382F6;
								border-radius: 3px;
								cursor: pointer;
								color: #fff;
								box-shadow: none;
								text-shadow: none;
							}
							pre.code-toolbar > .toolbar a:hover,
							pre.code-toolbar > .toolbar button:hover,
							pre.code-toolbar > .toolbar span:hover {
							text-shadow: none;
								color: #fff;
							}
							pre.code-toolbar > .toolbar a:hover,
							pre.code-toolbar > .toolbar button:hover {
								background-color: #6C9DF7;
							}
							pre.code-toolbar > .toolbar span:hover {
								cursor: auto;
							}
						
					

※ コードハイライト部分は、prism.jsを使用しています。