🎩

久々にmarked.js を使って「およよ」となった件

2025/05/30に公開

 1. はじめに5年以上使っていなかったmarked.js の最新バージョンを使ってみたところ、HTML表示が崩れるようになってしまいました。ひとまず解決したので書き留めておきます。
読み手の対象：
5年以上前の開発文書のメンテナンスをされる方
marked.js を使っている方
クライアントサイドのJavascript を使ってHTML表示されている方

 2. 結論v4.0.0(2021-11-02)の仕様変更があったことが判明。たった1行のみの変更で無事表示崩れが解決しました。
変更前の表示結果
# markdown だよ ## markdown だよ ### markdown だよ 
ソースの変更前

content.innerHTML = marked(markdown.innerHTML);

→

ソースの変更後

content.innerHTML = marked.parse(markdown.innerHTML);
marked を使ったHTML文書はこちら
----- 　
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Index</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.7/marked.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
</head>
<body>
<div id="body">
<!-- text  -->
<div id="markdown">
# markdown だよ
##  markdown だよ
###  markdown だよ
</div>
<!-- text  -->
<div id="content"></div>
# 
</div>
<style>table, th, td { border: 1px solid black;} </style>
<script>
content=document.getElementById("content");
markdown=document.getElementById("markdown");
content.innerHTML = marked.parse(markdown.innerHTML);
body.removeChild(markdown);
hljs.initHighlightingOnLoad();
</script>
</body>

 3. 問題解決のアプローチ地道にトライ＆エラーを試すことに・・・。調べた方は以下。
(1) 最新のバージョンを試す(v15系) →  動かない

(2) いつから動かなくなったかをmarkdedのバージョンを一つ一つ試す
     0.3.2 → v15系(動かない) ->　v14系(動かない) ->　0.3.3(動く) ... 0.4.0(動く) ->
     .... --> v3系(動く!!) -> v4系(動かない!!!!）
(3) github のリリース情報を調べる

v4.0.0

から、「BREAKING CHANGES」のキーワードがここにありました。

(4) HTML文書の修正

※highlight.js のCDN参照も古かったので、あわせて最新化

 4. まとめ生成AI時代にひとつひとつ調べるのは手間でしたが、問題解決して何より。コーヒーがうまい。
過去の文書の継承ができることに感謝。OSSのメンテナーの方々に感謝です。

1. はじめに

2. 結論

3. 問題解決のアプローチ

4. まとめ

Discussion