दस्तऐवज

मजकूर रंग

निवडलेल्या मजकुराला परवानगी असलेले रंग नाव द्या. साठवलेले मूल्य CSS color string नसते; ते परवानगीचे नाव असते आणि खरा रंग CSS variable --nabi-tc-<name> ठरवतो. त्यामुळे तेच document light व dark themes मध्ये वाचनीय राहते.

चिकट साधनपट्टी मोबाइल कळफलकाची जागामूलभूत अक्षररूपअंतर

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: 'mr' })

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

values वगळल्यास green, coral, violet, amber आणि blue हे default palette असते. सूची कमी केल्यास इतर रंग command ने आणि document लोड करताना नाकारले जातात.

CSS शैली

document फक्त रंगनाव साठवते. editor आणि प्रकाशित दृश्याचे खरे रंग CSS variables ने ठरवा.

css

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

पार्श्वभूमी रंगासह contrast तपासा. dark theme मध्ये त्याच रंगनावाला वेगळे मूल्य देता येते.

css

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