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

> Clean Markdown view of GeekNews topic #16323. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=16323](https://news.hada.io/topic?id=16323)
- GeekNews Markdown: [https://news.hada.io/topic/16323.md](https://news.hada.io/topic/16323.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-08-15T12:33:21+09:00
- Updated: 2024-08-15T12:33:21+09:00
- Original source: [blog.glyphdrawing.club](https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/)
- Points: 8
- Comments: 1

## Summary

손으로 웹사이트를 코딩할 때 구문 강조를 구현하는 새로운 방법을 제시합니다. OpenType 기능을 활용하여 폰트 자체에 구문 강조를 내장함으로써 JavaScript나 CSS 테마 없이도 구문 강조를 가능하게 합니다. 이 방법은 설치가 간단하고 유지보수가 필요 없으며, 깨끗한 HTML 소스 코드를 유지할 수 있습니다.

## Topic Body

#### 문제점  
- 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 등이 있음

## Comments



### Comment 28040

- Author: neo
- Created: 2024-08-15T12:33:22+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=41245159) 
- 재미있는 해킹임
  - 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을 쉽게 표시하는 데 유용할 것임