• 2023年4月22日
• このページは約1分で読めます

Markdownのリンクを新規タブで開く

前提

• remark, remark-rehype, rehype-stringify がインストール済みであること
• npm i --save-dev remark remark-rehype rehype-stringify

対応方法

rehype-external-linksを使って target 属性を指定します

設定方法

rehype-external-linksをインストールします。

npm i --save-dev rehype-external-links

コンポーネント markdownToHtml.js が以下のようなものだとします：

import { remark } from "remark";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import rehypeExternalLinks from "rehype-external-links";

export const markdownToHtml = async (markdown: string) => {
  const result = await remark()
    .use(remarkRehype, { allowDangerousHtml: true })
    .use(rehypeExternalLinks, {
      target: "_blank",
      rel: ["noopener noreferrer"],
    })
    .use(rehypeStringify)
    .process(markdown);
  return result.toString();
};

markdownToHtml.js を使ってページを表示します。

import { InferGetStaticPropsType, NextPage } from "next";
import { markdownToHtml } from "../../lib/markdownToHtml";

type Props = InferGetStaticPropsType<typeof getStaticProps>;

const Home: NextPage<Props> = ({ html }) => {
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: html,
      }}
    ></div>
  );
};

export const getStaticProps = async () => {
  return {
    props: {
      html: await markdownToHtml(
        "[rehype](https://github.com/rehypejs/rehype)"
      ),
    },
  };
};

export default Home;

このように出力されます。

<div>
  <p>
    <a
      href="https://github.com/rehypejs/rehype"
      target="_blank"
      rel="noopener noreferrer"
    >
      rehype
    </a>
  </p>
</div>