마크다운 에디터 | 실시간 미리보기 웹 기반 마크다운 에디터

소개

이 프로젝트에서는 입력하는 대로 실시간 HTML 미리보기를 제공하는 간단한 웹 기반 Markdown 편집기를 만들 것입니다. Ace Editor, marked, 그리고 highlight.js와 같은 라이브러리를 사용하여 Markdown 으로 작성할 수 있을 뿐만 아니라 브라우저 세션 간에 데이터를 저장하고 미리보기에서 코드 조각을 강조 표시하는 직관적인 편집기를 개발할 것입니다.

👀 미리보기

Markdown editor live preview

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

편집기 및 뷰어의 HTML 구조 설정 방법
쾌적한 사용자 경험을 위해 편집기 및 뷰어 스타일 지정 방법
편집기 초기화 로직 구현 방법
Markdown 을 HTML 로 파싱하고 뷰어에 표시하는 방법
편집기와 뷰어 간의 스크롤 동기화 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

실시간 HTML 미리보기가 있는 웹 기반 Markdown 편집기 개발
Ace Editor, marked, 그리고 highlight.js와 같은 라이브러리를 활용하여 편집기 기능 향상
브라우저 세션 간 데이터 지속성 구현
Markdown 미리보기에서 코드 구문 강조 표시 제공

HTML 구조 설정

요구 사항:

기본적인 HTML 태그에 대한 이해.

기능:

편집기와 뷰어의 기반을 마련합니다.

index.html에서 편집기와 뷰어를 위한 기본적인 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" />
    <title>markdown editor</title>

    <!-- Import CSS files -->
    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="libs/highlightjs/default.min.css" />
    <link rel="stylesheet" href="libs/highlightjs/monokai_sublime.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <!-- markdown editor div -->
        <div class="col-md-6" id="md-editor"></div>
        <!-- markdown preview box div -->
        <div class="col-md-6" id="md-viewer"></div>
      </div>
    </div>
    <!-- Import JavaScript files -->
    <script src="libs/jquery.min.js"></script>
    <script src="libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="libs/ace/ace.js"></script>
    <script src="libs/marked.min.js"></script>
    <script src="libs/highlightjs/highlight.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

에디터 및 뷰어 스타일 지정

요구 사항:

기본적인 CSS 지식.

기능:

쾌적한 사용자 경험을 위해 편집기와 뷰어의 스타일을 지정합니다.

제공된 스타일을 style.css에 삽입합니다. 이렇게 하면 편집기와 뷰어 모두 올바르게 스타일 지정되고 각각 화면의 절반을 차지하게 됩니다.

/* style.css */

/* Editing Area */
#md-editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 16px;
}

/* Preview Area */
#md-viewer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  overflow-y: scroll;
}

이 CSS 는 편집기와 뷰어가 각각 화면의 절반을 차지하고 나란히 배치되도록 합니다.

에디터 초기화 구현

요구 사항:

JavaScript 에 대한 기본적인 이해.

기능:

원하는 설정으로 Ace Editor 를 설정합니다.

편집기 초기화 로직으로 main.js를 시작합니다.

/* main.js */

/**
 * Initialize the editor
 *
 */
function initEditor() {
  // Initialize the editor
  var editor = ace.edit("md-editor");

  editor.setTheme("ace/theme/monokai"); // Set theme style
  editor.getSession().setMode("ace/mode/markdown"); // Set editor mode
  editor.getSession().setTabSize(4); // Set Tab to 4 spaces
  editor.getSession().setUseWrapMode(true); // Enable word wrap

  // Load data from local storage
  editor.setValue(localStorage.localData || "");
}

마크다운 파싱 구현

요구 사항:

JavaScript 및 jQuery 에 대한 숙지.

기능:

Markdown 을 HTML 로 변환합니다.
뷰어에 HTML 을 표시합니다.

/**
 * Parse markdown
 *
 * @params {object} editor - Editor instance
 * @return {object} - Preview box
 */
function parseMarkdown(editor) {
  var viewer = $("#md-viewer"); // Document preview box
  var data = editor.getValue(); // Get editor data

  // Save data to local storage
  localStorage.localData = data;
  // Parse markdown
  data = marked(data);
  viewer.html(data);

  // Highlight code in markdown document
  $("pre > code", viewer).each(function () {
    hljs.highlightBlock(this);
  });

  // Return viewer
  return viewer;
}

에디터와 뷰어 간 스크롤 동기화 구현

요구 사항:

JavaScript 이벤트에 대한 이해.

기능:

편집기와 뷰어의 스크롤을 동기화합니다.

/*
 * Control the scrollbar
 * Synchronize scrolling between the editor and preview box
 *
 * @params {object} editor - Editor instance
 * @params {object} viewer - Preview box
 */
function fixScrollBar(editor, viewer) {
  var session = editor.getSession();

  // Scroll to the first line by default
  session.setScrollTop(0);

  // Bind scroll event to the editor
  session.on("changeScrollTop", function () {
    var sTop = session.getScrollTop();
    // Set the scrollbar for the preview box
    viewer.scrollTop(sTop);
  });

  // Set scroll event for the preview box
  viewer.on("scroll", function () {
    var sTop = viewer.scrollTop();
    // Set the scrollbar for the editor
    session.setScrollTop(sTop);
  });
}

모든 기능 통합 및 에디터 초기화

요구 사항:

JavaScript 에서 함수 호출에 대한 이해.

기능:

이전 모든 단계를 통합된 코드로 병합합니다.
편집기를 초기화하고 모든 기능을 적용합니다.

/* main.js */

initEditor();

/**
 * Initialize the editor
 *
 */
function initEditor() {
  // Initialize the editor
  var editor = ace.edit("md-editor");

  editor.setTheme("ace/theme/monokai"); // Set theme style
  editor.getSession().setMode("ace/mode/markdown"); // Set editor mode
  editor.getSession().setTabSize(4); // Set Tab to 4 spaces
  editor.getSession().setUseWrapMode(true); // Enable word wrap

  // Load data from local storage
  editor.setValue(localStorage.localData || "");

  // Parse the data loaded from local storage
  var viewer = parseMarkdown(editor);
  // Control scrollbar
  fixScrollBar(editor, viewer);

  // Real-time markdown parsing
  editor.getSession().on("change", function (e) {
    parseMarkdown(editor);
  });
}

프로젝트 실행

웹 브라우저에서 index.html을 엽니다.
마크다운 편집기를 보고 테스트합니다.
페이지의 효과는 다음과 같습니다:

요약

축하합니다! 방금 웹 기반 마크다운 편집기를 실시간 미리보기 기능과 함께 만들었습니다. 이제 마크다운 콘텐츠를 작성하고, 실시간 HTML 표현을 볼 수 있으며, 코드 조각을 강조 표시할 수도 있습니다. 작성한 콘텐츠는 localStorage 덕분에 브라우저 세션 간에도 유지된다는 것을 기억하세요. 즐거운 코딩 되세요!

실시간 미리보기 마크다운 에디터 개발

소개

👀 미리보기

🎯 과제

🏆 성과

HTML 구조 설정

에디터 및 뷰어 스타일 지정

에디터 초기화 구현

마크다운 파싱 구현

에디터와 뷰어 간 스크롤 동기화 구현

모든 기능 통합 및 에디터 초기화

프로젝트 실행

요약