▲

구문 강조 기능을 내장한 폰트

 (blog.glyphdrawing.club)
8P by GN⁺ 2024-08-15 | ★ favorite | 댓글 1개

문제점

  • HTML과 CSS로 손으로 코딩한 웹사이트를 만들 때 구문 강조가 어려움
  • 코드 스니펫을 쉽게 읽고 이해할 수 있도록 색상으로 강조하고 싶음
  • 일반적으로 Prism이나 highlight.js 같은 복잡한 구문 강조 라이브러리를 사용해야 함
  • 외부 스크립트를 사용하지 않고 손으로 코딩하고 싶음

OpenType 기능을 사용하여 폰트 자체에 구문 강조 기능을 집어 넣기

  • Monaspace Krypton이라는 오픈 소스 폰트를 수정하여 각 문자의 색상 버전을 포함시킴
  • OpenType의 COLR 테이블과 컨텍스트 대체 기능을 사용하여 특정 문자열을 찾고 대체함
  • 결과적으로 폰트 자체에 내장된 간단한 구문 강조기 완성

장점과 단점

장점

  • 설치가 간단: 폰트를 가져와 OpenType COLR(색상) 및 CALT(컨텍스트 대체) 기능을 활성화하면 됨
  • JavaScript가 필요 없음
  • CSS 테마가 필요 없음
  • 평문 텍스트만큼 빠름
  • <pre>와 <code> 태그에 코드 스니펫을 추가할 수 있음
  • 깨끗한 HTML 소스 코드
  • InDesign과 같은 OpenType 기능을 지원하는 모든 곳에서 작동
  • 유지보수나 업데이트가 필요 없음
  • <textarea>와 <input>에서도 작동

단점

  • 색상 팔레트를 변경하거나 언어 지원을 추가하는 등의 수정이 필요할 때 폰트 파일을 수정해야 함
  • OpenType을 지원하는 곳에서만 작동
  • OpenType 컨텍스트 대체를 사용한 패턴 찾기는 기본적이며 정규 표현식을 사용하는 스크립트와 비교할 수 없음

실제 작동 방식

  • OpenType COLR 테이블과 컨텍스트 대체 기능을 사용
  • COLR 테이블은 다채로운 폰트를 가능하게 함
  • 컨텍스트 대체는 인접 문자를 인식하여 대체함
  • 예: JavaScript 키워드 if를 찾아 색상 변형으로 대체

GN⁺의 정리

  • 이 기사는 손으로 웹사이트를 코딩할때 구문 강조를 구현하는 새로운 방법을 제시함
  • OpenType 기능을 활용하여 폰트 자체에 구문 강조를 내장함으로써 JavaScript나 CSS 테마 없이도 구문 강조를 가능하게 함
  • 이 방법은 간단한 구문 강조에 적합하지만, 복잡한 구문 강조 라이브러리와 비교할 때 한계가 있음
  • 비슷한 기능을 제공하는 프로젝트로는 Prism, highlight.js 등이 있음
▲
GN⁺ 2024-08-15  [-]
Hacker News 의견

  • 재미있는 해킹임

    • OpenType 기능 사용에 대해 약간 혼란스러움이 있음
    • font-feature-settings: "colr", "calt"; 설정이 의미가 없음
    • colr 기능 태그가 OpenType 레이아웃 테이블에 없음
    • COLR 테이블 활성화 의도였을 가능성이 있음
    • calt 기능은 기본적으로 활성화되어 있음
    • Firefox와 Chrome에서는 잘 작동하지만 Safari에서는 작동하지 않음

  • 원본 텍스트가 그대로 유지됨

    • 태그 래핑이나 JS 없이 userContent.css로 작동함
    • 또 다른 차원의 접근임

  • OpenType 전문가가 아니므로 대체 논리를 개선할 수 있음

    • 수정된 소스 파일을 공유할 의향이 있음
    • 아이디어나 피드백이 있으면 연락 바람

  • 이 해킹은 끔찍하지만 놀라움

    • OpenType 문맥 대체 기능을 훌륭하게 악용함
    • 공유해줘서 고마움

  • 훌륭한 해킹임

    • 약 45kB로 baseline highlight.js와 비슷한 크기임
    • JavaScript가 비활성화된 환경에서도 작동함
    • 실행 시 구성 가능성과 언어 지원이 좁아짐

  • 페이지 하단에 좋은 메시지가 있음

    • "이 사이트는 쿠키를 사용하지 않으며 제3자 사이트로 링크하지 않음"
    • 이 점이 마음에 듦

  • 코드로 자동화할 수 있을 것 같음

    • 일반적인 사용 사례에 유용한 방법임

  • Chromium 기반 브라우저에서 버그가 있음

    • color: blue를 입력하면 r만 강조됨
    • 복사+붙여넣기하면 제대로 작동함
    • 여전히 멋진 기능임

  • 정말 멋진 기능임

    • textarea와 입력 필드뿐만 아니라 큰 HTML 문서에서도 사용 가능함
    • 많은 span과 HTML 태그를 사용하지 않아도 됨
    • 하드웨어 가속 폰트 렌더링 소프트웨어가 모든 것을 처리함
    • 메모리와 CPU를 많이 절약할 수 있을 것임

  • 파서 생성기처럼 작동하는 것이 필요할 것 같음

    • 규칙이 얼마나 표현력이 있는지 명확하지 않음

  • 정말 놀라운 기능임

    • 더 나은 서체로 보는 것이 기대됨 (예: Inconsolata 또는 JetBrains Mono)
    • JSON을 쉽게 표시하는 데 유용할 것임
답변달기