[javascript] Marked를 사용하여 문서 작성 시 스크롤 동기화 기능을 구현하는 방법은?

30 Nov 2023

javascript

HTML 구조 설정: 문서를 보여줄 컨테이너를 만들고, 좌측에는 마크다운 입력 폼, 우측에는 변환된 HTML을 표시할 엘리먼트를 구성합니다. 각 컨테이너에는 id를 할당합니다.

<div>
  <div>
    <textarea id="markdown-input"></textarea>
  </div>
  <div>
    <div id="html-output"></div>
  </div>
</div>

스크롤 동기화 이벤트 핸들링: marked를 사용하여 마크다운을 HTML로 변환한 후, 스크롤 동기화를 위해 이벤트 핸들링을 추가합니다.

const inputTextarea = document.getElementById('markdown-input');
const outputDiv = document.getElementById('html-output');

function syncScroll() {
  const inputScrollTop = inputTextarea.scrollTop;
  const outputScrollTop = (inputScrollTop / inputTextarea.scrollHeight) * outputDiv.scrollHeight;
  outputDiv.scrollTop = outputScrollTop;
}

inputTextarea.addEventListener('scroll', syncScroll);

이제 마크다운을 작성하면 변환된 HTML이 우측에 표시되며, 좌측 마크다운 입력 폼과 우측 HTML 표시 엘리먼트의 스크롤이 동기화됩니다. 위의 예제는 marked를 이용한 간단한 구현 방법을 보여주는 것이며, 확장된 기능을 원하신다면 해당 라이브러리의 문서를 참고하시기 바랍니다.