NABI NOTE
Tài liệu

Màu chữ ​

Áp dụng tên màu cho chữ được chọn. Giá trị lưu không phải chuỗi màu CSS mà là tên đã cho phép; màu thực được xác định bằng biến CSS --nabi-tc-<name>. Vì vậy cùng một tài liệu có thể được điều chỉnh để dễ đọc trong giao diện sáng và tối.

Wings
Kiểu chữ cơ sởĐộ lệch
HTMLĐang tải trình soạn thảo…
JSONnabi-treeĐang tải trình soạn thảo…
Cài đặt
npm install nabi-note
Mã
import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, textColorWing, highlightWing, mountViewTools,
} from 'nabi-note'

const selected = [
  textColorWing,
  highlightWing,
]
const { nabi, registry } = createNabiWith(selected)

const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!

// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale: 'vi' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'vi' }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')! })
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })

// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))
ts
const selected = wings().use('tc', {
  values: ['green', 'coral', 'blue'],
}).build()

Nếu bỏ qua values, bảng màu mặc định (green, coral, violet, amber, blue) được dùng. Khi rút gọn danh sách, các màu khác không được chấp nhận cả trong lệnh lẫn khi tải.

Kiểu CSS ​

Tài liệu chỉ lưu tên màu. Màu thực trong trình soạn thảo và trang xuất bản được xác định bằng biến CSS.

css
.nabi-content { --nabi-tc-blue: #2563eb; }

Hãy điều chỉnh màu chữ cùng màu nền để kiểm tra độ tương phản. Trong giao diện tối, bạn có thể gán giá trị khác cho cùng tên màu.

css
.dark .article-body {
  --nabi-tc-blue: #93c5fd;
  --nabi-tc-green: #86efac;
}