html로 변환한 마크다운에서 정규표현식으로 html 태그 제거
문제 Contentlayer의 예제를 따라하면 글 목록에 글 본문 전체가 출력된다. app/page.tsx의 <PostCard> 컴포넌트에 글 본문 전체를 넣도록 되어 있다. <div>에 dangerouslySetInnerHTML로 post.body.html을 통째로 전달한다. function PostCard(post: Post) { return (
Tag: #markdown
마크다운에 깃허브 스타일 적용하기
github-markdown-css 이전에는 직접 마크다운 스타일도 만들어봤지만 너무 귀찮고, 익숙한 깃허브 스타일을 사용해보고 싶어서 검색해봤다. github-markdown-css를 바로 찾을 수 있었다. 사용법은 간단하다. CSS 파일(github-markdown.css 등)을 import 하고, 마크다운을 감싸고 있는 컨테이너 태그에 markdown
Contentlayer에서 highlight.js로 코드블럭 하이라이트
마크다운에 깃허브 스타일을 적용했지만, 코드블럭은 하이라이트되지 않는다. Contentlayer에서는 플러그인 설치와 설정만 하면 쉽게 코드를 하이라이트 할 수 있다. Contentlayer 공식 문서에서 rehype-highlight를 사용했기 때문에 그대로 따라했다. Contentlayer 마크다운 하이라이트 예시 rehype-highlight 설치 r
Contentlayer로 마크다운 파일 읽기
Contentlayer란 Contentlayer는 콘텐츠를 JSON으로 변환해서 쉽게 사용할 수 있게 해주는 도구이다. 프로젝트 폴더에 있는 마크다운 파일을 Next.js에서 사용하기 위해 도입했다. Sources 정식으로 지원하는 소스는 Sources > Files">파일이다. (2023년 11월 기준) [원격 파일][contentlayer-remot