코드 ​

설명 ​

code() 은 코드 블록(<pre>)과 문법 하이라이팅 훅을 제공합니다.

• 툴바나 @ 메뉴에서 고르면 캐럿(caret)이 놓인 블록(block)이 코드 블록으로 바뀝니다(토글). 백틱 세 개(```)나 언어까지 붙인 ```js 로도 만들어집니다.
• 캐럿이 코드 안에 있으면 상황 줄(context row)에 언어 입력창이 뜹니다. 목록으로 제안만 하고 가두지 않으므로 목록에 없는 이름도 직접 넣을 수 있습니다. 빈 값으로 두면 언어 속성이 떨어집니다.
• 편집 영역이 white-space: pre-wrap 이라 줄바꿈·들여쓰기·연속 공백이 그대로 보존됩니다. 코드 안에서 Enter 는 문단을 나누지 않고 앞줄과 같은 깊이로 줄만 바꿉니다. 코드 맨 앞에서 친 Enter 는 위에 빈 문단을 만들어 코드를 밀어냅니다.
• 줄 경계를 넘겨 여러 줄을 고르고 Tab 을 누르면 걸친 줄이 함께 한 단계 들여써지고, Shift+Tab 이 되돌립니다. 캐럿 하나이거나 한 줄 안의 선택일 때 Tab 은 평소대로 탭 한 글자입니다.
• 안쪽에는 평문(plain text) 코드와 <br> 만 남습니다. <code> 와 하이라이터 span, 인라인 색은 전부 벗겨지고 살아남는 속성은 data-nabi-lang 하나입니다. 바깥 관례(class="language-js")에서 언어를 읽어 오고, 나갈 때는 <pre data-nabi-lang="ts"><code class="language-ts"> 로 감쌉니다.
• 색칠은 호스트가 넘긴 함수가 합니다. 문법 사전을 패키지에 싣지 않으므로 code({ highlight }) 에 Prism·highlight.js·Shiki 를 물립니다. 훅을 주지 않으면 색만 칠해지지 않을 뿐 코드 블록 기능은 그대로입니다.
• 토큰 span 은 화면에만 들어갑니다. 문서의 실체에는 평문 코드만 남으므로 하이라이터를 바꿔도 문서가 변하지 않고, 다시 칠해도 onChange 가 나가지 않습니다. 다시 칠하기 전에 캐럿 자리를 코드 문자열 오프셋으로 재어 두었다가 되돌리므로 커서도 튀지 않습니다.
• 나가는 값에는 색이 인라인으로 굳습니다 — 그린 페이지에 시트가 없을 수 있기 때문입니다. 굳히는 값이 color:var(--nabi-code-keyword,#cf222e) 꼴이라 시트가 없으면 폴백인 라이트 색이 서고, 시트를 건 페이지에서는 --nabi-code-* 를 따라 다크에서 다크 색이 나옵니다. 라이트 색만 굳히면 인라인이 시트를 이겨 다크 화면에서 문자열 토큰이 묻힙니다. 하이라이터를 물리지 않았거나 하이라이터가 던지면 색칠만 건너뛰고 평문 코드가 그대로 나갑니다.
• GitHub·GitLab 의 표 레이아웃 코드를 붙여넣으면 줄번호 칸을 버리고 통째로 가져옵니다. 조각 전체가 코드 표일 때만 그렇게 하는데, 평범한 글이 코드로 삼켜지는 쪽이 더 나쁘기 때문입니다.
• 코드 안에서는 툴바 버튼이 전부 숨고 @ 메뉴도 열리지 않습니다. 코드는 글자 그대로여야 하기 때문입니다. 밖에서 캐럿이 닿으면 통째로 고르지 않고 코드 안 맨 앞이나 맨 뒤로 들어갑니다.
• 배경·여백·고정폭 글꼴은 시트(stylesheet)의 몫이라 저장값에 굳지 않습니다.
• 언어 속성 이름과 토큰 종류는 상수로도 나갑니다 — CODE_LANG_ATTR · CODE_TOKEN_TYPES. 하이라이터를 물릴 때 쓰는 타입은 CodeHighlighter · CodeToken 입니다.

데모 ​

npm install nabi-note

import { nabi } from 'nabi-note'
import 'nabi-note/style.css'

nabi.create('#editor', {
  wings: [],
  locale: 'ko',
  onChange: (html) => 저장(html),
})