WordPressで記事を書くときに、ソースコードを見やすく表示するためのテクニックです。以前の記事 Markdown記法 とりあえずこれだけ覚えれば大丈夫 基本のチートシートと合わせてMarkdownでの記述における説明です。

利用プラグイン

Syntax Highlighter

• Syntax Highlighter for WordPress
  • 他にも複数の Syntax Highlighter 系プラグインがありますが、JetPack の Markdown と併用でソースを記載した際に、うまく表示されるのはこのプラグインだけでした。

Markdown

• Jetpack
  • Markdown で本文が記載できます。便利

Syntax の設定方法

Markdown でソースを書くときは

[code lang=text]
｀｀｀ ← 半角
ソースコード
｀｀｀ ← 半角
[/code]

としますがこの際に最初の ｀｀｀ の後に言語の設定を表記します。

html の場合

[code lang=text]
｀｀｀html
html のソースコード
｀｀｀
[/code]

php の場合

[code lang=text]
｀｀｀php
php のソースコード
｀｀｀
[/code]

javascriptの場合

[code lang=text]
｀｀｀jscript
javascript のソースコード
｀｀｀
[/code]

javascriptについて js や javascript ではNGでした。これらは直接貼り付ける方法ですが最近は一旦 Gist に投稿しておき、その後貼り付けるというような方法もありますね。

参考

• jqueryを利用したアコーディオンの実装

どちらでも便利な方で最適につかいまわしたいものです。