Markdownのスタイル周りを調整した。

変更前

変更後

h1

h2

h3

h4

h5

h6

code

引用

• リスト
• リスト
  • 子リスト
  • 子リスト
    • 孫リスト
    • 孫リスト

1. 番号リスト
2. 番号リスト

• [x] チェックリスト
• [ ] チェックリスト

---

link

対応内容

Markdownのコンポーネントを切り出し

"use client";
import ReactMarkdown from "react-markdown";

type Props = {
  content: string;
};

export default function Markdown(props: Props) {
  const { content } = props;
  return (
    <ReactMarkdown>
      {content}
    </ReactMarkdown>
  );
}

~~remarkGfmの追加~~

一旦一部記事が表示されなくなるので削除

classNameの付与とCSS追加

このStackOverflowのやり方をそのまま拝借して実施しました。

以下をMarkdownのコンポーネントに追加。

import style from "./markdown-styles.module.css";

classNameを付与。

 <ReactMarkdown className={style.reactMarkDown}>
      {content}
    </ReactMarkdown>

別途CSSを記載。

• markdown-styles.module.css

.reactMarkDown {
  margin-top: 1em;
}

.reactMarkDown h1 {
  position: relative;
  padding: 0.5em 0.5em 0.5em 1.5em;
  border-top: #319795 solid 1px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.reactMarkDown h1::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-right: 50px solid transparent;
  border-left: 50px solid #319795;
  border-bottom: 50px solid transparent;
}

.reactMarkDown h2 {
  text-decoration-line: underline;
  text-underline-offset: -3px;
  text-decoration-thickness: 10px;
  text-decoration-color: lightgreen;
  text-decoration-skip-ink: none;
  margin-top: 16px;
  margin-bottom: 16px;
}

.reactMarkDown h3 {
  margin-top: 16px;
  margin-bottom: 16px;
  text-decoration-line: underline;
  text-underline-offset: 0px;
  text-decoration-thickness: 1px;
  text-decoration-color: black;
  text-decoration-skip-ink: none;
}

.reactMarkDown p {
  margin-top: 16px;
  margin-bottom: 16px;
}

.reactMarkDown ul {
  margin-top: 8px;
  margin-bottom: 8px;
}

.reactMarkDown ul li {
  margin: 0;
}

.reactMarkDown a {
  color: #319795;
  text-decoration: none;
  font-weight: bold;
}

CSSについては、h1など一部はここから拝借しました。可愛かったので。