Wizard In The Market
システムトレードの魔術師

*

SyntaxHighlighter EvolvedとTinyMCEの組み合わせでバグる

SyntaxHighliter Evolvedのショートコード([code][/code]等)を使うと、TinyMCE Advancedにてテキストモードからヴィジュアルモードに切り替えた際に、投稿したHTMLが欠損するという現象に悩まされて、昨晩夜明け前まで数時間格闘していました。その結果、やっとバグの特定ができました。

問題の原因

<pre>タグが自動挿入される

SyntaxHighliter Evolvedのショートコードは、”Stop Removing the <p> and <br /> tags”オプションが有効の際には、編集画面でテキストモードからヴィジュアルモードに変更するとき<pre></pre>タグが自動挿入されます。

<pre><pre></pre></pre>によるバグ

ただ、ショートコードの外側にpreタグに自動変更されるとタグの欠損による表示バグが発生します。

編集画面上は、以下の様なコードになっています。

元のコード

ヴィジュアルモードに変更で自動整形されたコードです。

投稿後、実際の表示の際には、一旦次のように置き換わります。

こうなると、preタグ内には通常はpreを入れ子にする状態となってしまい、本来のpreタグの使い方と異なってしまいます。このまま記事を投稿すると、HTML構造が壊れてしまいます。

記事中は、このようなにが自動整形で</pre>の一つが削除されてしまうようです。決まりが悪いのは、記事編集画面になると、ショートコード反映前の状態が表示されるためもとのコードが表示されてしまうことです。

これでは、編集画面上ではHTML構造が壊れているわけではないので、何が問題でこのような形になってしまっているか原因の特定がとても難しくなっていました。

バグレポートとして、SyntaxHighlighter Evolvedのフォーラムに投稿しておきました。

解決策

TinyMCE Advancedのオプションをオフにする

“Stop Removing the <p> and <br /> tags”のオプションをオフにすることで、とりあえずは解決すると思います。ただ、オプションをオフにしたとしても、ショートコードがpreタグで囲まれている場合の表示バグは存在しています。そのため、次の解決策のほうがお勧めです。

ショートコードを使わないこと

SyntaxHighlighter Evolvedのショートコードを使わず、<pre class=”brush:lang”></pre>のように、ソース挿入の際はpreタグで対応することです。私の場合は、SyntaxHighliter Evolvedではショートコードを使わない使い方ができないため、Crayon Syntax Highlighterに切り替えました。

 

個人的にTinyMCEはとても便利なので、テキスト、ヴィジュアルモードの変更でHTMLが崩れることのないようなWordPress環境構築に頑張っていこうと思っています。

Crayon Syntax Highlighterの使い方

明日に使い方の記事を投稿する予定です。お楽しみに!

にほんブログ村 為替ブログへ 
Fx-Kirin

About Fx-Kirin

2009年10月にFXを開始、翌年2010年5月から脱サラをしてFX業界に専念。 2012年10月頃から本格的に勝ち始め、一月で資産を倍にする、2年半月間負けなし等、安定した収支で2013年11月に生涯FX収支が1億を超える。 投資スタイルはシステムトレード。プログラミングの知識がほぼない状態から、独学で自分がしたいと思うことであればほぼ実現することが可能なレベルまで成長。好きな言語はRuby, Python。必要となればC++からVBA、Pascal等なんでも行う。MT4/MT5のプログラミングも得意。 2011年にはFXで稼いだ資金をもとにシンガポールに移住し、留学も兼ねて起業をチャレンジするほど、ビジネスを興すことに熱意がある。国内の業者を主に使い始めたことから、2012年に帰国。零細株式会社経営中。

Adsense

  • このエントリーをはてなブックマークに追加
  • Pocket
  • 67 follow us in feedly

関連記事

SEO効果大!自動で記事に目次を追加しよう

今日はWordPressに目次を追加することのできるプラグインのご紹介です。目次って案外あなどれなくて、最近

記事を読む

ログイン試行回数を制限して、ログインのセキュリティを向上しよう!

一昨日の記事からの続きで、ログイン関連のセキュリティのプラグインのご紹介です。 [bm url="ht

記事を読む

WPBlogではPHPや外観の設定を変更してもすぐには反映されない

先日の記事にて、WPBlogがお勧めな理由をご紹介しました。 WordPressで運用を始めるならWPBlogがお勧め

記事を読む

WordPressで運用を始めるならWPBlogがお勧め

少しでも生活の足しになれば・・・。 FX専業投資家として活動を続けてきていますが、この度幸いなことに結婚をして子宝

記事を読む

高さが変?Stinger3でTwitterの挿入のスマホ表示のバグの修正

ブログでのTweetの紹介はとっても便利 Twitter EmbedというWordpress用プラグインがあります。

記事を読む

おしゃれなTwitter Cardsをプラグインで簡単に表示する方法

Twitter Cardsはツイッターをしていると見ることが多い、おしゃれでなかなか良い感じの機能です。今日は記

記事を読む

WordPress Popular Postsにはてなブックマーク数を表示!

こんにちは、キリンです。最近は日銀の追加緩和の影響でなかなかブログ記事に集中できない日が続きます。((ブログ

記事を読む

これが原因か!TinyMCE AdvancedのStop Removingオプションは使わなほうが良い件

WordPressを使い建ての頃は、エディタの独特さと付き合うのが苦手でした。全部HTMLで作成してももちろ

記事を読む

神プラグインWP Editorにカスタムボタンを追加するには

先日の記事からの延長でご紹介です。 WordPressには絶対に入れた方がいい WP Editorが便利すぎる件 |

記事を読む

乗っ取られてからでは遅い!WordPressのログインのセキュリティを向上

WordPressはBrute Force Attackに弱い [bm url="http://wpdocs.sou

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Adsense

joblib によって謎のバグが起こる

joblib 0.14.1 にて確認.0.13.2 だと起こらない.import joblib を消

Fixing kernel error AMD-Vi: Event logged IO_PAGE_FAULT on Ryzen Machine

My pc was periodically shut down on 7:40 am JS

Ubuntu で仮想ディスプレイを使う

雑多な備忘録ですが、せっかくなので残しておきます。 Ubuntu 18.04 の resolv.c

PYPIへの登録を10秒でできるようになる方法

pip 使ってますよね Pythonを使っている人であれば、pip installでライブラリ

The art of debugging with GDB, DDD, and Eclipse の読書メモ

GDBの勉強がしたくて、下の本を原著で読んでみました。10年前の本だけど全然現役でした。

→もっと見る

PAGE TOP ↑