ハイライタープラグインをCrayon Syntax Highlighterに変更しました

2015年4月19日

この記事を書くまではSyntaxHighlighter Evolvedプラグインでプレーンテキストのハイライトを制御して、貼り付ける際にはAdvanced Code Buttonプラグイン(復旧作業中の様です)で囲み型ショートコードのタイプでSyntaxHilighterのプレーンテキストコードを埋め込んでいました。

WordPressで記事を書いていくためのスタイルが固定できず。記事を書きやすくするためのプラグインを作ったり、見やすく、読みやすくするための書き方をWeb上で探したり等をしている最中であります。

そんな中で発見したのがCrayon Syntax Highlighterプラグイン。

拙作のTreeview On ContentsプラグインやEasy Block Selectorプラグインを作成しているときに常々思っていた事ですが、囲み型ショートコードや、プレーンテキストのタグで埋め込むタイプのプラグインは、再編集の際のコード選択もサポートすべきだよなぁと。

これは、まさにそれを備えたハイライターです。
 実際コードを貼り付けてみると以下のように

avs2mp4.sh 20130528[tue]2430_yuyushiki_08cut.ts.org.avs yuyushiki_08 && \
avs2mp4.sh 20130528[tue]2535_aiura_08.ts.org.avs aiura_08 && \
avs2mp4.sh 20130528[tue]2540_ddhokuto_09.ts.org.avs ddhokuto_09

avs2mp4.sh 20130529[wed]2430_crimeedge_09cut.ts.org.avs crimeedge_09 && \
avs2mp4.sh 20130529[wed]2500_rdg_09.ts.org.avs rdg_09

avs2mp4.sh 20130530[thu]2200_maousama_09.ts.org.avs maousama_09 && \
avs2mp4.sh 20130530[thu]2230_mjp_09.ts.org.avs mjp_09

avs2mp4.sh 20130530[thu]2500_katanagatari_08.ts.org.avs katanagatari_08 && \
avs2mp4.sh 20130530[thu]2500_sparrows_08.ts.org.avs sparrows_08 && \
avs2mp4.sh 20130530[thu]2735_senyu_15.ts.org.avs senyu_15

 こんな感じに表示されます。

TinyMCEではpreタグの内容はクリックとともに選択されるので、EasyBlockSelectorのようにDOMオブジェクトの階層を再起解析しながら、ショートコードのタグの先端と終端を探す等というアクロバティックな方法をとらなくて済む分シンプルでいい感じです。

他の埋め込み系オブジェクトも、実のところpreタグに書いてしまった方が実装は楽そうです。

悩ましいのは囲み型ショートコードとして埋め込んだSyntaxHighlighter Evolvedの記事内のテキストがCrayon Syntax Highlighterのタグ処理とコンフリクトして誤動作して内部コードが出てしまったため、SyntaxHighlighter Evolvedを無効にせざるを得なかった事。

SyntaxHighlighter Evolvedが無効になったことで、囲み型ショートコード（[program][/program]）が記事内に露出しているので、しばらくこれをハイライターのコードの置き換えに時間を取られそうです。

現状、これを合わせて記事が３３個。

このWordPress自体、RO関連やら一部の知人やらしか知らない状態だし、全部にハイライターのコードが書かれている訳ではない事を考えると、まだ何とかなる数字か・・・

 

WordPresshighlighter,tinymce,WordPress

Posted by redchat