[Code2Image] 텍스트 입력기와 소스코드 강조표시 연동

• 깃허브 저장소
• 데모페이지

목표

textarea에 입력이 있을 때마다 소스코드 강조표시를 수행하도록 합니다.

사용하는 언어와 도구

• JavaScript: 웹 페이지가 프로그램처럼 동작할 수 있도록 해줍니다.
• highlight.js: 다양한 언어를 지원하는 소스코드 하이라이팅 도구입니다.

소스코드 입력시 소스코드 강조 기능 구현

HTML

<script src="highlight.min.js"></script>
<textarea
  id="editing-code"
  cols="80"
  placeholder="소스코드 입력"
  spellcheck="false"
  oninput="update_code(); resize();">
</textarea>
<pre
  id="highlighting-code"
  class="hljs">
  <code></code>
</pre>

<textarea>의 oninput옵션은 입력이 있을 때마다 등록한 함수를 실행합니다. 여기서는 소스코드 업데이트를 수행하는 update_code(), 텍스트 입력의 크기를 조절하는 resize()를 실행합니다. <pre>의 hljs 클래스는 highlight.js가 제공하는 스타일셋을 위한 것입니다.

자바스크립트

function update_code() {
  const result_elem = document.querySelector("#highlighting-code code");
  const text = document.querySelector("#editing-code").value;
  let html = hljs.highlightAuto(text).value;
  result_elem.innerHTML =  html.replace(new RegExp("  ", "g"), "  ");;
}

미리 불러온 highlight.js의 hljs모듈 기능을 불러와 텍스트 입력에 소스코드 강조기능 태그를 자동으로 붙이게 합니다. 태그가 붙은 소스코드는 별도로 만든 <pre><code>내부를 채우게 됩니다.

function resize() {
    const editor = document.querySelector('#editing-code');
    editor.style.height = "20px";
    editor.style.height = (editor.scrollHeight + 5)+"px";
}

높이를 조절하는 함수입니다.

중간 결과

See the Pen code-editor by SeungWan Jin (@soma0sd) on CodePen.

다음 단계

소스코드 편집기처럼 보이려면 <textarea>를 <pre>가 덮어야 할겁니다. 단순히 위치만 바꾸면 텍스트를 편집할 수 없는 등 여러 문제가 발생하기 때문에 CSS를 활용하여 이를 해결하도록 하겠습니다.