కోడ్ ​

సాధారణ శరీర వచనం నుంచి వేరుగా బహుళ-పంక్తి కోడ్‌ను చేర్చండి. ఖాళీ పేరాలో మూడు బ్యాక్‌టిక్‌లు టైప్ చేసి Space లేదా Enter నొక్కండి, లేదా టూల్‌బార్ నుంచి కోడ్ బ్లాక్‌కు మార్చండి. బ్యాక్‌టిక్‌ల తర్వాత ts వంటి భాష పేరును చేరిస్తే, ఆ పేరు కూడా నిల్వ అవుతుంది.

భాష పేరు సింటాక్స్ హైలైటింగ్‌కు వాడే గుర్తింపు; నమోదైన జాబితా వెలుపలి పేర్లను కూడా చేతితో టైప్ చేయవచ్చు. కోడ్ కంటెంట్, ఇండెంటేషన్ నిలవాలి కాబట్టి కోడ్ బ్లాక్‌లు పేరా సమలేఖనాన్ని స్వీకరించవు.

npm install nabi-note

import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, detailsWing, codeWing, youtubeWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  detailsWing,
  codeWing,
  youtubeWing,
]
const { nabi, registry } = createNabiWith(selected)

// Bring your own highlighter (Prism, highlight.js, Shiki, …) — the wing stays as it is
// and only the attach is swapped (`makeCodeAttach` ships from the same door)
// { ...codeWing, attach: makeCodeAttach({ highlight: (source, lang) => [{ text: source }] }) }

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

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

const selected = wings().use('code').build()

కోడ్ హైలైటర్‌ను కలపడం ​

కోడ్ బ్లాక్‌ను నమోదు చేస్తే ఎడిటర్‌లో డిఫాల్ట్ రంగులు వాడతాయి. ప్రచురిత వీక్షణలో కూడా కోడ్‌కు రంగు ఇవ్వాలంటే nabi-note/viewerను కలపండి. వీయర్ pre > codeను కనుగొని, తల్లిదండ్రి ఎలిమెంట్ data-nabi-lang విలువను భాష పేరుగా చదువుతుంది. ఆ విలువ లేకపోతే code ఎలిమెంట్‌లోని language-... క్లాస్‌ను చూస్తుంది.

import { attachViewer } from 'nabi-note/viewer'

const viewer = attachViewer(article, {
  locale: 'en',
})

// ప్రచురిత HTMLను మార్చిన తర్వాత
viewer.refresh()

// తెర మూసేటప్పుడు
viewer.unmount()

వేరు హైలైటర్ లేకపోయినా లేదా అది ఆ భాషను నిర్వహించలేకపోయినా, డిపెండెన్సీలు లేని అంతర్నిర్మిత టోకెనైజర్ రంగు ఇస్తుంది. హైలైటర్ చేర్చిన టోకెన్ స్పాన్‌లు తెరపై మాత్రమే ఉంటాయి; నిల్వ JSON లేదా అసలు ప్రచురిత HTMLలోకి తిరిగి రాయబడవు. refresh(), unmount() ఆ స్పాన్‌లను తొలగించి ప్రస్తుత అసలు కోడ్ నుంచి మళ్లీ కలుపుతాయి.

NABI వెబ్‌సైట్ Shikiని ఎలా కలుపుతుంది ​

NABI వెబ్‌సైట్ హైలైటర్‌ను డైనమిక్‌గా లోడ్ చేస్తుంది; అందువల్ల Shiki మొదటి తెర లేదా SSR బండిల్‌లో చేరదు. nabi-web/docs/.vitepress/src/highlight.tsలోని loadCodeHighlighting() Shiki కోర్‌ను సృష్టించి, ఆ భాషలో కోడ్ నిజంగా అవసరమైనప్పుడే దాని వ్యాకరణాన్ని తెస్తుంది. దిగువ ఉదాహరణ ప్రచురిత వీక్షణలో ఇదే అనుసంధానాన్ని వాడుతుంది.

import { attachViewer } from 'nabi-note/viewer'
import { loadCodeHighlighting } from '../src/highlight'

const highlighting = await loadCodeHighlighting()
const viewer = attachViewer(article, {
  locale: 'en',
  highlight: highlighting?.highlight,
})

const stop = highlighting?.onGrammarLoaded(() => viewer.refresh())

// తెర మూసేటప్పుడు
stop?.()
viewer.unmount()

భాష మొదటిసారి కనిపించినప్పుడు వ్యాకరణ డౌన్‌లోడ్ మొదలవుతుంది. అప్పటివరకు బ్లాక్ అంతర్నిర్మిత టోకెనైజర్‌తో లేదా సాధారణ వచనంగా కనిపిస్తుంది. వ్యాకరణం వచ్చిన వెంటనే onGrammarLoaded() viewer.refresh()ను పిలిచి బ్లాక్‌కు మళ్లీ రంగు ఇస్తుంది. దీంతో అవసరమైన భాషలే డౌన్‌లోడ్ అవుతాయి; ఆలస్యంగా వచ్చిన వ్యాకరణం మరో పేజీ నావిగేషన్ లేకుండానే వర్తిస్తుంది.

ఎడిటర్ వైపు కూడా అదే highlight ఫంక్షన్‌ను వాడుతుంది. NABI వెబ్‌సైట్ డెమో డిఫాల్ట్ codeWingలోని attachను మాత్రమే makeCodeAttach({ highlight, version })తో మారుస్తుంది. వ్యాకరణం వచ్చినప్పుడల్లా version మారి, ఇప్పటికే చిత్రించిన కోడ్‌ను మళ్లీ గీయడానికి సంకేతంగా పనిచేస్తుంది. స్వతంత్ర సేవ ముందుగా ప్రచురిత వీక్షణ అనుసంధానాన్ని అమలు చేసి, సవరించేటప్పుడూ Shiki రంగులు కావాలంటేనే ఈ విధానాన్ని జోడించవచ్చు.

CSS శైలులు ​

కోడ్ బ్లాక్‌లకు .nabi-content pre, కోడ్‌కు .nabi-content pre > codeతో శైలి ఇవ్వండి. white-spaceను మార్చవద్దు; అది కోడ్ పంక్తి విరామాలు, సవరణను ప్రభావితం చేస్తుంది. [data-nabi-token] సెలెక్టర్లతో టోకెన్ రంగులను మార్చవచ్చు.

.nabi-content [data-nabi-token="keyword"] { color: #7b4fd0; }
.nabi-content [data-nabi-token="string"] { color: #a2543a; }