각 포스트들은 .md 라는 마크다운 파일로 생성을 하게 될 것이다.
이 마크다운 문법으로 작성되어있는 포스트들을 html 문법으로 변환시켜주는 작업이 필요해 변환해줄 예정이다.
시작전에 필요한 라이브러리들을 다운받아야 한다
$ npm install marked
지금 작성하고 있는 포스트도 마크다운 문법으로 작성이 됐다
# 제목1
## 제목2
마크다운 문법을 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\>
사이에 개행이나 공백이 들어가게되면 웹페이지에서 보여지게되는 코드블럭 부분도 개행과 띄어쓰기가 들어가기때문에 한줄로 작성해주어야한다
결과 :::