122. (Library/Framework) [라이브러리] [Web] 자바스크립트 marked 라이브러리 Markdown md 파일 형식 HTML 로 변환 출력

---

[타이틀]

​

구 분 : Library / 라이브러리

​

제 목 : [라이브러리] [Web] 자바스크립트 marked 라이브러리 Markdown md 파일 형식 HTML 로 변환 출력

​

 

---

[설 명]

​

-----------------------------------------------------------------------------------------
[라이브러리 정보 및 환경]
-----------------------------------------------------------------------------------------

- 구 분 : Library / Framework


- 제 목 : [라이브러리] [Web] 자바스크립트 marked Markdown md 파일 형식 HTML 로 변환 출력 라이브러리


- 환 경 : Web / JavaScript / Chrome / node-forge / X.509


- 사전) 👉 md 파일 간단 설명 : 

  >> md 파일은 Markdown(MD) 형식으로 작성된 텍스트 파일입니다.

    - 확장자 : .md
    - 내용 : 일반 텍스트 + 간단한 문법
    - 목적 : 읽기 쉽고 쓰기 쉬운 문서 작성

  >> md 파일 기본 문법 : 

    ✔︎ 제목 (Heading) : 
    
      # H1
      ## H2
      ### H3

    ✔︎ 리스트 : 

      - 항목1
      - 항목2
        - 하위항목


    ✔︎ 강조 : 
    
      **굵게**
      *기울임*

    ✔︎ 코드 : 

      `한줄 코드`

    
      코드 블록:
      ```js
      console.log("hello");
      ```

    ✔︎ 구분선 : 

      ---


- 사전) 👉 자바스크립트에서 marked 의존성 설정 코드 : 

    <!-- [marked 라이브러리] -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[설 명]
-----------------------------------------------------------------------------------------

1. marked 는 웹에서 Markdown (.md) 을 HTML 로 변환해주는 JavaScript 라이브러리입니다.

  - 브라우저에서 보여줄 HTML로 바꿔주는 엔진


2. 브라우저는 기본적으로 .md 를 이해 못하는데, marked 를 사용해 HTML 로 변환되어 화면에 예쁘게 표시가 가능합니다.


3. ✅ marked 주요 기능 : 

  >> Markdown 문법 지원 : 전부 HTML로 변환
  
    # 제목
    ## 소제목
    - 리스트
    **굵게**
    `코드`

  >> 코드 블록 지원 : <pre><code>로 변환됨
  
  








    ```

  >> 확장 가능 (옵션 설정) : 
  
    marked.setOptions({
      breaks: true,     // 줄바꿈 <br> 처리
      gfm: true         // GitHub 스타일 지원
    });

  >> 속도 빠름 : 가볍고 빠른 파서라서 실시간 preview 에 적합


4. 주의할 점 (중요 🚨)

  >> XSS 보안 문제 : 그대로 실행될 위험 있음

    - marked.parse("<script>alert(1)</script>")

  >> 스타일 없음 : marked는 HTML만 만들어줌

    - 예쁘게 나오려면 추가 stylesheet 링크 적용 필요


5. ✅ marked 사용 기본 자바스크립트 소스 코드 첨부 : 

<!-- [marked 라이브러리] -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>


<script>

  window.onload = async function() {

    try {

      // -----------------------------------------
      // 🟦 [document.getElementById 객체 지정]
      // -----------------------------------------
      const md = document.getElementById("md");
      const preview = document.getElementById("preview");


      // -----------------------------------------
      // 🟦 [md 에 input 값이 변경 된 경우 미리보기 표시]
      // -----------------------------------------       
      // 사용자가 입력한 경우 이벤트 동작
      // -----------------------------------------        
      md.addEventListener("input", () => {
        console.log('md : input : ', '\n\n', md.value, '\n\n');

        preview.innerHTML = marked.parse(md.value);
      });



      // -----------------------------------------
      // 🟦 [md 에 마크업 형식 데이터 지정]
      // -----------------------------------------                            
      let normalizeIndent = function(md) { // ✅ 여러 줄 문자열에서 “공통으로 들어간 들여쓰기만 제거하고, 구조는 유지”하는 함수
        const lines = md.split("\n");

        const indents = lines
          .filter(line => line.trim().length > 0)
          .map(line => line.match(/^ */)[0].length);

        const minIndent = Math.min(...indents);

        return lines
          .map(line => line.slice(minIndent))
          .join("\n");
      };

      let mdData = `
      ## ----------------------------------------- ##
      ## [일일 작업 내역] ##
      ## ----------------------------------------- ##

      - [2026-06-17] : [md 렌더링 테스트]
        - marked 라이브러리 사용
      `;

      mdData = normalizeIndent(mdData);
      
      md.value = mdData;
      md.dispatchEvent(new Event("input")); // ✅ input 이벤트 동작 명령


    }
    catch (exception) {
      console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);
    }

  };

</script>


<body>

  <!-- 입력 창 -->
  <h2>📄 md 파일 입력 창</h2>
  <textarea id="md" style="width: 700px; height: 500px;"></textarea>

  <!-- 미리 보기 화면 -->
  <h2>📄 md 파일 미리 보기</h2>
  <div id="preview"></div>

</body>

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ [자바스크립트 marked 라이브러리 Markdown md 파일 형식 HTML 로 변환 출력 수행 - Markdown 문자열을 HTML로 파싱]

https://kkh0977.tistory.com/8923

https://blog.naver.com/kkh0977/224319102680


▶️ [Git 공식 사이트]

https://github.com/markedjs/marked

https://marked.js.org/


▶️ [Git] README.md 파일 설명

https://kkh0977.tistory.com/3431

https://blog.naver.com/kkh0977/222946651420?trackingCode=blog_bloghome_searchlist


▶️ [라이브러리] [Web] 자바스크립트 sql-formatter SQL 문 정렬(beautify) 포매터 라이브러리

https://kkh0977.tistory.com/8658

https://blog.naver.com/kkh0977/224200021703?trackingCode=blog_bloghome_searchlist


▶️ [자바스크립트 forEach 사용해 태그 공통 스타일 지정 및 p , h1 , div 태그에 json 데이터 pretty 정렬 출력 수행]

https://kkh0977.tistory.com/8657

https://blog.naver.com/kkh0977/224200016610?trackingCode=blog_bloghome_searchlist


▶️ [Numeral.js 라이브러리] 자바스크립트 Numeral 라이브러리 사용해 특정 포맷 형식 숫자로 변경 출력 수행

https://kkh0977.tistory.com/4689

https://blog.naver.com/kkh0977/223217108626

-----------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8923

556. (javaScript) 자바스크립트 marked 라이브러리 Markdown md 파일 형식 HTML 로 변환 출력 수행 - Markdown

---