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

30 Nov 2023

javascript

Marked는 JavaScript에서 사용할 수 있는 마크다운 라이브러리입니다. Markdown 문서를 작성할 때 자동 완성 기능을 구현하려면 Marked의 기능을 사용하여 입력 중에 태그를 자동 완성하는 로직을 추가해야 합니다.

자동 완성 기능을 구현하려면 입력 중에 태그의 시작을 감지해야합니다. 이를위해 입력 창에 이벤트 리스너를 추가하고, 사용자가 태그를 입력할 때마다 태그가 시작되었는지 여부를 체크합니다.

다음은 Marked를 사용하여 자동 완성 기능을 구현하는 예시 코드입니다.

var input = document.getElementById('markdown-input');

input.addEventListener('input', function() {
  var cursorPosition = input.selectionStart;
  var inputValue = input.value;
  var lastOpeningTag = inputValue.lastIndexOf('<', cursorPosition - 1);
  var lastClosingTag = inputValue.lastIndexOf('>', cursorPosition - 1);

  if (lastOpeningTag > lastClosingTag) {
    // 자동 완성 기능을 구현하는 로직을 작성합니다.
    // 예: 사용자가 "<div" 입력 시 "<div></div>"를 자동으로 입력합니다.
    var completedTag = '<div></div>';
    input.value = inputValue.slice(0, cursorPosition) + completedTag + inputValue.slice(cursorPosition);
  }
});

위의 코드는 입력 중에 사용자가 “<”를 입력할 때마다 “<div></div>“를 자동으로 추가하는 예시입니다.

이 코드를 HTML 문서에 포함시키고, markdown-input라는 ID를 가진 입력 창에 사용자의 마크다운을 입력하면 자동으로 태그가 완성됩니다.

참고로, 자동 완성 기능을 구현하는 방식은 요구사항에 따라 다를 수 있습니다. 위의 예시 코드는 간단한 예시일 뿐이며, 실제로 원하는 기능에 맞게 변경해야 합니다.

만약 문제가 발생하거나 더 자세한 내용을 알고 싶다면, [Marked 공식 GitHub 페이지][Marked]나 Stack Overflow에서 관련된 문제를 검색해보시기 바랍니다.