【WordPress】クラシックエディタでHighlight Code Blockにコードをコピペする

code ブログ
記事内に広告が含まれています。

はじめに

クラシックエディタのCode Blockに複数行のコードをコピペする時に、

空白行が含まれると、Code Block内にうまくペーストすることができません。

この記事では、複数行のコードでもCode Blockにきれいにコピペする方法をご紹介します。

 

Highlight Code Blockのインストールがまだの方はこちらをご覧ください！

【Wordpress】ソースコードを見やすく表示する「Highlighting Code Block」
Wordpressでソースコードを見やすく表示する際に便利なプラグイン「Highlighting Code Block」の使い方をご紹介します。Cocoonのクラシックエディタを使用している場合について説明します。
shungoblog.com
2022.07.12

 

複数行のコードをコピペする方法

Code Blockを導入する

まずはクラシックエディタでCode Blockを挿入します。

highlight-block-code-1

ビジュアル => テキスト に変更する

次にビジュアルからテキストに変更します。

ビジュアルのままコピペすると空白行がうまく反映されないので注意してください。

highlight-block-code-2

codeタグの間にコードをコピペする

テキストに切り替わったら、/* Your code... */を削除して、表示したいコードをコピペします。

 

highlight-block-code-3

 

例えば、このようにHTMLのコードをコピペすると

highlight-block-code-4

空白行もうまく反映されていると思います！

<h2>Title</h2>
<p>Text</p>

<footer>
  <p>© 2023 shungoblog</p>
</footer>

 

コメント