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

Cocoonでソースコード記述のテストを行いました。
Cocoonは現在使っているWordPressテーマです。

テスト結果は以下になります。

	文字の幅	スペース・改行	ハイライトの有無
1. preとcodeタグを使う	等幅	維持	あり
2. preタグ（class属性値：言語名）	〃	〃	あり※言語に対応
3. preタグ（class属性値：wp-block-preformatted）	〃	〃	あり

Cocoonでソースコード記述するなら、Cocoonのスタンダードである「preタグ（class属性値：言語名）」がベストのようです。

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

背景と目的

Cocoonでソースコード記述するとき、通常はclass属性値に言語を指定したpreタグを用います。
しかし、一般的には、ソースコード記述にはpreタグとcodeタグを使います。
さらに、こちらでテストをした際は、class属性値がwp-block-preformattedのpreタグに勝手に変ってしまいました。

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

WordPressでソースコード記述のテストを行いました。Rのソースコードをペーストした結果class属性値特殊文字（<など）コードエディタ不変変換されるビジュアルエディター変わる変換されるビジュアルエディター（カスタムHTML）不変

misaki-blog.com

詳しくは述べられませんが、こちらによると、wp-block-preformattedのブロックはparagraphブロックとcodeブロックの両方の性質を持っているようです。
つまり、class属性値がwp-block-preformattedのpreタグでもソースコードの記述が可能なようです。

今回は、Cocoonにおけるこれらソースコードの記述方法を整理するためテストを行ないます。

テスト方法

こちらのRコードを３つの方法で記述し、表示を確認します。

library(ggplot2)
ggplot(mtcars, aes(x=wt, y=mpg, col=cyl)) +
    geom_point() +
    facet_wrap(~cyl) +
    theme(legend.position = "none")

３つの記述方法はこちらになります。

1. <pre><code>（ソースコード）</code></pre>
2. <pre class=”R”>（ソースコード）</pre>
3. <pre class=”wp-block-preformatted”>（ソースコード）</pre>

結果

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

1. <pre><code>（ソースコード）</code></pre>

library(ggplot2)
ggplot(mtcars, aes(x=wt, y=mpg, col=cyl)) +
    geom_point() +
    facet_wrap(~cyl) +
    theme(legend.position = "none")

2. <pre class=”R”>（ソースコード）</pre>

library(ggplot2)
ggplot(mtcars, aes(x=wt, y=mpg, col=cyl)) +
    geom_point() +
    facet_wrap(~cyl) +
    theme(legend.position = "none")

3. <pre class=”wp-block-preformatted”>（ソースコード）</pre>

library(ggplot2)
ggplot(mtcars, aes(x=wt, y=mpg, col=cyl)) +
    geom_point() +
    facet_wrap(~cyl) +
    theme(legend.position = "none")

結果を表にまとめます。

	文字の幅	スペース・改行	ハイライトの有無
1. preとcodeタグを使う	等幅	維持	あり
2. preタグ（class属性値：言語名）	〃	〃	あり※言語に対応
3. preタグ（class属性値：wp-block-preformatted）	〃	〃	あり

ハイライトに関しては、class属性値に言語名を加えると、１と３も言語に対応したハイライトになります。

<pre class=”R“>

library(ggplot2)
ggplot(mtcars, aes(x=wt, y=mpg, col=cyl)) +
    geom_point() +
    facet_wrap(~cyl) +
    theme(legend.position = "none")

<pre class=”wp-block-preformatted R“>

library(ggplot2)
ggplot(mtcars, aes(x=wt, y=mpg, col=cyl)) +
    geom_point() +
    facet_wrap(~cyl) +
    theme(legend.position = "none")

まとめ

Cocoonでソースコード記述するなら、やはり、class属性値に言語を指定したpreタグを用いるのがベストのようです。
では。

—
YouTube: ミサキさん

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