Ver. 3.0 へメジャーアップデート時にマークダウンの文章が崩れるケースについて
a-blog cms Ver. 3系では、PHP8系に対応するために、マークダウンのパーサーの変更が行われています。その影響で、稀なケースではありますが Ver. 3系へメジャーアップデートをした場合に、マークダウンでデータを登録している部分の表示が崩れるといったケースを弊社で確認いたしました。
この記事では、Ver. 3系へメジャーアップデート時にマークダウンでデータを登録している部分への確認の呼びかけと、弊社で確認している表示が崩れるパターンを2パターン紹介します。
また、正しいマークダウンの形式でデータ登録ができている場合には、この記事で言及するような表示崩れが起きることはありませんので、ご安心ください。
マークダウンのパーサーを変更したことにより、Ver. 2系とVer. 3系のマークダウンパーサーでマークダウンの形式が間違っていたときにどこまでよしなに判断してくれるかというところが変わることにより、表示崩れが起きる可能性があるということです。そのため、正しいマークダウンの形式でデータ登録をしていれば問題はありません。
Ver. 3系へメジャーアップデートをする際には、マークダウンでデータを登録している部分の表示崩れがないか確認をしてください
冒頭でもお伝えしましたが、a-blog cms Ver. 3系では、PHP8系に対応するために、マークダウンのパーサーを変更しています。その影響で稀なケースではありますが Ver. 3系へメジャーアップデートをした場合に、マークダウンでデータを登録している部分の表示が崩れるといったケースを弊社で確認いたしました。
弊社で確認している限りでは、適切にマークダウンを記述している場合には表示が崩れるといったことはありませんが、Ver. 2系で使用しているマークダウンパーサーと Ver. 3系で使用しているマークダウンパーサーでは、インデントの数などが間違っている場合にマークダウンパーサーがよしなにその間違いを吸収して、HTMLを出力してくれる基準が異なるようです。
そのため、Ver. 2系のマークダウンパーサーでは多少インデントがマークダウンのルールとことなっていても問題なかった部分が、Ver. 3系のマークダウンパーサーでは、データ登録者側の意図と異なるHTMLを出力してしまい、表示崩れが発生していまうことがあります。
Ver. 3系へメジャーアップデートを行う際には、お手数ですが、テスト環境などでマークダウンでデータを登録している部分の表示崩れがないか確認することを推奨いたします。
マークダウンの表示崩れが発生する条件について
マークダウンの表示崩れが発生する条件について、弊社では2パターン確認することができたのでそちらをご紹介いたします。
リストをネストして表示している場合に、前の階層から次の階層の半角空白が6個以上存在すると、pre タグで出力される
以下は、リストのネストをマークダウンで記述する際に、1階層目から2階層目のインデントが半角空白で6個以上存在している場合の例です。
記入例
- マークダウンリスト
- マークダウンリスト
- マークダウンリスト上記のようなマークダウンを登録している場合、Ver. 2系では、登録者が意図するようなネストされた ul タグが出力されていましたが、 Ver. 3系では以下のように preタグになって出力されていまいます。
出力例
<ul> <li>マークダウンリスト<pre><code> - マークダウンリスト </code></pre> <ul> <li>マークダウンリスト</li> </ul> </li> </ul>
このように、マークダウンでネストしたリストを記述している場合には、バージョンアップ時に確認をすることを推奨いたします。
空行を挿入せずにコードブロックやテーブル、引用を記述すると、テキストとして出力される
以下の例のように、テキストに空行を空けずに続けてコードブロックを記述すると、テキストとして出力されてしまいます。
記入例
ダミーテキストダミーテキストダミーテキスト
```
console.log('a-blog cms最高!!')
```出力例
<p>ダミーテキストダミーテキストダミーテキスト<code>console.log('a-blog cms最高!!')</code></p>Ver. 2系で使用しているマークダウンパーサーでは空行を空けなくても、コードブロックとして出力してくれていましたが、Ver. 3系で使用しているマークダウンパーサーではテキストとコードブロックの間に、空行を空けて以下のように記述する必要があります。
ダミーテキストダミーテキストダミーテキスト
```
console.log('a-blog cms最高!!')
```また、この現象はコードブロックだけでなく、テーブルや引用でも同様の現象が確認されました。
コードブロックや、テーブル、引用をマークダウンで記述している場合には、バージョンアップ時に確認をすることを推奨いたします。
最後に
この度はご迷惑をおかけしてしまい申し訳ございません。
Ver. 3系へバージョンアップ予定のサイトでマークダウンでデータを登録している箇所がある場合、テストサイトなどで表示崩れが起きてないかのご確認をお願いいたします。
今後とも a-blog cms をよろしくお願いいたします。
本件に関するお問い合わせ先
本件についてご不明点などありましたら以下のお問い合わせよりご連絡ください。
有限会社アップルップル
メールアドレス：info@a-blogcms.jp
お問い合わせフォーム：https://www.a-blogcms.jp/contact/