[javascript] Marked를 사용하여 마크다운 파일의 상하 맨끝 간격을 설정하는 방법은?

30 Nov 2023

javascript

먼저, CSS 파일을 만들고 마크다운 파일에 적용할 스타일 규칙을 작성합니다. 상하 간격을 설정하려면 margin 속성을 사용하면 됩니다.

아래는 예시입니다:

body {
  margin: 20px;
}

위의 코드는 모든 HTML 요소의 상하 간격을 20px로 설정합니다. 이 코드를 style.css 파일에 저장합니다.

이제 마크다운 파일을 HTML로 변환할 JavaScript 코드를 작성합니다. Marked를 사용하여 변환한 뒤, 변환된 HTML 파일에 CSS 파일을 연결합니다.

아래는 예시입니다:

const fs = require('fs');
const marked = require('marked');

const markdown = fs.readFileSync('input.md', 'utf-8'); // 입력할 마크다운 파일명
const html = marked(markdown);
const finalHtml = `
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>${html}</body>
</html>
`;

fs.writeFileSync('output.html', finalHtml); // 변환된 HTML 파일명

위의 코드를 index.js 파일에 저장하고 실행하면 output.html 파일이 생성됩니다. 이 HTML 파일을 웹 브라우저에서 열면 마크다운 파일의 상하 간격이 20px로 설정된 것을 확인할 수 있습니다.

참고 문서: