투케이2K

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

JavaScript

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

투케이2K 2026. 6. 17. 20:39
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[화면 출력]

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : 자바스크립트 / marked / Markdown / md


- 사전) 👉 marked 라이브러리 간단 설명 : 

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

    - Markdown 문자열을 HTML로 파싱(렌더링)하는 라이브러리

  >> marked 를 사용해 Markdown (.md) 형식 데이터가 HTML로 변환되어 화면에 예쁘게 표시가 가능합니다.


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

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

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

  >> md 파일 기본 문법 : 

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

    ✔︎ 리스트 : 

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


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

    ✔︎ 코드 : 

      `한줄 코드`

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

    ✔︎ 구분선 : 

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





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화 -->
    <meta name="google" content="notranslate">

    <!-- 내부 CSS 스타일 지정 -->
    <style>

      html, body {
        width: 100%;
        height: 100%;
        margin : 0 auto;
        padding : 0;
        border : none;
        background-color: #666;
      } 

    </style>





    <!-- [CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>

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






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">    


      // -----------------------------------------------------------------
      // ✅ [Window.onload 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        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 mdData = `
          ## [KwonGiHwan] : Work

          ---

          ### 📌 2026년도 작업 사항 기록

          - 작업 내용 1
          - 작업 내용 2
          - 작업 내용 3
          `;

          mdData = mdData
              .replace(/^\uFEFF/, "")   // BOM 제거
              .replace(/\r\n/g, "\n")   // 줄바꿈 통일
              .replace(/^\s+/gm, "")    // ✅ 핵심 : 라인별 leading whitespace (앞 공백) 제거
              .trim();
          // */
          // -----------------------------------------
          //*                              
          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>


</head>


<body>

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

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

</body>

</html>

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





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

▶️ [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

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

558. (javaScript) 자바스크립트 SweetAlert 라이브러리 사용해 JSON Pretty 정렬 출력 팝업창 생성 및 클립보드 내용 복사 기능 수행  (0) 2026.06.22
557. (javaScript) [유틸 파일] common_json_validate_check - 자바스크립트 typeof 사용해 null 및 json 형식 여부 유효성 확인 수행  (0) 2026.06.20
555. (javaScript) 자바스크립트 node-forge 라이브러리 사용해 X.509 Certificate , PrivateKey 인증성 생성 수행  (0) 2026.06.16
554. (javaScript) 자바스크립트 node-forge 라이브러리 사용해 X.509 인증서 Certificate , PrivateKey 키 쌍 일치 여부 확인  (0) 2026.06.15
553. (javaScript) [간단 소스] 자바스크립트 실무 에러 발생 및 크래시 감지 이벤트 리스너 등록 - error , unhandledrejection , console  (0) 2026.06.14
'JavaScript' Related Articles more
Comments