【WordPress-com】 ソースコードの貼り付けはオーソドックスに <pre><code> タグで行ったほうがいい?

私自身は、最近までショートコード [code] を使って、HTML や CSS を記事内に貼り付けていましたが、新しい記事編集機能で記事を開くと文字化けを起こすことに最近、気づきました。なお、この現象は、新しい記事編集機能でのみ生じる現象で、昔からの記事編集機能(クラシックモード)や、レンタルサーバ等にインストールして使うタイプの WordPress での記事編集機能では生じていません。

投稿を編集_—_WordPress_com

新しい記事編集機能で記事を開いた場合、ショートコードを使って貼り付けられた HTML が文字化けを起こしているようす

この現象はビジュアルモードだけで生じているわけではなく、ブログ上でも同じ症状を示します。

ショートコードでのソースコードの貼り付けテスト____c_demo

ショートコードで貼り付けた HTML の記述を含む記事を新しい記事編集機能で読み込み、その記事に更新をかけた後のブログ上での表示

一方、ソースコードをビジュアルモードの状態で貼り付けた後、HTML の <pre>タグと <code> タグで囲った場合では、新しい記事編集機能で保存をかけたりしても文字化けを起こすことはありません。 1

投稿を編集_—_WordPress_com

<pre><code> タグで HTML の記述を表示しているようす(ビジュアルモード)

そういうわけで、2015-02-18時点での判断では、長いものや更新履歴を管理したいものについては、これまでどおり Simplenote で管理していこうと思っていますが、記事に直接貼り付ける HTML 等の記述については、これまでのショートコードを使った方法から、<pre> タグと <code> を使った方法に変更しようと考えています。

なお、Markdown 記法を使ってソースコードを貼り付ける方法もありますが、2015-02-18時点では以下のようにビジュアルモードでの表示がいまいちなので、私自身はソースコードを貼り付けるときには Markdown 記法は使わないようにしようと考えています。

投稿を編集_—_WordPress_com

Markdown 記法で HTML の記述を表示させているようす(ビジュアルモード)


  1. 私自身の解釈だと、文字化けする・しないと <pre><code> の使用とは直接関係があるわけではなく、ビジュアルモードの性質によるとの認識です。言い換えると、<pre><code> タグの使用は、あくまで、あとからソースコードの部分の背景色を変えるなどの体裁を整えるため、との認識です。