[Devlog] 마크다운 내용을 html 소스로 뿌려주기

각 포스트들은 .md 라는 마크다운 파일로 생성을 하게 될 것이다.
이 마크다운 문법으로 작성되어있는 포스트들을 html 문법으로 변환시켜주는 작업이 필요해 변환해줄 예정이다.
시작전에 필요한 라이브러리들을 다운받아야 한다

$ npm install marked

마크다운 문법

지금 작성하고 있는 포스트도 마크다운 문법으로 작성이 됐다
# 제목1
## 제목2

html 문법

마크다운 문법을 html문법으로 바꾸면 아래와같다.
<h1>제목1</h1>
<h2>제목2</h2>

문법 변환

이렇듯 변환시켜주는 작업을 해줘야한다. 우선 파일 하나를 가지고 변경해주는부분을 만들어 볼것이다.

const getContent = () => {
    const filePath = process.cwd() + '/posts/front/react/React_Hook_이란?.md';
    const fileContents = fs.readFileSync(filePath, 'utf8');

    return fileContents;
}

const markdownToHtml = async (fileContent) => {
    const matterResult = matter(fileContent);
    const processedContent = await remark()
        .use(html)
        .process(matterResult.content);
    const contentHtml = marked(processedContent.value);

    return contentHtml;
}

getContent() 로 파일내용을 불러와 markdownToHtml() 에 넘겨준 다음, marked 라이브러리를 사용해서 html 문법으로 변환해줬다.

결과 :::

정상적으로 불러와 지지만 코드블럭쪽이 아무런 하이라이팅 효과가 없어서 많이 비어보이는데 이부분도 채워줄것이다.

코드블록 디자인

우선 진행하기전에 설치해야할 라이브러리들이 있다.

$ npm install prismjs
$ npm install babel-plugin-prismjs

marked 로 변환해준 문법에서 코드블록을 찾아 css 를 건드려 주는 라이브러리이다

위 사진으로 예시를 든다면,

"
1. State Hook
아래는 버튼 클릭시 값이 증가하는 간단한 예제이다.
"

까지는 그냥 지나치고 코드블럭에 해당하는

import React, { useState } from 'react';
...
...
  );
}

의 코드블럭을 디자인 해주는것이다.

우선 위에서 만들어준 markdownToHtml()를 수정해 주어야한다.

const markdownToHtml = async (fileContent) => {
    const renderer = new marked.Renderer();
    renderer.code = function(code, language, escaped) {
        code = this.options.highlight(code, language);
        if (!language) {
            return `<pre><code>${code}</code></pre>`;
        }

        const languageClass = "language-" + language;
        return `<pre class="${languageClass}"><code class="${languageClass}">${code}</code></pre>`;
    };

    marked.setOptions({
        renderer,
        highlight: function(code, language) {
            try {
                return Prism.highlight(code, Prism.languages[language], language);
            } catch {
                return code;
            }
        }
    });

    return marked(fileContent);
};

marked 의 렌더러에 포함되어있는 code 옵션을 오버라이딩 해준 후 코드블럭의 코드부분(code)과 언어 부분(language)을 파라미터로 받아와서 디자인을 해줄 수 있다.

주의할점은 <pre\> 와 <code\> 사이에 개행이나 공백이 들어가게되면 웹페이지에서 보여지게되는 코드블럭 부분도 개행과 띄어쓰기가 들어가기때문에 한줄로 작성해주어야한다

결과 :::