CMS, Program, Tips, WordPress

WordPressのMarkdownプラグインとSyntaxHighlighterを共存させる方法

エントリーはMarkdowon記法で書いています。コバニチハ。
(過去記事：Markdown記法を使うと文書作成効率が２倍になるよ！)

このブログにはMarkdownで記事を書けるように「Markdown on Save Improved」というプラグインを入れています。

あとたまにプログラム系の記事も書くので、コードの見栄えをよくするために「SyntaxHighlighter Evolved」というプラグインもいれています。

この2つのプラグイン、実は相性がものすごく悪いんです。困ったなーと思っていたんですが、先日、偶然解決策を見つけたので書いておきます。

Markdown記法で書いた文章の中に、SyntaxHighlighterを効かせたコードを書くとこうなります。

<h1>!/usr/bin/env python</h1>

<h1>-<em>- coding: utf-8 -</em>-</h1>

import urllib
import os

def main():
    hogefuga()

<h1>!/usr/bin/env python</h1>

<h1>-<em>- coding: utf-8 -</em>-</h1>

import urllib

import os

def main():

hogefuga()

なんだかHTMLタグが表示されちゃっていますね。コードの部分にMarkdownが働いてしまうのが原因です。

分かってみれば簡単でした。divでくくってあげるだけ。

<div>[hoge] ... [/hoge]</div>

というわけで、divでくくってあげると

#!/usr/bin/env python
# -*- coding: utf-8 -*-
import urllib
import os

def main():
    hogefuga()

#!/usr/bin/env python

# -*- coding: utf-8 -*-

import urllib

import os

def main():

hogefuga()

レイアウト崩れを起こさずに表示できるのでした。

WordPress + Markdownプラグイン + プログラマーな方はお試しあれ(・ω・)ﾉ

2012年07月19日｜ Posted in CMS, Program, Tips, WordPress ｜ 2 Comments »　

[…] WordPressのMarkdownプラグインとSyntaxHighlighterを共存させる方法 […]

[…] WordPressのMarkdownプラグインとSyntaxHighlighterを共存させる方法 | Azrael […]

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。