스타일 바꾸기
기본 스타일은 mount 할 때 스스로 주입됩니다. 시트(stylesheet)를 import 하지 않아도 에디터가 제 모양으로 섭니다.
색과 모양은 CSS 변수를 덮어 바꾸고, 변수로 안 되는 것은 시트를 직접 다룹니다.
색과 모양은 변수로
컴포넌트 규칙에는 색 리터럴이 한 글자도 없습니다. 전부 --nabi-* 변수로 그려져 있어서, 변수만 덮으면 나머지가 따라옵니다.
.nabi,
.nabi-overlay {
--nabi-accent: #7c3aed;
--nabi-radius: 4px;
--nabi-min-height: 400px;
}.nabi-overlay 를 빠뜨리지 마세요
떠 있는 상자(@ 메뉴 · 표 크기 격자 · 주소 입력창 · 알림)는 document.body 에 붙습니다. 편집기 안이 아니므로 .nabi 만 덮으면 그 상자들만 기본 색으로 남습니다.
| 토큰 | 뜻 | 기본값 |
|---|---|---|
--nabi-font · --nabi-font-serif · --nabi-font-mono | 본문 · 세리프 · 고정폭 글꼴. 서체 날개가 이 셋을 가리킵니다 | 시스템 글꼴 |
--nabi-font-size · --nabi-line-height | 본문 크기 · 줄 간격 | 1rem · 1.7 |
--nabi-bg · --nabi-bg-subtle · --nabi-bg-hover | 면 | 흰색 계열 |
--nabi-color · --nabi-muted · --nabi-on-accent | 글자 | 진회색 · 회색 · 흰색 |
--nabi-border · --nabi-accent | 선 · 강조색 | #d8dce3 · #3b6ef5 |
--nabi-danger · --nabi-on-danger | 지우는 동작 | 붉은색 계열 |
--nabi-radius · --nabi-radius-sm | 모서리 | 12px · 8px |
--nabi-padding · --nabi-min-height | 본문 여백 · 최소 높이 | 16px 18px · 240px |
--nabi-shadow · --nabi-scrim | 상자 그림자 · 크게 보기 배경 | — |
--nabi-dropcap-lines | 드롭 캡이 감쌀 줄 수 | 3 |
--nabi-code-* | 코드 토큰 색(keyword·string…) | GitHub 계열 |
--nabi-z · --nabi-z-lightbox · --nabi-z-fullscreen | 겹침 순서 | 아주 큰 값 |
특이도에 걸리지 않게
테마 규칙이 :where(html, body).dark .nabi 라 특이도가 (0,2,0) 입니다. 같은 값으로 맞추면 어느 시트가 먼저 실리느냐에 따라 결과가 달라집니다. 클래스를 한 겹 더 겹쳐 순서에 기대지 않게 하세요.
/* 이 사이트가 쓰는 방법입니다 — 클래스를 세 번 겹쳐 (0,3,0) 으로 올립니다. */
.nabi.nabi.nabi,
.nabi-overlay.nabi-overlay.nabi-overlay {
--nabi-accent: var(--내-강조색);
}라이트 · 다크
html 이나 body 둘 중 하나에 dark 클래스가 있으면 다크, light 면 라이트입니다. 클래스가 없으면 라이트가 기본이고, 둘 다 있으면 명시적 light 가 이깁니다.
<html class="dark"><!-- 또는 <body class="dark"> --></html>클래스를 토글하면 CSS 가 반응합니다. 부를 API 는 없습니다. 편집 영역과 떠 있는 상자가 함께 바뀌고, color-scheme 도 따라가 스크롤바 같은 브라우저 기본 UI 까지 맞춰집니다.
테마가 갈아 끼우는 것은 색 변수뿐이고 컴포넌트 규칙은 그대로입니다. 직접 만든 스타일도 --nabi-* 변수만 쓰면 다크를 따라갑니다.
시트를 직접 다루기
injectStyles: false 로 자동 주입을 끄고 파일로 걸 수 있습니다.
import 'nabi-note/style.css' // 또는 <link rel="stylesheet" href="/nabi.css">
nabi.create('#editor', { injectStyles: false })dist/nabi.css 는 코어 시트와 번들 날개(wing)의 시트를 이어 붙인 한 장이라 이 파일만 실으면 전부 받습니다. 문자열로 받는 NABI_CSS 에는 코어만 담기므로, 자동 주입을 끈 채 <link> 만 걸 때는 dist/nabi.css 를 쓰세요.
import { NABI_CSS, NABI_STYLE_ID } from 'nabi-note'
// NABI_STYLE_ID 는 주입된 <style> 의 id 입니다.등록한 날개의 styles 는 코어 시트 뒤에 주입되므로 같은 우선순위에서 날개가 이깁니다. 내용이 같은 시트는 문서당 한 장이라 에디터를 여러 개 띄워도 쌓이지 않습니다.
붙일 수 있는 자리
변수로 안 되는 것은 클래스를 직접 겨냥합니다. 이름은 공개된 표면으로 봅니다.
| 선택자 | 무엇 |
|---|---|
.nabi | 에디터 전체를 감싸는 껍데기 |
.nabi__toolbar · .nabi__group · .nabi__button | 툴바와 버튼 무리 |
.nabi__commands · .nabi__control | 상황 줄(context row)과 날개가 직접 그린 컨트롤 |
.nabi-note | 문서 뿌리 — 저장된 HTML 을 밖에서 그릴 때 다는 유일한 클래스입니다 |
.nabi-editor | 편집 영역 (편집 화면 전용 규칙 — 캐럿·선택 표식·placeholder) |
.nabi-overlay | 떠 있는 상자의 공통 껍데기 |
.nabi-menu · .nabi-grid | @ 메뉴 · 표 크기 격자 |
상태는 껍데기의 클래스로 나타납니다 — .nabi--readonly · .nabi--locked(업로드 중) · .nabi--dropping(파일을 끌고 왔을 때) · .nabi--fullscreen.
편집 화면 전용 표식도 겨냥할 수 있습니다 — data-nabi-selected(물건을 통째로 골랐을 때) · data-nabi-active(속을 편집하는 물건 안) · data-nabi-object(캐럿을 감출 때) · data-nabi-empty(빈 문서) · data-nabi-cell-selected(드래그·키보드로 고른 표 칸) · data-nabi-cell-anchor(그 선택의 기준점) · data-nabi-cell-dragging(칸을 넘어 드래그하는 중인 표). 이 일곱은 저장값에 나가지 않습니다.
직접 만든 날개에 시트를 실을 때 규칙 앞에 세울 뿌리 선택자(NOTE_SCOPE · EDITOR_SCOPE · TOKEN_SCOPE)는 커스텀 날개 만들기 에 있습니다.
저장한 HTML 을 밖에서 그릴 때
나가는 값은 뜻이 걸린 모양만 인라인 style 로 굳습니다. 나머지(제목 크기·표 테두리·드롭 캡·체크리스트 네모)는 시트의 몫이라, 보여 주는 쪽에서도 같은 모습으로 그리려면 두 가지가 필요합니다.
<link rel="stylesheet" href="/nabi.css" />
<div class="nabi-note">저장한 HTML</div>문서 뿌리는 .nabi-note 하나입니다. 여기에는 문서 서식만 걸리고 편집 화면 전용 규칙(캐럿·선택 테두리·placeholder)은 닿지 않으므로, 그린 모습이 미리보기와 같습니다.
코드 블록의 토큰 색은 인라인 style 에 color:var(--nabi-code-keyword,#cf222e) 꼴로 굳습니다. 시트가 없는 페이지에서는 폴백인 라이트 색이 서고, 시트를 건 페이지에서는 그 페이지의 테마를 따라갑니다.
보는 쪽에서 도는 동작
이미지 클릭 확대나 표 정렬은 자바스크립트가 있어야 도는 동작입니다. nabiViewer 가 저장된 HTML 컨테이너에 그것을 붙입니다. 보는 쪽 페이지가 에디터 전체를 내려받지 않도록 전용 진입점 nabi-note/viewer 로 나옵니다 — 뷰어 111KB(gzip 32KB), 에디터 전체 288KB(gzip 87KB) 입니다.
import { nabiViewer, image, table } from 'nabi-note/viewer';
const detach = nabiViewer(document.querySelector('#article')!, {
wings: [image(), table()],
});무엇이 도는지는 날개가 선언합니다(NabiWing.viewer 훅). 편집기의 wings 옵션과 같은 문법이고, viewer 훅이 없는 날개는 시트만 나르고 지나갑니다. 해제 함수는 꽂은 버튼과 바꾼 행 순서를 되돌립니다.
뷰어도 시트를 스스로 주입합니다. injectStyles: false 로 끄면 코어 시트도 날개 시트도 넣지 않으므로, 라이트박스와 정렬 버튼이 제 모양으로 서려면 dist/nabi.css 를 직접 걸어야 합니다. 에디터의 같은 이름 옵션과 뜻·기본값이 같습니다.
편집 대상 엘리먼트에는 붙이지 마세요
뷰어는 DOM 에 버튼을 꽂고 행 순서를 바꿉니다. 해제 함수가 되돌리지만, 붙어 있는 동안의 DOM 을 저장하면 그것이 값에 굳습니다. 보는 쪽은 읽기 전용 사본이어야 합니다.
다음 문서
- 커스텀 날개 만들기 — 없는 서식을 직접 만들기
- 용어 — 이 문서가 쓰는 말