質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.64%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 986

SolKul

score 8

状況

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • te2ji

    2019/07/26 07:49

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

    キャンセル

  • SolKul

    2019/07/26 07:56

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

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

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

    キャンセル

回答 2

+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さんありがとうございました。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/18 21:30

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

    キャンセル

  • 2019/08/18 22:27

    ありがとうございます。

    キャンセル

checkベストアンサー

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる