[FrontEnd] 토스트 UI 에디터 - Katex, UML 플러그인 적용

Katex

: 웹 브라우저에서 수학 표기법을 표시하는 브라우저 간 JavaScript 라이브러리

• 빠르고 사용하기 쉬운 것에 특히 중점을 둠

---

PlantUML

: 다이어그램을 빠르게 작성하기 위한 오픈 소스 프로젝트

👇🏻 링크

간단한 텍스트를 이용하여 멋진 UML 다이어그램을 만들 수 있는 오픈소스 도구입니다.

---

코드

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">
<!-- 신택스 하이라이터 플러그인 라이브러리 끝 -->

<!-- katex 플러그인 라이브러리 시작 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.13/katex.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.13/katex.min.css">
<!-- katex 플러그인 라이브러리 끝 -->

<!-- uml 플러그인 라이브러리 시작 -->
<script src="https://uicdn.toast.com/editor-plugin-uml/latest/toastui-editor-plugin-uml.min.js"></script>
<!-- uml 플러그인 라이브러리 끝 -->

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

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

  $$katex
  x^2 + y^2 = 1
  $$

  ```html
  <script src="경로"></script>
  ```

  $$uml
  (First usecase)
  (Another usecase) as (UC2)
  usecase UC3
  usecase (Last\nusecase) as UC4
  $$
</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,
html > body .toastui-editor-contents code,
html > body .toastui-editor-contents pre {
  font-family: "GmarketSansMedium";
}

 

JS

console.clear();

function stripIndent(str) {
  const lines = str.split("\n");
  let minIndent = Infinity;

  // 첫 번째 줄 이후의 각 줄에서 가장 작은 들여쓰기 값을 찾습니다.
  for (let i = 1; i < lines.length; i++) {
    const line = lines[i];
    const indent = line.search(/\S/); // 첫 번째 비공백 문자의 인덱스를 찾습니다.

    if (indent !== -1 && indent < minIndent) {
      minIndent = indent;
    }
  }

  // 모든 줄에서 가장 작은 들여쓰기 값을 뺍니다.
  if (minIndent !== Infinity) {
    for (let i = 0; i < lines.length; i++) {
      lines[i] = lines[i].slice(minIndent);
    }
  }

  // 결과 문자열을 반환합니다.
  return lines.join("\n");
}

const Editor = toastui.Editor;

function katexPlugin() {
  const toHTMLRenderers = {
    katex(node) {
      console.log("HI");

      let html = katex.renderToString(node.literal, {
        throwOnError: false
      });

      return [
        { type: "openTag", tagName: "div", outerNewLine: true },
        { type: "html", content: html },
        { type: "closeTag", tagName: "div", outerNewLine: true }
      ];
    }
  };

  return { toHTMLRenderers };
}

// id가 'viewer-1-template' 인 엘리먼트를 찾는다.
const viewer1TemplateEl = document.querySelector("#viewer-1-template");
const viewer1MarkdownSource = stripIndent(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 }],
    katexPlugin,
    [
      toastui.Editor.plugin.uml,
      { rendererURL: "http://www.plantuml.com/plantuml/svg/" }
    ]
  ]
});

---

실행 결과