Markdownで作ったhtmlファイルのページ内リンク(アンカー)がIEで使えない

Question

#状況
VScode上でMarkdown Preview Enhancedを使い、HTMLで文章を書いているのですが、
Markdownで作ったhtmlファイルのページ内リンク(アンカー)がIEで使えません。

Markdown Preview EnhancedをインストールしたVScode上で

[ほげ](#ほげ)
#ほげ

としてヘッダー「ほげ」にアンカーを作ります。
そしてCtrl+K→Vを押してプレビュー画面を表示させます。
そしてプレビュー画面を右クリックし、html化します。

そしてそのhtmlをChromeで開くとアンカーは使えますが、
IEで開くと、アンカーは使えません。

そのとき生成されるhtmlのソースがこれです。

...
<a href="#%E3%81%BB%E3%81%92">&#x307B;&#x3052;</a><br>
URL Standard&#x3067;&#x306F;&#x3001;URL&#x306E;
...
<h1 class="mume-header" id="%E3%81%BB%E3%81%92">&#x307B;&#x3052;</h1>
...

#動作
調べたところ、このアンカーというのは、html化する際、
まずヘッダーの名前から自動的にIDを生成して、
<h1 class="mume-header" id="ヘッダー名">ヘッダー名</h1>
としてヘッダーを作ります。

そしてマークダウン上で
[](#ヘッダー名)
と書くと、html化する際、
<a href="#ヘッダー名"></a>とすることで、アンカーを作っているようです。

#経緯
昔はLatin文字以外をヘッダーにしたら、
たいていidがおかしくなって、アンカーは使えなかったらしいです。

Latin以外はURLエンコーディングしてアンカーを使えるように
pull requestしてくれた人がいたらしいです。

Markdown-it の markdown-it-named-headers plugin で custom slugify を設定する

ただ、URLエンコーディングはIEではIDとして使えないようです。

状況としては
ページ内リンクが日本語だとIEでリンクが効かない

このブログ記事と同じ問題です。

#謎

ただこの問題が単純じゃないのは、下記のサイト(Qiita)のようにヘッダーにURLエンコーディングされたIDを使っていても、
IEでも正しくアンカーが使える場合があるようです。

[Qiita Markdown記法]ページ内リンク・注釈・折りたたみ等

#回答お願いします
この謎な挙動が解明され、IEでもMarkdownで作ったhtmlをスムーズに使えるようになると大変助かります。

#環境
Windows 10 Pro
Visual Studio Code 1.30.1
Markdown Preview Enhanced 0.4.3

Comments

[退会済みユーザー]

markdown とは関係なく、Markdown Preview Enhanced で生成された html を IE で表示させると、a タグが適切に表示されない。と読み取ったのですが、正しいですか？再現するコードを質問に記述すると回答しやすいと思います。

[SolKul]

おっしゃるとおり、Markdown全体の問題ではなく、Markdownをhtmlにパースするモジュールの問題かもしれませんが、
Markdownをhtmlにパースするプラグインはいくつかあるようで、Markdown Preview Enhancedだけの問題ではないようです。

この問題に対するPull RequestもVScode全体に対するものですし
https://github.com/Microsoft/vscode/issues/20626

ただ、再現するコードを正確に質問文に記載してなかったのはこちらの落ち度です。
付け加えます。

Answer 1

oikashinoaさんのヒントをもとにパーサーをいじってみました
Extend Markdown Parser
を参考に、

C:\Users\ユーザー名.mume\parser.js
のparser.jsを編集します

module.exports = {
  onDidParseMarkdown: function(html) {
    return new Promise((resolve, reject)=> {
      var regex=RegExp('id=\".*%.*\"')
      while(regex.test(html)){
        html = html.replace(/(id=\".*)%(.*\")/g, '$1$2')
      }

      var regex2=RegExp('\<a.*href=\".*%.*\"')
      while(regex2.test(html)){
        html = html.replace(/(\<a.*href=\".*)%(.*\")/g, '$1$2')
      }
      return resolve(html)
    })
  }
}

正規表現を使って%を除去しています
単純に正規表現とreplaceだと一回しか%を除去できないので
while文も使っています。

ただもっといい方法があるかもしれないです。

これで

<a href="#E381BBE38192100">ほげ100%</a>
<h1 class="mume-header" id="E381BBE38192100">ほげ100%</h1>

のように%が除去でき、IEやEdgeでもアンカーが使えるようになりました。

oikashinoaさんありがとうございました。

Comments

[oikashinoa]

おお動いたのですね。おめでとうございます。

[SolKul]

ありがとうございます。

Answer 2

スマホから書き込みなのと当方IEが無いのでアイディアレベルの書き込みです。

Markdown Preview Enhancedのドキュメント見ると成形用のパーサーが呼べるようです。
アンカーとaタグからurlエンコード後の%を削るパーサーを書けば対処出来ませんか？