[WordPress.com] Markdown 記法でソースコードを貼る

!

WordPress.com の記事編集機能の仕様が随時変更されているようです。2014-09-09現在でのソースコードの WordPress.com への貼り付けの傾向についての私自身の認識は以下の記事のとおりです。

 

これまで、HTML や CSS、ショートコードなどをブログの記事中に表示するとき、文字化けを起こしたりして結構気を使っていました。

しかしながら、どうやらそういったことに悩む必要はもうあまりなさそうです。

 

!

Tab または4文字の半角空白での整形済みテキスト表示はできなくなっているようです。(2014-08-04追記)

 

WordPress.com の場合、Markdown 記法を使えるように設定し、

![画像](http://comguideja.files.wordpress.com/2013/11/accessmenubarapps-43.png)

Tab または 4文字の半角空白を各行の先頭に追加するなどすればいいようです。

![画像](http://comguideja.files.wordpress.com/2013/11/accessmenubarapps-49.png)

rect3015

ソースコードの部分を ``` で囲うか、 ```css,``` 等で囲うなどすると

画像

色付きの表示になったりする(ソースコード表示専用の機能が作動する?)ようです。

#categories-4 .cat-item-25788,
#categories-6 .cat-item-25788 {
display: block;
visibility: hidden;
}

また、ショートコードの記述を表示するためにはショートコードの括弧を二重にすればいいようです1 。(2013年11月30日現在、mac の Google Chrome で表示に不具合(前後にタグが追加される)がありますが、あえてそのままにしておきます。2013年12月2日現在、ソースコードに URL を含む場合、Google Chrome の拡張機能「Clickable Links」と干渉し、タグ等が表示されることを確認しています。)

画像

rect3015

<div class="video-container">[youtube https://www.youtube.com/watch?v=3KBSHG24O1w]</div>

また、文章中の一部を文字化けさせたくないときには「`」で囲えばいいようです。

例えばこんな感じです <ins>

記事の編集画面ではこんな感じで入力しています。

画像

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。