[FrontEnd] 토스트 UI 에디터 - 코드 syntax 하이라이터 플러그인 적용

링크

GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

---

코드

HTML

<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />

<!-- 신택스 하이라이터 플러그인 라이브러리 시작 -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight.min.css">
<script src="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight-all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
<!-- 신택스 하이라이터 플러그인 라이브러리 끝 -->

<template id="viewer-1-template">
  # 안녕하세요.
  ## 반가워요.
  - 하하
  - 호호
  - 히히

  # 자바
  ```java
  // 주석입니다.
  int a = 10;
  int b = 20;
  System.out.println(a + b);
  ```

  ```html
  <script src="경로"></script>
  ```
</template>
<div id="viewer-1"></div>

 

CSS

body {
  margin: 0;
}
@font-face {
  font-family: "GmarketSansMedium";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}
#viewer-1 {
  padding: 0 10px;
}
html > body,
html > body .toastui-editor-contents {
  font-family: "GmarketSansMedium";
}

 

JS

console.clear();

const Editor = toastui.Editor;

// id가 'viewer-1-template' 인 엘리먼트를 찾는다.
const viewer1TemplateEl = document.querySelector("#viewer-1-template");
const viewer1MarkdownSource = viewer1TemplateEl.innerHTML; // 포함하고 있는 내용

console.log("viewer1MarkdownSource : " + viewer1MarkdownSource);

const viewer1 = Editor.factory({
  el: document.querySelector("#viewer-1"),
  viewer: true,
  initialValue: viewer1MarkdownSource,
  plugins: [[toastui.Editor.plugin.codeSyntaxHighlight, { highlighter: Prism }]]
});

---

실행 결과