Markdown で書いたドキュメントのリンクから別タブで開くようにするための処理を書いていきます。
Markdown を表示する
index.html に JavaScript を使って Markdown を表示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- head -->
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script>
const markdown = `
## Markdown ドキュメント
### リンク一覧
[私のQiita](https://qiita.com/diskszk)
[私のGitHub](https://github.com/diskszk)
`;
(function () {
const div = document.createElement("div");
div.innerHTML = marked(markdown);
document.body.appendChild(div);
})();
</script>
</body>
</html>
index.html ファイルをブラウザで開くと Markdown を表示していることが確認できます。
developer tool で確認すると、当然 href 属性しか設定されていません。
aタグに属性を追加する
リンクをクリックした時に別タブで開かせたいので、 a タグに target="_black" と rel="noopener noreferrer の属性を追加する処理を書いていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- head -->
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script>
const markdown = `
<!-- markdown の内容 -->
`;
(function () {
const div = document.createElement("div");
div.innerHTML = marked(markdown);
document.body.appendChild(div);
})();
+ document.addEventListener("DOMContentLoaded", function () {
+ const links = document.querySelectorAll("a");
+ links.forEach(function (link) {
+ link.setAttribute("target", "blank");
+ link.setAttribute("rel", "noopener noreferrer");
+ });
+ });
</script>
</body>
</html>
これでリンクをクリックした時に別タブで開くようになりました。
参考