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(無言フォローもお気軽に)

スポンサーリンク
記事を書いている人
ミサキ

プログラマ(@東京の国立研究所)として働きながら,占い師(の卵)としても活動しています.そのため,占いモニターを定期的に募集しています!⇒占いモニターのページ.実は,天文学の博士でもあります☆彡

詳しいプロフィールはこちら

ミサキをフォローする
WordPress
スポンサーリンク
ミサキをフォローする
プログラマー&天文博士&占い師 ミサキのブログ

コメント

  1. […] […]

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