NABI NOTE
Tài liệu

Đánh dấu ​

Tô màu đánh dấu phía sau chữ được chọn. Dữ liệu lưu chỉ giữ tên màu được cho phép thay vì giá trị màu CSS tùy ý, vì vậy bạn có thể tách kiểu hiển thị khỏi dữ liệu tài liệu.

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, linkWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  textColorWing,
  highlightWing,
  linkWing,
]
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('hl', {
  values: ['yellow', 'green', 'cyan'],
}).build()

Nếu bỏ qua values, các màu yellow, green, cyan, pink, purple, orange được dùng. Khi thu hẹp danh sách, màu không đăng ký sẽ không được giữ cả trong tài liệu đã tải.

Kiểu CSS ​

Tài liệu chỉ lưu tên màu. Thay đổi màu trong trình soạn thảo và trang xuất bản bằng biến CSS.

css
.nabi-content { --nabi-hl-yellow: #fff0a6; }

Khi đổi nhiều màu cùng lúc, bạn có thể đổi không khí của dịch vụ mà vẫn giữ nguyên tên màu trong tài liệu.

css
.article-body {
  --nabi-hl-yellow: #fff0a6;
  --nabi-hl-green: #c8f0d8;
  --nabi-hl-pink: #ffd6e5;
}