AskSim

마크다운을 html 요소에 적용하고 싶을 때 사용할 수 있는 자바스크립트 라이브러리 중에 제가 사용해본 것은 marked.js, simplemde.js입니다. 현재 이 사이트에는 simplemde.js를 활용하여 마크다운을 적용했습니다.

오늘은 marked.js를 활용하여 마크다운을 html 요소에 적용하는 방법에 대해 살펴보도록 하겠습니다.

marked.js 사용법

test라는 아이디를 가진 div 요소가 있다고 하면, 다음과 같이 html 문서를 작성하면 해당 요소에 마크다운이 적용됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
        document.getElementById('test').innerHTML =
        marked.parse('# 제목\n\n안녕하세요. **bskyvision**입니다.\n\n[bskyvision](https://bskyvision.com)에 놀러오세요.\n\n```print(&quot;hello world&quot;)```');
    </script>
</body>
</html>

marked.min.js를 임포트하여 marked.parse() 함수를 통해서 마크다운을 적용하였습니다.

결과적으로 다음과 같은 html 문서가 렌더링 됩니다.

마크다운적용결과

posted at 2023-03-31 21:08:46

Kyohoon Sim

Add a comment

마크다운 html 요소에 적용하는 방법(marked.js)

marked.js 사용법