티스토리 뷰

프로그래밍

모나코 에디터를 코드하이라이트용으로 사용하기.

쉬피드 2021. 2. 8. 16:27
728x90
반응형

모나코 에디터는 vscode의 기반이 된 에디터이다.
마이크로소프트에서 공개해놓았으며 간단한 온라인편집기로도 사용할 수 있다.
마이크로소프트에서 만든것 답게 속도나 구동에는 문제가 없지만
기능이 많은 만큼 기본용량은 큰 편이다.
문득 이것이 코드하이라이트로 써도 괜찮다는 생각이 들었다.
다소 로딩할 때 지연은 되지만 실행되면 그 어느 코드하이라이트보다 더 좋은 퍼포먼스를 보여준다.

<html>
<body>
야호
</body>
</html>

window.onload = function () {
  require.config({
    paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor/min/vs" }
  });
  var chart = document.querySelectorAll('pre.lang-chart');
  chart.forEach(ele => {
    var data = ele.innerText;
    const wrapperId = `chartjs${Math.random().toString(36).substr(2, 10)}`;
    ele.style.backgroundColor = "#fff";
    setTimeout(renderChart.bind(null, wrapperId, data), 500);
    ele.innerHTML = `<div><canvas id="${wrapperId}"></canvas></div>`;
  });
  function renderChart(wrraperId, data) {
    data = JSON.parse(data);
    new window.Chart(document.getElementById(wrraperId).getContext('2d'), data);
  }
  var chart = document.querySelectorAll('pre.lang-apexchart');
  chart.forEach(ele => {
    var data = ele.innerText;
    const wrapperId = `apexchartsjs${Math.random().toString(36).substr(2, 10)}`;
    ele.style.backgroundColor = "#fff";
    setTimeout(renderApexChart.bind(null, wrapperId, data), 500);
    ele.innerHTML = `<div id="${wrapperId}"></div>`;
  });
  function renderApexChart(wrraperId, data) {
    data = JSON.parse(data);
    var apexchart = new window.ApexCharts(document.getElementById(wrraperId), data);
    apexchart.render();
    var overflow = document.querySelectorAll('pre.lang-apexchart');
    overflow.forEach(ele => {
      ele.style.overflow = "hidden";
    });
  }
  async function renderMonaco(wrraperId, data, lang) {
    console.log('render', lang);
    require(['vs/editor/editor.main'], function () {
      var editor = monaco.editor.create(document.getElementById(wrraperId), {
        theme: 'vs-dark',
        fontFamily: 'Nanum Gothic Coding',
        automaticLayout: true,
        value: data,
        language: lang,
        //readOnly: true,
        scrollBeyondLastLine: false,
        scrollbar: {
          useShadows: false,
          verticalHasArrows: true,
          horizontalHasArrows: true,
          vertical: 'hidden',
          horizontal: 'hidden',
          verticalScrollbarSize: 0,
          horizontalScrollbarSize: 17
        },
      });
    });
  }
  const codes = DOMRegex(/lang-/);
  codes.forEach(ele => {
    ele.style.overflow = "hidden";
    const lang = ele.className.replace('lang-','');
    const data = ele.innerText;
    const wrapperId = `Monaco_${lang}_${Math.random().toString(36).substr(2, 10)}`;
    setTimeout(renderMonaco.bind(null, wrapperId, data, lang), 0);
    var length = data.split(/\r\n|\r|\n/).length;
    ele.innerHTML = `<div style="height:${length * 20}px" id="${wrapperId}"></div>`;
  });
  function DOMRegex(regex) {
    let output = [];
    for (let i of document.querySelectorAll('pre')) {
      if (regex.test(i.className)) { // or whatever attribute you want to search)
        if(i.className.trim() !== 'lang-chart' || i.className.trim() !== 'lang-apexchart')
          output.push(i);
      }
    }
    return output;
  }
}

현재 블로그에 코드하이트와 차트를 렌더링하기 위해 적용된 코드이다.
편집 자체가 불가능하게 하여 완전히 코드하이라이트 용으로도 사용 할 수 있지만 그렇게 안하는것이 좀 더 용도에 맞을거란 생각이 들어 굳이 하지 않았다.

728x90

'프로그래밍' 카테고리의 다른 글

티스토리 API 글쓰기를 마크다운 모나코 에디터로 작성하기.  (0) 2022.02.28
우분투에서 mysql.sock를 찾을 수 없다고 나올때.  (3) 2021.05.28
티스토리 블로그에서 차트(apexchart) 사용하기 예제  (0) 2021.01.27
vue3 ref, reactive 비교  (0) 2021.01.25
vue2 vue3 created, setup 비교.  (0) 2021.01.18
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함