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

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

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


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

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


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

  • WordPress 5.2.2
  • Cocoonバージョン: 1.9.1
  • Cocoon Childバージョン: 1.0.6



背景と目的

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

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

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

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

テスト方法

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

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

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

  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")
  1. <pre class=”R”>(ソースコード)</pre>
library(ggplot2)
ggplot(mtcars, aes(x=wt, y=mpg, col=cyl)) +
    geom_point() +
    facet_wrap(~cyl) +
    theme(legend.position = "none")
  1. <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属性値に言語名を加えると、1と3も言語に対応したハイライトになります。

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

コメント

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