TIL - day11

토스트 UI에서 플러그인 확장

신택스 하이라이트

html 파일에 CDN 추가

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

토스트UI 에디터 혹은 객체에 plugin 추가

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

수식

CDN 추가

<!-- 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 플러그인 라이브러리 끝 -->

객체에 플러그인 추가

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

UML

CDN 추가

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

객체에 플러그인 추가

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/"
          }
        ]
      ]
    });

웹서버와 브라우저

• 서버: 응답하는 컴퓨터
• 브라우저: 서버의 응답은 클라이언트에게 렌더링하여 보여주거나, 서버에 요청을 보내는 프로그램