टेक्स्ट रंग

चयनित पाठ पर अनुमति प्राप्त रंग नाम लागू करें। Nilai tersimpan bukan string warna CSS; nilainya adalah nama yang diizinkan, dan warna sebenarnya ditentukan oleh variabel CSS --nabi-tc-<name>. Dengan begitu dokumen yang sama tetap terbaca di tema terang maupun gelap.

पंख
डिफ़ॉल्ट फ़ॉन्टऊँचाई
HTMLसंपादक लोड हो रहा है…
JSONnabi-treeसंपादक लोड हो रहा है…
इंस्टॉल
npm install nabi-note
कोड
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: 'hi' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'hi' }
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()

Jika values dihilangkan, palet default adalah green, coral, violet, amber, dan blue. Jika daftar dikurangi, warna lain ditolak oleh perintah dan saat memuat dokumen.

CSS स्टाइल

Dokumen hanya menyimpan nama warna. Atur warna sebenarnya untuk editor dan tampilan terbit dengan variabel CSS.

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

Periksa kontras bersama warna latar. Dalam tema gelap, nama warna yang sama dapat menerima nilai berbeda.

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