WordPressでソースコード記述のテスト

WordPressでソースコード記述のテストを行いました。

Rのソースコードをペーストした結果


class属性値特殊文字(<など)
コードエディタ不変変換される
ビジュアルエディター変わる変換される
ビジュアルエディター(カスタムHTML)不変不変


となりました。

コードエディタ以外はペースト結果の修正が必要なようです。


検証に使ったWordPressのバージョンを記載しておきます。
バージョンが異なると、表示や操作も若干異なる場合があるからです。

  • WordPress 5.2.2



背景と目的

Rの記事を書いたとき、ソースコードのコピー&ペースト結果に違いが出ました。
その整理のためにテストを行ないます。

テスト方法

こちらのコード(テキストエディタに記載)をコピー&ペーストし、HTMLのソースを確認します。

<pre class="R">
x <- 1:10
plot(x)
</pre>

ペースト先はこちらの3つです。

  1. コードエディター
  2. ビジュアルエディター
  3. ビジュアルエディター(カスタムHTML)

結果

結果はこのようになりました。

  1. コードエディター
<pre class="R">
x &lt;- 1:10
plot(x)
</pre>
  1. ビジュアルエディター
<pre class="wp-block-preformatted">
x &lt;- 1:10
plot(x)
</pre>
  1. ビジュアルエディター(カスタムHTML)
<pre class="R">
x <- 1:10
plot(x)
</pre>

結果を表にまとめます。


class属性値特殊文字(<など)
コードエディタ不変変換される
ビジュアルエディター変わる変換される
ビジュアルエディター(カスタムHTML)不変不変

class属性値は言語を指定しているので、その値は変わって欲しくないですね。
<などの特殊文字は、HTMLソースでは&lt;など(文字実体参照)を使って記述します。
そのため、特殊文字が変換されるのは修正の手間が省け助かります。

まとめ

コードエディタ以外にペーストする際は、ペースト結果(class属性値・特殊文字)の修正が必要なようです。
では。


YouTube: ミサキさん

問い合わせ先
Mail: caprico.aries@gmail.com
Twitter: https://twitter.com/caprico_aries(無言フォローもお気軽に)

コメント

  1. […] […]

タイトルとURLをコピーしました