comark 0.1.0 → 0.1.1

package/README.md

@@ -8,7 +8,7 @@
 [![Documentation](https://img.shields.io/badge/Documentation-black?logo=readme&logoColor=white)](https://comark.dev)
 [![license](https://img.shields.io/github/license/comarkdown/comark?color=black)](https://github.com/comarkdown/comark/blob/main/LICENSE)
 
-A high-performance markdown parser and renderer with Vue, React & Svelte components support.
+A high-performance markdown parser and renderer with Vue, React, Svelte, HTML and ANSI terminal.
 
 ## Features
 

package/dist/internal/stringify/handlers/a.js

@@ -1,4 +1,4 @@
-import { comarkAttributes } from '../attributes';
+import { comarkAttributes } from "../attributes.js";
 // TODO: support title & attributes
 export async function a(node, state) {
     const [_, attrs] = node;

package/dist/internal/stringify/handlers/code.js

@@ -1,4 +1,4 @@
-import { comarkAttributes } from '../attributes';
+import { comarkAttributes } from "../attributes.js";
 import { textContent } from 'comark/utils';
 export function code(node, _state) {
     const [_, attrs] = node;

package/dist/internal/stringify/handlers/emphesis.js

@@ -1,4 +1,4 @@
-import { comarkAttributes } from '../attributes';
+import { comarkAttributes } from "../attributes.js";
 export async function emphesis(node, state) {
     const [_, attrs, ...children] = node;
     let content = '';

package/dist/internal/stringify/handlers/html.js

@@ -1,5 +1,5 @@
-import { htmlAttributes } from '../attributes';
-import { indent } from '../indent';
+import { htmlAttributes } from "../attributes.js";
+import { indent } from "../indent.js";
 const textBlocks = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'td', 'th']);
 const selfCloseTags = new Set(['br', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr']);
 const inlineTags = new Set(['strong', 'em', 'code', 'a', 'br', 'span', 'img']);

package/dist/internal/stringify/handlers/img.js

@@ -1,4 +1,4 @@
-import { comarkAttributes } from '../attributes';
+import { comarkAttributes } from "../attributes.js";
 export function img(node, _state) {
     const [_, attrs] = node;
     const { title, src, alt, ...rest } = attrs;

package/dist/internal/stringify/handlers/mermaid.js

@@ -1,4 +1,4 @@
-import { comarkAttributes } from '../attributes';
+import { comarkAttributes } from "../attributes.js";
 const fence = '```';
 export function mermaid(node, state) {
     const [_, attributes] = node;

package/dist/internal/stringify/handlers/ol.js

@@ -1,4 +1,4 @@
-import { indent } from '../indent';
+import { indent } from "../indent.js";
 export async function ol(node, state) {
     const children = node.slice(2);
     const revert = state.applyContext({ list: true, order: 1 });

package/dist/internal/stringify/handlers/strong.js

@@ -1,4 +1,4 @@
-import { comarkAttributes } from '../attributes';
+import { comarkAttributes } from "../attributes.js";
 export async function strong(node, state) {
     const [_, attrs, ...children] = node;
     let content = '';

package/dist/internal/stringify/handlers/ul.js

@@ -1,4 +1,4 @@
-import { indent } from '../indent';
+import { indent } from "../indent.js";
 export async function ul(node, state) {
     const children = node.slice(2);
     const revert = state.applyContext({ list: true, order: false });

package/dist/plugins/highlight.d.ts

@@ -1,6 +1,7 @@
 import type { LanguageRegistration } from 'shiki';
 import type { ComarkNode, ComarkTree, ComarkPlugin } from 'comark';
 import type { ShikiPrimitive, ThemeRegistration } from '@shikijs/primitive';
+import type { ShikiTransformer } from '@shikijs/types';
 export interface HighlightOptions {
     /**
      * Whether to use the default language definitions
@@ -25,12 +26,23 @@ export interface HighlightOptions {
         light?: ThemeRegistration;
         dark?: ThemeRegistration;
     };
+    /**
+     * Transformers to apply to the code blocks
+     * @default undefined
+     */
+    transformers?: ShikiTransformer[];
     /**
      * Whether to add pre styles to the code blocks
      * @default false
      */
     preStyles?: boolean;
 }
+export interface CodeBlockAttributes {
+    language?: string;
+    class?: string;
+    highlights?: number[];
+    meta?: string;
+}
 /**
  * Get or create the Shiki highlighter instance
  * Uses a singleton pattern to avoid creating multiple highlighters
@@ -38,13 +50,9 @@ export interface HighlightOptions {
 export declare function getHighlighter(options?: HighlightOptions): Promise<ShikiPrimitive>;
 /**
  * Highlight code using Shiki with codeToTokens
- * Returns comark nodes built from tokens
+ * Returns comark nodes built from hast
  */
-export declare function highlightCode(code: string, attrs: {
-    language?: string;
-    class?: string;
-    highlights?: number[];
-}, options?: HighlightOptions): Promise<{
+export declare function highlightCode(code: string, attrs: CodeBlockAttributes, options?: HighlightOptions): Promise<{
     nodes: ComarkNode[];
     language: string;
     bgColor?: string;

package/dist/plugins/highlight.js

@@ -1,5 +1,6 @@
-import { createShikiPrimitive, codeToTokensWithThemes } from '@shikijs/primitive';
+import { createShikiPrimitive } from '@shikijs/primitive';
 import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+import { codeToHast } from 'shiki/core';
 let highlighter = null;
 let highlighterPromise = null;
 const loadedThemes = new Set();
@@ -45,20 +46,6 @@ export async function getHighlighter(options = {}) {
         throw error;
     }
 }
-/**
- * Convert color to inline style
- */
-function colorToStyle(token) {
-    if (!token)
-        return undefined;
-    const variants = token.variants;
-    if (!variants)
-        return `color:${token.color}`;
-    const { light: lc, dark: dc } = variants;
-    if (!lc?.color || !dc?.color)
-        return undefined;
-    return lc.color === dc.color ? `color:${lc.color}` : `color:${lc.color};--shiki-dark:${dc.color}`;
-}
 async function registerDefaults(options) {
     const themes = Object.values(options.themes || {});
     const languages = options.languages || [];
@@ -94,7 +81,7 @@ async function loadLanguage(hl, language) {
 }
 /**
  * Highlight code using Shiki with codeToTokens
- * Returns comark nodes built from tokens
+ * Returns comark nodes built from hast
  */
 export async function highlightCode(code, attrs, options = {}) {
     // Extract language from attributes
@@ -102,28 +89,21 @@ export async function highlightCode(code, attrs, options = {}) {
     try {
         const hl = await getHighlighter(options);
         const { themes = { light: 'material-theme-lighter', dark: 'material-theme-palenight' } } = options;
+        const lightTheme = themes.light || themes.dark || 'material-theme-lighter';
+        const darkTheme = themes.dark || themes.light || 'material-theme-palenight';
         // Use codeToTokens to get raw tokens
-        const result = codeToTokensWithThemes(hl, code, {
+        const result = await codeToHast(hl, code, {
             lang: language,
+            transformers: options.transformers,
             themes: {
-                light: themes.light || themes.dark || 'material-theme-lighter',
-                dark: themes.dark || themes.light || 'material-theme-palenight',
+                light: lightTheme,
+                dark: lightTheme !== darkTheme ? darkTheme : undefined,
+            },
+            meta: {
+                __raw: attrs.meta,
             },
         });
-        // Build comark nodes from tokens (flatten all lines)
-        const allTokens = Array.from({ length: result.length });
-        const highlights = attrs.highlights;
-        for (let i = 0; i < result.length; i++) {
-            const lineTokens = result[i];
-            const children = Array.from({ length: lineTokens.length });
-            for (let j = 0; j < lineTokens.length; j++) {
-                const token = lineTokens[j];
-                const style = colorToStyle(token);
-                children[j] = style ? ['span', { style }, token.content] : token.content;
-            }
-            const lineClass = 'line' + (highlights?.includes(i + 1) ? ' highlight' : '');
-            allTokens[i] = ['span', { class: lineClass }, ...children];
-        }
+        const allTokens = result.children.map(hastToMinimarkNode);
         return {
             nodes: allTokens,
             language,
@@ -137,6 +117,20 @@ export async function highlightCode(code, attrs, options = {}) {
             language,
         };
     }
+    function hastToMinimarkNode(input) {
+        const props = input.properties || {};
+        if (input.type === 'comment')
+            return [null, {}, input.value];
+        if (input.type === 'text')
+            return input.value;
+        if (input.tag === 'code' && props?.className && props.className.length === 0)
+            delete props.className;
+        return [
+            input.tagName,
+            props,
+            ...(input.children || []).map(hastToMinimarkNode),
+        ];
+    }
 }
 /**
  * Apply syntax highlighting to all code blocks in a Comark tree
@@ -164,19 +158,24 @@ export async function highlightCodeBlocks(tree, options = {}) {
     if (codeBlocks.length === 0)
         return tree;
     const highlightedResults = await Promise.all(codeBlocks.map(({ node }) => {
-        const attrs = node[1];
-        const codeContent = node[2][2];
-        return highlightCode(codeContent, attrs, options);
+        return highlightCode(node[2][2], node[1], options);
     }));
     const newNodes = JSON.parse(JSON.stringify(tree.nodes));
     for (let i = 0; i < codeBlocks.length; i++) {
         const { node, path } = codeBlocks[i];
         const result = highlightedResults[i];
-        const { nodes } = result;
+        const preNode = result.nodes[0];
+        const preNodeClasses = typeof preNode === 'string'
+            ? ['shiki', options.themes?.light?.name]
+            : (Array.isArray(preNode[1].class)
+                ? preNode[1].class
+                : String(preNode[1].class).split(' '));
+        const codeChildren = preNode[2].slice(2);
+        const children = typeof preNode === 'string' ? preNode : codeChildren.filter(element => element !== '\n');
         const preAttrs = node[1];
         const newPreAttrs = {
             ...preAttrs,
-            class: ['shiki', options.themes?.light?.name, options.themes?.dark?.name ? `dark:${options.themes?.dark?.name}` : ''].filter(Boolean).join(' '),
+            class: [...preNodeClasses, options.themes?.dark?.name ? `dark:${options.themes?.dark?.name}` : ''].filter(Boolean).join(' '),
             tabindex: '0',
         };
         if (options.preStyles) {
@@ -201,7 +200,7 @@ export async function highlightCodeBlocks(tree, options = {}) {
         }
         const codeEl = node[2];
         const codeAttrs = codeEl[1] || {};
-        const newPreNode = ['pre', newPreAttrs, ['code', codeAttrs, ...nodes]];
+        const newPreNode = ['pre', newPreAttrs, ['code', codeAttrs, ...children]];
         if (path.length === 1) {
             newNodes[path[0]] = newPreNode;
         }

package/dist/plugins/security.d.ts

@@ -7,5 +7,5 @@ interface SecurityOptions extends PropsValidationOptions {
      */
     blockedTags?: string[];
 }
-export default function security(options: SecurityOptions): ComarkPlugin;
+export default function security(options?: SecurityOptions): ComarkPlugin;
 export {};

package/dist/plugins/security.js

@@ -1,6 +1,6 @@
 import { visit } from 'comark/utils';
 import { validateProps } from '../internal/props-validation';
-export default function security(options) {
+export default function security(options = {}) {
     const { blockedTags = [], allowedLinkPrefixes, allowedImagePrefixes, allowedProtocols, defaultOrigin, allowDataImages, } = options;
     const dropSet = new Set(blockedTags.map(t => t.toLowerCase()));
     const propsOptions = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "comark",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Components in Markdown (Comark) parser with streaming support for Vue, React, Svelte and HTML",
   "author": "",
   "license": "MIT",
@@ -59,6 +59,7 @@
   "devDependencies": {
     "@nuxt/kit": "^4.4.2",
     "@shikijs/primitive": "^4.0.2",
+    "@shikijs/twoslash": "^4.0.2",
     "@types/js-yaml": "^4.0.9",
     "github-slugger": "^2.0.0",
     "hast-util-to-string": "^3.0.1",
@@ -66,13 +67,14 @@
     "minimark": "0.2.0",
     "mitata": "^1.0.34",
     "tsx": "^4.21.0",
+    "twoslash": "^0.3.6",
     "vitest": "^4.1.1"
   },
   "dependencies": {
     "@comark/markdown-it": "^0.3.2",
     "entities": "^8.0.0",
-    "js-yaml": "^4.1.1",
     "htmlparser2": "^12.0.0",
+    "js-yaml": "^4.1.1",
     "markdown-exit": "1.0.0-beta.9"
   }
 }