4月 032011
 

 

これまで記事にコードを載せるとき  Syntax Highlighter EvolvedSyntax Highlighter for WordPress を使ってきました。

# dd_rhelp /dev/sdd6 /media/WD10EACS/disk0.dd

↑ こーゆーの

コードを綺麗に色付けしたり、コピペ出来るアイコンと一緒に貼ることが出来たりするんですけども、その記事をビジュアルエディター(TinyMCE/TinyMCE Advanced)で開いてしまうとエディタがコードを勝手に整形してしまいコードがグチャグチャに壊れるという難点があったりします。

まあ事前にわかっていたことですし、 『HTMLモードで開けばいいだけじゃん』 とか軽く考えて設置し、以降そんなものだと諦めて使っていました。使うときは下記のような運用。

  1. ダミーの下書き記事を作って常時置いておく
  2. 記事を編集しようとするとき、記事中にコードが無いか事前に確認
  3. コードのある場合はまずダミー記事を開きHTMLモードか確認
  4. もしビジュアルエディタになっていたらHTMLモードにする
  5. お目当ての記事を開いて編集
  6. 編集中、HTMLモードからビジュアルエディタモードへ切り替えるのはNG

こんな感じで2年ほど使っているうち・・・・段々と面倒になってきました><。いつの間にかコードを載せるのが億劫になってる自分に気付きました。これではメモ帳ブログとしての目的を果たせてません。

あと、おっちょこちょいの自分は間違ってビジュアルエディタで開いてしまって知らないうちに自動保存機能で上書きされ 『やっちまったぁーーふぁーっく!』 ってことが数ヶ月に一度くらい起きてたり。

ええ。最後に起きたのは昨日です。ふぁーっくふぁーーっっく!

 

さすがにヤバイだろ(この期に及んで何も対策しない自分が)と思い調べてみると、 Google Syntax Highlighter HF Editon という素晴らしいプラグインがあるじゃないですか。グラシァス!速攻乗り換えて解決しました。

PS Disable Auto Formatingmitsurin改造版 との併用も問題なく使えているようです。これで暫く運用してみようと思います。

 

使いかたと注意点

コードを挿入するときは[HTMLモード]にして、

<pre class="brush:php;">
ここに挿入したいコードを書く
</pre>

というふうにpreで囲って一旦保存する。これだけ!

※ HTMLモードでコード書いたら、そのまま一旦保存すること
※ (保存せずにビジュアルに切り替えると壊れます)
※ 保存以降は HTMLモード~ビジュアルエディタをいくら切り替えても大丈夫


他のハイライト系からの乗換えで過去記事の修正が必要な場合

過去に SyntaxHighlighter 等の違うプラグインを使用して書いていた記事は、そのプラグインを停止すると[PHP]などのタグがまんま表示されてしまいます。syntax-highlighterとの共存も可能のようなので有効のままにして目を瞑っておこうかと。

これは WordPress Database Backup で吐かせたSQLファイル(チェック全部入りで)をテキストエディタで一括置換するというお手軽な方法で直せました。

  • WoedPressDatabaseBackupの[コンピュータにダウンロード]でSQLファイルを落とす。
  • それをテキストエディタ(UTF8のBOM無しが扱えて一括置換出来るエディタなら何でも可)で開く。
  • エディタの置換機能で今まで使っていたタグを置換する。

< 自分の場合>
開始タグの [sourcecode language=”bash”]  と [sourcecode language=”php”]  と [sourcecode language=”plane”] と [php] を <pre class=”brush:php;”> に置換 終了タグの [/php] と [/sourcecode] を </pre> に置換

以上でOKでした。

 

コードの挿入テスト

function removePrePost($post_content = '') {
	$preStart = '<pre>\n<pre class="syntax-highlight:';
	$preEnd = addcslashes('</pre>\n</pre>', '/');
	$post_content = preg_replace("/$preStart/i", '<pre class="syntax-highlight:', $post_content);
	return preg_replace("/$preEnd/i", '</pre>', $post_content);
}

(おおお、、何度記事をイジっても壊れない・・・これが当たり前なんだろうけど嬉しいなー)

 

いちお広告もテスト

■ WordPress 3 サイト構築スタイルブック
Amazon価格:10060円 1個の新品

(欲しい物リストに追加)
WordPress 3 サイト構築スタイルブック
Related Posts Plugin for WordPress, Blogger...

 返信する

以下のHTML タグと属性が利用できます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">