마크다운을 tailwind css로 스타일링

소개

사용 기술

Next.js

Tailwind css

react-markdwon

위 기술로 마크다운 스타일링

Tailwind css에서 기본 요소의 스타일링을 지우는 경우가 많습니다.
그대로라면 마크다운이 작동하지 않으므로 스타일링합니다.
마크다운에만 영향을 줍니다.

(react-markdown에서 목차를 만든 기사 가 있어, 그 다음부터 써 갑니다. Tailwind 관계없고, 보지 않아도 문제 없습니다.)

(Tailwind 설정이 불필요한 사람은 여기에서)

소스 코드

Tailwind 설정

라이브러리 설치

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

구성 파일 만들기

npx tailwindcss init -p

다음이 만들어집니다

postcss.config.js

tailwind.config.js

(이번은 하지 않습니다만 보통은) postcss.config.js로 사용하지 않는 css를 읽어들이지 않게 합니다.

purge: [],
↓
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],

기타 Tailwind css 설정

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

globals.css의 처음부터 쓰여진 것을 모두 지우고 ↑를 기술합니다.
Unknown at rule @tailwind가 표시된다고 생각하지만 vscode 설정"css.validate": false 설정하면 사라집니다.

_app.js에서 다음이 있는지 확인합니다.
그렇지 않으면 추가하십시오.

import '../styles/globals.css'

이제 Tailwind css를 사용할 수 있습니다.

마크다운 스타일링

globals.css 수정

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.markdown ol {
  @apply list-decimal pl-10;
}
.markdown ul {
  @apply list-disc pl-10;
}
.markdown h4 {
  @apply text-lg border-b border-black my-5;
}

.markdown h2 {
  @apply border-red-500 border-l-4 text-2xl;
}
.markdown ul {
  @apply list-disc pl-10;
}

예제 스타일의 내용은 적절하지만
자신이 좋아하는 요소에 좋아하는 스타일을 붙여보세요.

.markdown 要素の指定 {
  @apply つけたいスタイル;
}

요소의 지정으로 전부( * )등도 지정할 수 있습니다.

.markdown 이용하기

마크다운의 부모에게 「markdown」클래스를 붙입니다.

<div className="markdown">
  <ReactMarkdown>
     {body}
  </ReactMarkdown>
</div>

이제 마크다운으로 스타일링할 수 있었습니다.

덤

이전의 기사 의 계속에 , 좀 더 스타일링을 더해 목차같이 합니다.



index.js

import ReactMarkdown from "react-markdown";

const body = `
## タイトル1
* おはよう。
* おはよう。
* おはよう。
* おはよう。
* おはよう。
* おはよう。
* おはよう。
* おはよう。
* おはよう。
## タイトル2
1. こんにちは。
2. こんにちは。
3. こんにちは。
1. こんにちは。
2. こんにちは。
3. こんにちは。
1. こんにちは。
2. こんにちは。
3. こんにちは。
## タイトル3
#### こんばんは
#### こんばんは　
#### こんばんは
#### こんばんは　
#### こんばんは　
#### こんばんは`;

export default function Home() {
  const H2 = ({ node, ...props }) => {
    return (
      <div>
        <h2 id={node.position?.start.line.toString()}>{props.children}</h2>
      </div>
    );
  };

  const ankerLink = ({ node, ...props }) => {
    return (
      <a
        className="list-item hover:bg-gray-200"
        href={"#" + node.position?.start.line.toString()}
      >
        {props.children}
      </a>
    );
  };

  return (
    <div className="m-auto w-full max-w-3xl">
      {/* 目次 */}
      <div className="p-3 m-10 bg-gray-100 border border-black border-dashed">
        目次
        <ol className="p-2 list-decimal list-inside">
          <ReactMarkdown
            allowedElements={["h2"]}
            components={{
              h2: ankerLink,
            }}
          >
            {body}
          </ReactMarkdown>
        </ol>
      </div>

      {/* 本文 */}
      <div className="markdown">
        <ReactMarkdown
          components={{
            h2: H2,
          }}
        >
          {body}
        </ReactMarkdown>
      </div>
    </div>
  );
}

조금 목차처럼 보였다.

참고 기사