Mã ​

Chèn mã nhiều dòng tách biệt với nội dung thường. Trong đoạn trống, nhập ba dấu backtick rồi nhấn Space hoặc Enter, hoặc chuyển đổi từ thanh công cụ. Nếu thêm tên ngôn ngữ như ts sau backtick, tên đó cũng được lưu.

Tên ngôn ngữ là mã định danh dùng để tô sáng cú pháp; bạn có thể nhập trực tiếp cả tên ngoài danh sách đăng ký. Vì cần giữ nguyên nội dung mã và thụt lề, khối mã không áp dụng căn chỉnh đoạn văn.

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

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

Kết nối trình tô sáng mã ​

Khi đăng ký khối mã, trình soạn thảo dùng màu mặc định. Để tô màu cả trên trang xuất bản, hãy kết nối nabi-note/viewer. Viewer tìm pre > code và đọc giá trị data-nabi-lang của phần tử cha làm tên ngôn ngữ. Nếu không có giá trị đó, nó kiểm tra lớp language-... của phần tử code.

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

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

// Sau khi thay đổi HTML xuất bản
viewer.refresh()

// Khi đóng màn hình
viewer.unmount()

Nếu không có trình tô sáng riêng hoặc nó không xử lý được ngôn ngữ đó, bộ tách từ tích hợp không phụ thuộc sẽ tô màu thay thế. Các span token do trình tô sáng thêm chỉ tồn tại trên màn hình, không còn trong JSON đã lưu hay nguồn HTML xuất bản. refresh() và unmount() xóa các span này và kết nối lại với mã nguồn hiện tại.

Cách website NABI kết nối Shiki ​

Để loại Shiki khỏi màn hình đầu tiên và gói SSR, website NABI tải trình tô sáng động. loadCodeHighlighting() trong nabi-web/docs/.vitepress/src/highlight.ts tạo Shiki core và chỉ lấy ngữ pháp của ngôn ngữ khi mã thực sự cần đến. Dưới đây là cùng cách kết nối dùng trên trang xuất bản.

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

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

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

// Khi đóng màn hình
stop?.()
viewer.unmount()

Khi gặp một ngôn ngữ lần đầu, việc tải ngữ pháp bắt đầu và trong lúc đó mã hiển thị bằng bộ tách từ tích hợp hoặc văn bản thuần. Khi ngữ pháp đến, onGrammarLoaded() gọi viewer.refresh() để tô màu lại. Nhờ vậy chỉ ngôn ngữ cần thiết được tải, và ngữ pháp đến muộn cũng được phản ánh mà không cần chuyển màn hình.

Phía trình soạn thảo cũng dùng cùng hàm highlight. Bản demo của website NABI chỉ thay attach của codeWing mặc định bằng makeCodeAttach({ highlight, version }). version thay đổi mỗi khi một ngữ pháp đến và là dấu hiệu để tô lại cả mã đã vẽ. Dịch vụ độc lập nên kết nối trang xuất bản trước, rồi thêm cách này khi thật sự cần tô màu Shiki trong lúc chỉnh sửa.

Kiểu CSS ​

Tạo kiểu khối mã bằng .nabi-content pre, mã bằng .nabi-content pre > code. Không thay đổi white-space vì nó ảnh hưởng đến ngắt dòng và việc chỉnh sửa mã. Bạn có thể đổi màu token bằng bộ chọn [data-nabi-token].

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