@tnotesjs/ui 0.3.0 → 0.3.1

package/dist/code/highlight.js

@@ -132,13 +132,17 @@ async function prepareCodeHighlighter(languages = []) {
   );
   return highlighter;
 }
-function transformers(meta) {
+function lineNumberDigits(source, meta) {
+  return String(meta.startLine + source.split("\n").length - 1).length;
+}
+function transformers(meta, gutterDigits) {
   return [
     {
       name: "tnotes-code-meta",
       pre(node) {
         this.addClassToHast(node, "tn-code-highlight");
         node.properties.tabindex = 0;
+        node.properties.style = `--tn-line-digits: ${gutterDigits}`;
       },
       line(node, line) {
         node.properties["data-line"] = String(meta.startLine + line - 1);
@@ -150,13 +154,14 @@ function transformers(meta) {
 function highlightCodeSync(code, info = "") {
   if (!ready) throw new Error("Call prepareCodeHighlighter before rendering Markdown");
   const meta = parseCodeMeta(info);
+  const source = code.replace(/\n$/, "");
   const normalizedLanguage = normalizeCodeLanguage(meta.language);
   const language = ready.getLoadedLanguages().includes(normalizedLanguage) ? normalizedLanguage : "text";
-  return ready.codeToHtml(code.replace(/\n$/, ""), {
+  return ready.codeToHtml(source, {
     lang: language,
     themes: { light: "github-light", dark: "github-dark" },
     defaultColor: false,
-    transformers: transformers(meta)
+    transformers: transformers(meta, lineNumberDigits(source, meta))
   });
 }
 async function highlightCode(code, info = "") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tnotesjs/ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Shared Vue UI for TNotes built-in blocks — consumed by the TNotes SSG and Desk.",
   "type": "module",
   "exports": {
@@ -82,13 +82,13 @@
   },
   "dependencies": {
     "@excalidraw/excalidraw": "0.18.1",
+    "@tnotesjs/mindmap-core": "workspace:^",
     "marked": "^15.0.11",
     "mermaid": "^11.17.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "sass": "^1.90.0",
-    "shiki": "4.4.2",
-    "@tnotesjs/mindmap-core": "^0.2.2"
+    "shiki": "4.4.2"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
@@ -134,6 +134,7 @@
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "vitest run",
     "lint": "eslint . --max-warnings=0",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "prepublishOnly": "pnpm test && pnpm typecheck && pnpm build"
   }
-}
+}

package/src/code/highlight.ts

@@ -127,7 +127,18 @@ export async function prepareCodeHighlighter(languages: string[] = []): Promise<
   return highlighter
 }
 
-function transformers(meta: CodeMeta): ShikiTransformer[] {
+/**
+ * How many characters the line-number gutter has to hold.
+ *
+ * Counted from the source up front because the width belongs on the root `<pre>`
+ * and has to be set before Shiki visits the lines: sizing each `::before` from
+ * its own number would let the code text jump between lines.
+ */
+function lineNumberDigits(source: string, meta: CodeMeta): number {
+  return String(meta.startLine + source.split('\n').length - 1).length
+}
+
+function transformers(meta: CodeMeta, gutterDigits: number): ShikiTransformer[] {
   // Fence `{N}` line highlights only — match Desk CodeMirror. No Shiki
   // notation transformers (`[!code ++]` etc.); Desk has no write path for them.
   return [
@@ -136,6 +147,8 @@ function transformers(meta: CodeMeta): ShikiTransformer[] {
       pre(node) {
         this.addClassToHast(node, 'tn-code-highlight')
         node.properties.tabindex = 0
+        // Inherited by every line's `::before`, which is what sizes the gutter.
+        node.properties.style = `--tn-line-digits: ${gutterDigits}`
       },
       line(node, line) {
         node.properties['data-line'] = String(meta.startLine + line - 1)
@@ -149,15 +162,16 @@ function transformers(meta: CodeMeta): ShikiTransformer[] {
 export function highlightCodeSync(code: string, info = ''): string {
   if (!ready) throw new Error('Call prepareCodeHighlighter before rendering Markdown')
   const meta = parseCodeMeta(info)
+  const source = code.replace(/\n$/, '')
   const normalizedLanguage = normalizeCodeLanguage(meta.language)
   const language = ready.getLoadedLanguages().includes(normalizedLanguage)
     ? normalizedLanguage
     : 'text'
-  return ready.codeToHtml(code.replace(/\n$/, ''), {
+  return ready.codeToHtml(source, {
     lang: language,
     themes: { light: 'github-light', dark: 'github-dark' },
     defaultColor: false,
-    transformers: transformers(meta)
+    transformers: transformers(meta, lineNumberDigits(source, meta))
   })
 }
 

package/src/styles/code.css

@@ -116,8 +116,14 @@
 .tn-code-block.has-line-numbers .line::before {
   content: attr(data-line);
   display: inline-block;
-  width: 3ch;
-  padding-right: 16px;
+  /*
+   * Gutter width follows the widest number this block actually prints — the
+   * highlighter sets `--tn-line-digits` per block, so a two-line snippet is not
+   * padded like a thousand-line file. 3ch is the fallback for renderers that
+   * bring their own line numbers.
+   */
+  width: calc(var(--tn-line-digits, 3) * 1ch);
+  padding-right: 12px;
   text-align: right;
   color: var(--tn-c-text-2);
   user-select: none;