[Next.js] 블로그 페이지. 마크다운 디자인

서론

[마크다운 불려오기] [마크다운 파싱]

// .\app\blog\[slug]\page.js

import Markdown from "markdown-to-jsx";

export default async function Post(props) {
  const slug = props.params.slug;
  const postRes = await fetch(`http://localhost:3000/${slug}.md`);
  const data = await test.text();
  const options = {...};

  return <Markdown options={options}>{data}</Markdown>;
}

전편에서는
public에서 불려온 md 파일을
jsx 형식으로 파싱했다.

하지만 tailwind를 사용해서
아무 디자인이 없다.

나는 tailwind에 공식문에 있는 plugin, Typography를 사용했다.
[tailwind 공식문]
[Typography github]

Typography

Typography은 tailwind의 plugin이다.
tailwind class로 css를 제어하지 않은
텍스트 위주의 요소를 꾸며준다.

Typography 설치

npm install -D @tailwindcss/typography

우선 테미널에서 npm을 사용해서 설치해야 한다.

그리고
설정 파일 tailwind.config.js에
plugins를 추가해야 한다.

파일은 next.config.js와 똑같이
app밖 폴더에 있다.

/** @type {import('tailwindcss').Config} */

module.exports = {
  ...
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Typography 사용

사용법은 간단하다.
사용하고 싶은 요소의 class를 prose로 설정한다.

// .\app\blog\[slug]\page.js - return 부분

return (
  <Markdown className="prose" options={options}>
    {data}
  </Markdown>
);

Typography 기본설정

설정 1. 회색

Typography에서는 기본 회색을 제공한다.
회색은 검은의 연한색으로
원해 색상보다 연한 부분이나
강조의 반전색 등에 많이 사용된다.

제공되는 색은
gray, slate, zinc, neutral, stone
5개 색이 있다. default는 gray이다.

사용법은 class에 prose-회색이름 을 추가한다.

// .\app\blog\[slug]\page.js - return 부분

return (
  <Markdown className="prose prose-stone" options={options}>
    {data}
  </Markdown>
);

설정 2. 사이즈

택스트 기본 크기를 지정할 수 있다.
디폴트는 prose-base : 1rem 이다.
사이즈는 sm, base, lg, xl, 2xl이 있다.

사용법은 위 회색과 동일하다.

// 예시
<div className="prose prose-sm">...</div>

Typography 커스텀

출력된 결과는 자동으로 디자인을 가진다.

만약 제공된 디자인이 마음에 들지 않으면
해당 내용을 수정할 수 있다.

방법은 class이름으로
prose-태그이름:tailwindcss이름
을 사용한다.

예시로

// 예시
<div className="prose prose-strong:text-blue-700">...</div>

이제 <div> 안에 모든 <strong>택스트는 파란색이 된다.

결과

나는 Typography가
기본틀을 제공하는 것은 좋다고 느꼈지만,
실제 결과물은 수정을 많이 했다.

수정 내용이 너무 길어서
별도 변수를 만들어서 사용했다.

const mdClass =
  "prose prose-stone prose-strong:text-green-600 prose-li:my-1 prose-blockquote:border-green-600 prose-blockquote:not-italic prose-blockquote:font-normal prose-blockquote:bg-slate-50 prose-code:rounded prose-code:py-0.5 prose-code:px-1 mt-8 p-2 markdown";

<code>, <blockquote> 태그의
앞뒤에 마크가 있는 것도 싫어서
globals.css 파일도 내용을 추가했다.

.markdown code::before,
.markdown code::after {
  content: none;
}

.markdown blockquote p::before,
.markdown blockquote p::after {
  content: none;
}

Typography 사용법 결론

1. npm 으로 설치
2. tailwind.config.js에 plugins 추가
3. 사용 요소 class를 prose 사용
4. 출력물을 보고 prose-{tagName}:{tailwindcss}으로 커스텀