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タグに勝手に変ってしまいました。

詳しくは述べられませんが、こちらによると、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つの記述方法はこちらになります。
- <pre><code>(ソースコード)</code></pre>
- <pre class=”R”>(ソースコード)</pre>
- <pre class=”wp-block-preformatted”>(ソースコード)</pre>
結果
結果はこのようになりました。
- <pre><code>(ソースコード)</code></pre>
library(ggplot2)
ggplot(mtcars, aes(x=wt, y=mpg, col=cyl)) +
geom_point() +
facet_wrap(~cyl) +
theme(legend.position = "none")
- <pre class=”R”>(ソースコード)</pre>
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”>(ソースコード)</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(無言フォローもお気軽に)
コメント