배너 이미지

Online Syntax Highlighter 만들어보기

최종 수정일 : (11개월 전)

앞서 작성했던 VSCode를 Syntax Hihglighter로 쓰는 방법에서 cog25 님이 shiki라는 Syntax Highlighter를 추천해주셔서, 이를 이용해 온라인 구문 강조기를 제작해봤습니다.

이제 VSCode 없는 환경에서도 codeblock을 만들 수 있습니다!
오타 찾거나 하면 굳이 랩탑이나 데스크탑 켤 것 없이 모바일에서도 간단하게 수정할 수 있겠네요.

syntax highlighter

Github
Live Demo

textarea

하이라이팅 된 결과물을 렌더링하는 요소와 textarea를 폰트 등에 관한 옵션은 모두 똑같게 주고, textarea의 폰트 색상만 -webkit-text-fill-color으로 투명하게 만들어주면, 위 스크린샷처럼 텍스트 에디터 같은 느낌을 간단하게 줄 수 있습니다.
간단하게 짧은 코드를 작성하는 게 주된 목적이니 이 정도면 충분하지 않을까 싶네요.

또 브라우저에선 Tab을 누르면 다음 요소로 포커스(focus)가 넘어가는 게 기본 동작이니

if (code === "Tab") {
event.preventDefault();

const currentStartPosition = textarea.selectionStart;
const currentEndPosition = textarea.selectionEnd;
const currentValue = textarea.value;

textarea.value = `${currentValue.slice(
0,
currentStartPosition
)} ${currentValue.slice(currentStartPosition)}`;
textarea.selectionEnd = currentEndPosition + 2;
highlightSyntax();
}

기본 동작을 막고 공백 두 칸만 커서 위치에 추가하게 해뒀습니다.

하나 안타까운 건 실행취소가 안 된다는 겁니다...

Syntax Highlighter에 별다른 기능이 필요하진 않으니, 이제 테마 선택 정도만 추가하면 끝이지 않나 싶습니다.


profile

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

주의 : 비밀 댓글 사용 시 수정 기능을 이용할 수 있는 시간이 지나면 작성자도 내용 확인이 불가능합니다.