02. MDX 파일 파싱 세팅

개요

이제 remote-mdx를 설치하여 mdx파일을 html로 변환해서 파싱해보겠습니다.

npm install @next/mdx @mdx-js/react @mdx-js/loader

이전글에서 MDX_Body.tsx를 생성했었는데, 가장 중요한 부분입니다.
MDX_Body에게 어떤 내용을 파싱해서 가져다 줄 것이고,
어떤식의 포맷을 적용시킬지 세팅해야 합니다.

next.config.js 세팅

next.config.js

javascript

const withMDX = require('@next/mdx')({
    extension: /\.mdx?$/,
});
 
module.exports = withMDX({
    pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
    webpack: (config, { dev, isServer }) => {
        config.module.rules.push({
            test: /\.mdx?$/,
            use: ['raw-loader', '@mdx-js/loader'],
        });
 
        return config;
    },
});

next.config.js에서 MDX 파싱로더를 같이 사용하도록 설정합니다.
설정은 따로 더 추가적인 설정은 없으므로 그대로 사용하셔도 되겠습니다.

MDX_Body 세팅

components/mdx/index.tsx

tsx

 
const options = {
    keepBackground: true,
    theme: {
        dark: 'dracula',
        light: 'github-light',
    },
    defaultLang: {
        block: 'js',
        inline: 'js',
    },
};
 
const Mdx_Body = async ({ content }: { content: string }) => {
    return (
        <MDXRemote
            options={{
                mdxOptions: {
                    remarkPlugins: [
                        // GitHub Flavored Markdown
                        remarkGfm,
                        // Accessibility for emojis
                        remarkA11yEmoji,
                        // Line breaks in MDX
                        remarkBreaks,
                    ],
                    rehypePlugins: [
                        // Pretty Code Block (Shiki)
                        [rehypePrettyCode, options],
                        rehypeSlug,
                    ],
                    format: 'mdx',
                },
            }}
            source={content}
        />
    );
};
 
export default Mdx_Body;

MDX_Remote는 remarkPlugin과 rehypePlugin을 지원한다.
remark는 서식에 관여하고 rehype는 스타일에 관여합니다.

fec/remark-a11y-emoji : 마크다운내 이모티콘을 지원합니다.
remark-breaks : 마크다운 내 공백을 직접 인식해서 개행합니다.
remark-gfm : 깃허브 추가 마크다운 문법을 제공합니다.
rehype-slug : h1,h2등 특정 태그에 적용 명칭을 붙여줍니다. toc 설계가 간편해집니다.
rehype-pretty-code : 코드블럭의 디자인을 도와줍니다.
tailwindcss/typography : 마크다운의 기본적인 스타일을 잡아줍니다.

해당 블로그에는 위의 6개의 플러그인을 사용합니다.
플러그인의 적용법은 간단한데, 대부분 그냥 설치하고 위와같이 할당해주면 적용이됩니다.

rehype-pretty-code의 경우 수많은 스타일을 지원하므로, 링크를 참조해서 원하는 테마의 코드를 적용하면 됩니다.

근데 위의 플러그인중에서는 tailwindcss/typography는 적용되어 있지 않아보입니다.
이는 플러그인으로 추가하는게 아니라 별개의 설정이 필요합니다.

typography 세팅

tailwind.config.ts

typescript

import type { Config } from 'tailwindcss';
const defaultTheme = require('tailwindcss/defaultTheme');
 
const config: Config = {
    darkMode: 'class',
    content: [
        './components/**/*.{js,ts,jsx,tsx,md,mdx}',
        './app/**/*.{js,ts,jsx,tsx,md,mdx}',
        './utils/**/*.{js,jsx,ts,tsx,md,mdx}',
        './posts/**/*.{js,ts,jsx,tsx,md,mdx}',
    ],
    theme: {},
    plugins: [require('@tailwindcss/typography')],
} satisfies Config;
export default config;

위와 같이 tailwind를 세팅하면 준비는 끝났습니다.
mdx의 장점은 내가 임의의 컴포넌트를 만들어도 렌더링 할 수 있다는 점이 있습니다.
따라서 content에 posts경로도 추가합시다, 글을 작성할 때 활용할 수 있습니다.

이제 mdx가 렌더링 되는 컴포넌트에 스타일을 입혀줍시다.

components/PageContainer.tsx

tsx

(...생략)
 
    return (
        <div className={`text-3xl prose dark:prose-invert min-w-full`}>
        {children}
        </div>
        )
 
export default PageContainerSmall;

해당하는 컴포넌트에 prose, 다크테마 지원을 위해 dark:prose-invert를 추가하면 모든 서식적용은 완료됩니다.

하지만 실제로 렌더링 된 화면을 본다면...

서식과 스타일이 적용이 되긴 했지만 무언가 겹쳐지는 느낌이네요.

실제로 그렇습니다. tailwindCSS/typography에서 제공해주는 기본적인 스타일이 다른 스타일 플러그인보다 상위로 취급받아

다른 플러그인은 적용되지 못합니다. 이를 해결하려면 수작업이 필요합니다.

우선 rehype-prettyCode에서 global.css에 추가해두라는 문법을 적용합시다.

globals.css

css

/* pretty-code (shiki) recommend */
.prose pre > code {
    display: grid;
}
 
/* Fenced Code block - hide horizontal scrollbar: webkit */
.prose pre::-webkit-scrollbar {
    display: none;
}
/* Fenced Code block - hide horizontal scrollbar: mozila */
.prose pre {
    scrollbar-width: none;
}
 
/* Fenced Code block - line style */
.prose pre span[data-line] {
    @apply inline-block px-4 py-0.5 leading-snug;
}

Github 를 참고해보면

tailwind.config.ts

typescript

typography: {
    DEFAULT: {
        css: {
            // ! <p> 태그
            p: {
                fontSize: '1.8rem',
                lineHeight: '2em',
                '@media screen and (max-width: 768px)': {
                    lineHeight: '1.5em',
                    fontSize: '1.6rem',
                },
            },
        (...)

typography에 해당하는 스타일을 제가 추가적으로 적용해놓은 것을 볼 수 있습니다.
이를 전부 소개하기엔 내용이 너무 길어지므로... 직접 참고해보면서 스타일 서식을 수정해봅시다.

직접 커스터마이징 하는 시간이 많이 드므로, 마음에 드는 스타일이 나오게 잘 설계해봅시다.

다음 편에는 다크 / 라이트 테마 적용을 다뤄보겠습니다. 아주 간단합니다.

댓글은 포스팅에 도움이됩니다. 적극적인 의견 감사드립니다.

댓글을 불러오는 중...