কোড ​

সাধারণ মূল লেখা থেকে আলাদা করে একাধিক লাইনের কোড দিন। খালি অনুচ্ছেদে তিনটি backtick লিখে Space বা Enter চাপুন, অথবা টুলবার থেকে বদলান। backtick-এর পরে ts-এর মতো ভাষার নাম দিলে সেই নামও সংরক্ষিত হয়।

ভাষার নাম syntax highlighting-এ ব্যবহৃত শনাক্তকারী; নিবন্ধিত তালিকার বাইরের নামও নিজে লেখা যায়। কোডের বিষয়বস্তু ও indentation অক্ষত রাখতে কোড block-এ অনুচ্ছেদ সারিবদ্ধকরণ প্রয়োগ হয় না।

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

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

কোড হাইলাইটার সংযোগ ​

কোড block নিবন্ধন করলে সম্পাদকে মৌলিক রং করা ব্যবহৃত হয়। প্রকাশিত পর্দাতেও রং করতে nabi-note/viewer সংযোগ করুন। viewer pre > code খুঁজে parent-এর data-nabi-lang মানকে ভাষার নাম হিসেবে পড়ে। সেটি না থাকলে code element-এর language-... class দেখে।

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

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

// প্রকাশিত HTML বদলানোর পরে
viewer.refresh()

// পর্দা বন্ধের সময়
viewer.unmount()

আলাদা হাইলাইটার না থাকলে, বা সেটি ভাষাটি সামলাতে না পারলে নির্ভরতাবিহীন অন্তর্নির্মিত tokenizer রং দেয়। হাইলাইটার বসানো token span কেবল পর্দায় থাকে; সংরক্ষিত JSON বা মূল প্রকাশিত HTML-এ থাকে না। refresh() ও unmount() এই span মুছে বর্তমান মূল কোডের সঙ্গে আবার সংযোগ করে।

NABI ওয়েবসাইটে Shiki সংযোগের পদ্ধতি ​

NABI ওয়েবসাইট প্রথম পর্দা ও SSR bundle থেকে Shiki বাদ রাখতে হাইলাইটারটি গতিশীলভাবে আনে। nabi-web/docs/.vitepress/src/highlight.ts-এর loadCodeHighlighting() Shiki core তৈরি করে এবং বাস্তবে কোড ভাষা দরকার হলেই শুধু তার ব্যাকরণ আনে। নিচে প্রকাশিত পর্দায় ব্যবহৃত একই সংযোগ-পদ্ধতি আছে।

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

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

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

// পর্দা বন্ধের সময়
stop?.()
viewer.unmount()

প্রথমবার কোনো ভাষা পেলে ব্যাকরণ ডাউনলোড শুরু হয়; ততক্ষণ অন্তর্নির্মিত tokenizer বা সাধারণ লেখা দেখা যায়। ব্যাকরণ এলে onGrammarLoaded() viewer.refresh() ডেকে আবার রং করে। ফলে প্রয়োজনীয় ভাষাই নামানো হয় এবং দেরিতে আসা ব্যাকরণও পরের পর্দা পরিবর্তন ছাড়া কার্যকর হয়।

সম্পাদক দিকেও একই highlight function ব্যবহৃত হয়। NABI ওয়েবসাইটের ডেমো মৌলিক codeWing-এর attach-কেই makeCodeAttach({ highlight, version }) দিয়ে বদলায়। version প্রতিবার একটি ব্যাকরণ এলে বদলায়; এতে আগে আঁকা কোডও আবার রং হয়। স্বতন্ত্র service আগে প্রকাশিত পর্দার সংযোগই বাস্তবায়ন করতে পারে, সম্পাদনার সময়েও Shiki রং জরুরি হলে পরে এই পদ্ধতি যোগ করুন।

CSS শৈলী ​

কোড block .nabi-content pre এবং কোড .nabi-content pre > code দিয়ে সাজান। white-space বদলাবেন না; এটি কোডের line break ও সম্পাদনায় প্রভাব ফেলে। [data-nabi-token] selector দিয়ে token-এর রং বদলানো যায়।

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