குறியீடு ​

சாதாரண உடல் உரையிலிருந்து தனியாக பல வரி குறியீட்டைச் சேர்க்கவும். வெற்றுப் பத்தியில் மூன்று backtick-களை உள்ளிட்டு Space அல்லது Enter அழுத்தவும், அல்லது கருவிப்பட்டையில் குறியீட்டுத் தொகுதிக்கு மாறவும். backtick-களுக்குப் பின் 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: 'ta' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'ta' }
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 ஐ இணைக்கவும். viewer pre > code ஐக் கண்டுபிடித்து, அதன் பெற்றோர் கூறின் data-nabi-lang மதிப்பை மொழிப் பெயராகப் படிக்கும். அது இல்லையெனில் code கூறின் language-... வகுப்பைப் பார்க்கும்.

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

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

// வெளியிட்ட HTML-ஐ மாற்றிய பிறகு
viewer.refresh()

// திரையை மூடும்போது
viewer.unmount()

தனி முன்னிலைப்படுத்தி இல்லையெனில் அல்லது அது அந்த மொழியைக் கையாள முடியாவிட்டால் சார்புகள் இல்லாத உள்ளமை tokenizer நிறமிடும். முன்னிலைப்படுத்தி சேர்க்கும் token span-கள் திரையில் மட்டுமே இருக்கும்; சேமித்த JSON அல்லது மூல வெளியீட்டு HTML-க்கு மீண்டும் எழுதப்படாது. refresh() மற்றும் unmount() அந்த span-களை அகற்றி தற்போதைய மூலக் குறியீட்டிலிருந்து மீண்டும் இணைக்கும்.

NABI வலைத்தளம் Shiki-ஐ இணைக்கும் முறை ​

Shiki முதல் திரை அல்லது SSR bundle-இல் சேராமல் இருக்க NABI வலைத்தளம் முன்னிலைப்படுத்தியை மாறும் விதத்தில் ஏற்றுகிறது. nabi-web/docs/.vitepress/src/highlight.ts இல் உள்ள loadCodeHighlighting() Shiki core-ஐ உருவாக்கி, அந்த மொழிக் குறியீடு உண்மையில் தேவைப்படும்போது மட்டுமே அதன் grammar-ஐப் பெறுகிறது. கீழுள்ள எடுத்துக்காட்டு வெளியீட்டுப் பக்கத்தில் இதே இணைப்பைப் பயன்படுத்துகிறது.

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

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

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

// திரையை மூடும்போது
stop?.()
viewer.unmount()

ஒரு மொழி முதலில் தோன்றும்போது grammar பதிவிறக்கம் தொடங்கும். அதுவரை தொகுதி உள்ளமை tokenizer உடனோ வெற்று உரையாகவோ காட்டப்படும். grammar வந்ததும் onGrammarLoaded(), viewer.refresh() ஐ அழைத்து மீண்டும் நிறமிடும். இதனால் தேவையான மொழிகள் மட்டுமே பதிவிறக்கப்படும்; தாமதமாக வந்த grammar-உம் அடுத்த பக்க வழிசெலுத்தல் இல்லாமல் பயன்படும்.

தொகுப்பி பக்கமும் இதே highlight செயல்பாட்டைப் பயன்படுத்துகிறது. NABI வலைத்தள demo இயல்புநிலை codeWing இன் attach ஐ மட்டும் makeCodeAttach({ highlight, version }) ஆக மாற்றுகிறது. grammar வரும் ஒவ்வொரு முறையும் version மாறி, ஏற்கனவே வரையப்பட்ட குறியீட்டை மீண்டும் நிறமிடும் சைகையாகச் செயல்படும். தனித்த சேவை முதலில் வெளியீட்டுப் பக்க இணைப்பை உருவாக்கி, திருத்தும்போதும் Shiki நிறமிடல் தேவைப்பட்டால் மட்டும் இந்த முறையைச் சேர்க்கலாம்.

CSS பாணிகள் ​

குறியீட்டுத் தொகுதிகளை .nabi-content pre மூலமும், குறியீட்டை .nabi-content pre > code மூலமும் வடிவமைக்கவும். white-space ஐ மாற்றாதீர்கள்; அது குறியீட்டு வரி முறிவுகளையும் திருத்தத்தையும் பாதிக்கும். token நிறங்களை [data-nabi-token] தேர்விகளால் மாற்றலாம்.

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