ink-markdown-es 1.1.0 → 1.2.0

package/README.md

@@ -77,6 +77,7 @@ const TestApp = () => {
   return (
     <Markdown
       showSharp
+      theme="dracula"
       renderers={{
         h1: (text) => (
           <Box padding={1} borderStyle="round" borderDimColor>
@@ -105,6 +106,7 @@ render(<TestApp />);
 - `styles` (BlockStyles, optional): Custom styles for markdown blocks.
 - `renderers` (BlockRenderers, optional): Custom renderers for markdown blocks.
 - `showSharp` (boolean, optional): Whether to show sharp signs for headings. Default is `false`.
+- `theme` (string, optional): The theme for syntax highlighting. Default is `github-dark`. Check out [shiki](https://shiki.style/themes) for more themes.
 
 ## Contributing
 

package/dist/highlight.d.ts

@@ -1,2 +1,2 @@
 import type { ReactNode } from 'react';
-export declare function highlightCode(code: string, language?: string): ReactNode[] | null;
+export declare function highlightCodeAsync(code: string, language?: string, theme?: string): Promise<ReactNode[] | null>;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 /** biome-ignore-all lint/suspicious/noArrayIndexKey: <empty> */
 import { type Token, type Tokens } from 'marked';
 import type { MarkdownProps } from './types';
-declare function MarkdownComponent({ children, id, styles, renderers, showSharp, highlight, }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
+declare function MarkdownComponent({ children, id, styles, renderers, showSharp, highlight, theme, }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
 declare const Markdown: import("react").MemoExoticComponent<typeof MarkdownComponent>;
 export default Markdown;
 export type { Token, Tokens };

package/dist/index.js

@@ -1,8 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import { marked } from "marked";
-import { memo, useId, useMemo } from "react";
-import highlight_0 from "highlight.js";
+import { memo, useEffect, useId, useMemo, useState } from "react";
+import { codeToTokens } from "shiki";
 const DEFAULT_STYLES = {
     h1: {
         bold: true,
@@ -122,97 +122,114 @@ const BOX_STYLE_KEYS = [
     'borderRightDimColor'
 ];
 const TERMINAL_COLORS = {
+    comment: 'gray',
+    'comment.block': 'gray',
+    'comment.line': 'gray',
     keyword: 'magenta',
     'keyword.control': 'magenta',
-    'keyword.operator': 'cyan',
+    'keyword.other': 'magenta',
     string: 'green',
-    'string.special': 'greenBright',
-    comment: 'gray',
-    function: 'blue',
-    'function.call': 'blueBright',
-    'function.builtin': 'blueBright',
+    'string.quoted': 'green',
+    'string.regexp': 'red',
+    'entity.name.function': 'blue',
+    'support.function': 'blueBright',
+    'meta.function-call': 'blueBright',
     variable: 'white',
-    'variable.builtin': 'yellow',
     'variable.parameter': 'yellowBright',
-    type: 'cyan',
-    'type.builtin': 'cyanBright',
-    class: 'yellowBright',
-    number: 'yellow',
-    'number.float': 'yellow',
-    constant: 'yellow',
-    'constant.builtin': 'yellowBright',
+    'variable.other': 'white',
+    'entity.name.type': 'cyan',
+    'entity.name.class': 'yellowBright',
+    'support.type': 'cyanBright',
+    'support.class': 'yellowBright',
+    'constant.numeric': 'yellow',
+    'constant.language': 'yellow',
     operator: 'cyan',
     punctuation: 'white',
-    property: 'blue',
-    attribute: 'blue',
-    tag: 'red',
-    'tag.builtin': 'redBright',
-    boolean: 'yellow',
-    null: 'yellow',
-    regexp: 'red',
+    'variable.other.property': 'blue',
+    'entity.other.attribute-name': 'blue',
+    'entity.name.tag': 'red',
+    'meta.tag': 'red',
+    'constant.language.boolean': 'yellow',
+    'constant.language.null': 'yellow',
     meta: 'gray',
-    title: 'yellowBright',
-    section: 'yellowBright'
+    storage: 'magenta',
+    'storage.type': 'magenta'
 };
-function classToColor(className) {
-    if (TERMINAL_COLORS[className]) return TERMINAL_COLORS[className];
-    const parts = className.replace(/^hljs-/, '').split('.');
-    for(let i = parts.length; i > 0; i--){
-        const key = parts.slice(0, i).join('.');
-        if (TERMINAL_COLORS[key]) return TERMINAL_COLORS[key];
-    }
-}
-function decodeHtmlEntities(text) {
-    const entities = {
-        '"': '"',
-        '"': '"',
-        ''': "'",
-        ''': "'",
-        '&lt;': '<',
-        '&#60;': '<',
-        '&gt;': '>',
-        '&#62;': '>',
-        '&amp;': '&',
-        '&#38;': '&',
-        '&nbsp;': ' ',
-        '&#160;': ' '
+function hexToTerminalColor(hex) {
+    const colorMap = {
+        '#6a737d': 'gray',
+        '#8b949e': 'gray',
+        '#6e7681': 'gray',
+        '#d73a49': 'magenta',
+        '#f97583': 'magenta',
+        '#ff7b72': 'red',
+        '#032f62': 'green',
+        '#22863a': 'green',
+        '#7ee787': 'green',
+        '#005cc5': 'blue',
+        '#0366d6': 'blue',
+        '#79c0ff': 'cyan',
+        '#58a6ff': 'blueBright',
+        '#a5d6ff': 'cyan',
+        '#e36209': 'yellow',
+        '#d29922': 'yellow',
+        '#ffa657': 'yellow',
+        '#0550ae': 'cyan'
     };
-    return text.replace(/&[a-z]+;|&#\d+;/gi, (match)=>entities[match] || match);
+    const normalized = hex.toLowerCase();
+    if (colorMap[normalized]) return colorMap[normalized];
+    const r = Number.parseInt(normalized.slice(1, 3), 16);
+    const g = Number.parseInt(normalized.slice(3, 5), 16);
+    const b = Number.parseInt(normalized.slice(5, 7), 16);
+    const brightness = (299 * r + 587 * g + 114 * b) / 1000;
+    if (brightness < 80) return 'gray';
+    if (r > g && r > b) return 'red';
+    if (g > r && g > b) return 'green';
+    if (b > r && b > g) return 'blue';
+    if (r > 150 && g > 150) return 'yellow';
+    if (g > 150 && b > 150) return 'cyan';
+    if (r > 150 && b > 150) return 'magenta';
 }
-function parseHighlightedCode(html) {
-    const result = [];
-    const regex = /<span class="([^"]+)">([^<]*)<\/span>|([^<]+)/g;
-    let index = 0;
-    let match = regex.exec(html);
-    while(null !== match){
-        if (match[1] && void 0 !== match[2]) {
-            const className = match[1];
-            const text = decodeHtmlEntities(match[2]);
-            const color = classToColor(className);
-            result.push(/*#__PURE__*/ jsx(Text, {
-                color: color,
-                children: text
-            }, index));
-        } else if (match[3]) result.push(/*#__PURE__*/ jsx(Text, {
-            children: decodeHtmlEntities(match[3])
-        }, index));
-        index++;
-        match = regex.exec(html);
+function tokenScopeToColor(scopes) {
+    for (const scope of scopes){
+        if (TERMINAL_COLORS[scope]) return TERMINAL_COLORS[scope];
+        const parts = scope.split('.');
+        for(let i = parts.length; i > 0; i--){
+            const key = parts.slice(0, i).join('.');
+            if (TERMINAL_COLORS[key]) return TERMINAL_COLORS[key];
+        }
     }
-    return result;
 }
-function highlightCode(code, language) {
+async function highlightCodeAsync(code, language, theme = 'github-dark') {
     try {
-        let highlighted;
-        if (language) try {
-            highlighted = highlight_0.highlight(code, {
-                language
-            });
-        } catch  {
-            highlighted = highlight_0.highlightAuto(code);
+        const result = await codeToTokens(code, {
+            lang: language || 'text',
+            theme: theme
+        });
+        const nodes = [];
+        let index = 0;
+        for(let lineIndex = 0; lineIndex < result.tokens.length; lineIndex++){
+            const line = result.tokens[lineIndex];
+            if (line) {
+                for (const token of line){
+                    let color;
+                    if (token.color) color = hexToTerminalColor(token.color);
+                    if (!color && token.explanation) {
+                        const scopes = token.explanation.map((e)=>e.scopes?.[0]?.scopeName || '');
+                        color = tokenScopeToColor(scopes);
+                    }
+                    nodes.push(/*#__PURE__*/ jsx(Text, {
+                        color: color,
+                        children: token.content
+                    }, `token-${index}`));
+                    index++;
+                }
+                if (lineIndex < result.tokens.length - 1) nodes.push(/*#__PURE__*/ jsx(Text, {
+                    children: '\n'
+                }, `nl-${lineIndex}`));
+            }
         }
-        else highlighted = highlight_0.highlightAuto(code);
-        return parseHighlightedCode(highlighted.value);
+        return nodes;
     } catch  {
         return null;
     }
@@ -238,6 +255,51 @@ function mergeStyles(defaultStyle, userStyle) {
         ...userStyle
     };
 }
+function CodeBlock({ code, language, style, theme }) {
+    const [highlightedCode, setHighlightedCode] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(()=>{
+        let cancelled = false;
+        async function highlight() {
+            try {
+                const result = await highlightCodeAsync(code, language, theme);
+                if (!cancelled) {
+                    setHighlightedCode(result);
+                    setIsLoading(false);
+                }
+            } catch  {
+                if (!cancelled) {
+                    setHighlightedCode(null);
+                    setIsLoading(false);
+                }
+            }
+        }
+        highlight();
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        code,
+        language,
+        theme
+    ]);
+    if (isLoading || !highlightedCode) return /*#__PURE__*/ jsx(Box, {
+        ...extractBoxProps(style),
+        children: /*#__PURE__*/ jsx(Text, {
+            ...extractTextProps(style),
+            children: code
+        })
+    });
+    return /*#__PURE__*/ jsx(Box, {
+        paddingX: 2,
+        paddingY: 1,
+        ...extractBoxProps(style),
+        children: /*#__PURE__*/ jsx(Text, {
+            ...extractTextProps(style),
+            children: highlightedCode
+        })
+    });
+}
 function renderInlineTokens(tokens, styles, renderers) {
     if (!tokens || 0 === tokens.length) return null;
     return tokens.map((token, index)=>{
@@ -345,7 +407,7 @@ function renderInlineTokens(tokens, styles, renderers) {
         }
     });
 }
-function renderBlockToken(token, styles, renderers, showSharp, highlight) {
+function renderBlockToken(token, styles, renderers, showSharp, highlight, theme = 'github-dark') {
     switch(token.type){
         case 'heading':
             {
@@ -386,19 +448,12 @@ function renderBlockToken(token, styles, renderers, showSharp, highlight) {
                 const codeToken = token;
                 const codeStyle = mergeStyles(DEFAULT_STYLES.code, styles.code);
                 if (renderers.code) return renderers.code(codeToken.text, codeToken.lang, codeToken);
-                if (highlight) {
-                    const highlightedCode = highlightCode(codeToken.text, codeToken.lang);
-                    if (highlightedCode) return /*#__PURE__*/ jsx(Box, {
-                        backgroundColor: "gray",
-                        paddingX: 2,
-                        paddingY: 1,
-                        ...extractBoxProps(codeStyle),
-                        children: /*#__PURE__*/ jsx(Text, {
-                            ...extractTextProps(codeStyle),
-                            children: highlightedCode
-                        })
-                    });
-                }
+                if (highlight) return /*#__PURE__*/ jsx(CodeBlock, {
+                    code: codeToken.text,
+                    language: codeToken.lang,
+                    style: codeStyle,
+                    theme: theme
+                });
                 return /*#__PURE__*/ jsx(Box, {
                     ...extractBoxProps(codeStyle),
                     children: /*#__PURE__*/ jsx(Text, {
@@ -412,7 +467,7 @@ function renderBlockToken(token, styles, renderers, showSharp, highlight) {
                 const blockquoteToken = token;
                 const blockquoteStyle = mergeStyles(DEFAULT_STYLES.blockquote, styles.blockquote);
                 const content = blockquoteToken.tokens.map((t, i)=>/*#__PURE__*/ jsx(Box, {
-                        children: renderBlockToken(t, styles, renderers, showSharp, highlight)
+                        children: renderBlockToken(t, styles, renderers, showSharp, highlight, theme)
                     }, `bq-${i}`));
                 if (renderers.blockquote) return renderers.blockquote(content, blockquoteToken);
                 return /*#__PURE__*/ jsx(Box, {
@@ -420,7 +475,7 @@ function renderBlockToken(token, styles, renderers, showSharp, highlight) {
                     children: /*#__PURE__*/ jsx(Box, {
                         flexDirection: "column",
                         children: blockquoteToken.tokens.map((t, i)=>{
-                            const rendered = renderBlockToken(t, styles, renderers, showSharp, highlight);
+                            const rendered = renderBlockToken(t, styles, renderers, showSharp, highlight, theme);
                             if (rendered) return /*#__PURE__*/ jsx(Text, {
                                 ...extractTextProps(blockquoteStyle),
                                 children: 'paragraph' === t.type ? renderInlineTokens(t.tokens, styles, renderers) : t.text || ''
@@ -482,40 +537,119 @@ function renderBlockToken(token, styles, renderers, showSharp, highlight) {
                 const tableToken = token;
                 const tableStyle = mergeStyles(DEFAULT_STYLES.table, styles.table);
                 const cellStyle = mergeStyles(DEFAULT_STYLES.tableCell, styles.tableCell);
-                const headerCells = tableToken.header.map((cell, i)=>/*#__PURE__*/ jsx(Box, {
-                        ...extractBoxProps(cellStyle),
-                        children: /*#__PURE__*/ jsx(Text, {
-                            bold: true,
-                            ...extractTextProps(cellStyle),
-                            children: renderInlineTokens(cell.tokens, styles, renderers)
+                const getCellText = (tokens)=>tokens.map((t)=>{
+                        if ('text' in t) return t.text;
+                        return '';
+                    }).join('');
+                const columnWidths = tableToken.header.map((cell, colIndex)=>{
+                    const headerWidth = getCellText(cell.tokens).length;
+                    const bodyWidth = Math.max(...tableToken.rows.map((row)=>{
+                        const cellTokens = row[colIndex]?.tokens;
+                        return cellTokens ? getCellText(cellTokens).length : 0;
+                    }), 0);
+                    return Math.max(headerWidth, bodyWidth, 3);
+                });
+                const topBorder = /*#__PURE__*/ jsxs(Text, {
+                    dimColor: true,
+                    children: [
+                        "┌─",
+                        columnWidths.map((w)=>'─'.repeat(w)).join('─┬─'),
+                        "─┐"
+                    ]
+                });
+                const headerRow = /*#__PURE__*/ jsxs(Text, {
+                    children: [
+                        /*#__PURE__*/ jsx(Text, {
+                            dimColor: true,
+                            children: "│ "
+                        }),
+                        tableToken.header.map((cell, i)=>{
+                            const content = renderInlineTokens(cell.tokens, styles, renderers);
+                            const cellText = getCellText(cell.tokens);
+                            return /*#__PURE__*/ jsxs(Text, {
+                                children: [
+                                    /*#__PURE__*/ jsxs(Text, {
+                                        bold: true,
+                                        ...extractTextProps(cellStyle),
+                                        children: [
+                                            content,
+                                            ' '.repeat(Math.max(0, (columnWidths[i] || 3) - cellText.length))
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs(Text, {
+                                        dimColor: true,
+                                        children: [
+                                            " │",
+                                            i < tableToken.header.length - 1 ? ' ' : ''
+                                        ]
+                                    })
+                                ]
+                            }, `th-${i}`);
                         })
-                    }, `th-${i}`));
-                const header = /*#__PURE__*/ jsx(Box, {
-                    flexDirection: "row",
-                    children: headerCells
+                    ]
+                });
+                const headerSeparator = /*#__PURE__*/ jsxs(Text, {
+                    dimColor: true,
+                    children: [
+                        "├─",
+                        columnWidths.map((w)=>'─'.repeat(w)).join('─┼─'),
+                        "─┤"
+                    ]
                 });
-                const bodyRows = tableToken.rows.map((row, rowIndex)=>/*#__PURE__*/ jsx(Box, {
-                        flexDirection: "row",
-                        children: row.map((cell, cellIndex)=>/*#__PURE__*/ jsx(Box, {
-                                ...extractBoxProps(cellStyle),
-                                children: /*#__PURE__*/ jsx(Text, {
-                                    ...extractTextProps(cellStyle),
-                                    children: renderInlineTokens(cell.tokens, styles, renderers)
-                                })
-                            }, `td-${cellIndex}`))
+                const bodyRows = tableToken.rows.map((row, rowIndex)=>/*#__PURE__*/ jsxs(Text, {
+                        children: [
+                            /*#__PURE__*/ jsx(Text, {
+                                dimColor: true,
+                                children: "│ "
+                            }),
+                            row.map((cell, cellIndex)=>{
+                                const content = renderInlineTokens(cell.tokens, styles, renderers);
+                                const cellText = getCellText(cell.tokens);
+                                const colWidth = columnWidths[cellIndex] || 3;
+                                return /*#__PURE__*/ jsxs(Text, {
+                                    children: [
+                                        /*#__PURE__*/ jsxs(Text, {
+                                            ...extractTextProps(cellStyle),
+                                            children: [
+                                                content,
+                                                ' '.repeat(Math.max(0, colWidth - cellText.length))
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs(Text, {
+                                            dimColor: true,
+                                            children: [
+                                                " │",
+                                                cellIndex < row.length - 1 ? ' ' : ''
+                                            ]
+                                        })
+                                    ]
+                                }, `td-${rowIndex}-${cellIndex}`);
+                            })
+                        ]
                     }, `tr-${rowIndex}`));
-                const body = /*#__PURE__*/ jsx(Fragment, {
-                    children: bodyRows
+                const bottomBorder = /*#__PURE__*/ jsxs(Text, {
+                    dimColor: true,
+                    children: [
+                        "└─",
+                        columnWidths.map((w)=>'─'.repeat(w)).join('─┴─'),
+                        "─┘"
+                    ]
                 });
-                if (renderers.table) return renderers.table(header, body, tableToken);
-                return /*#__PURE__*/ jsxs(Box, {
-                    flexDirection: "column",
-                    ...extractBoxProps(tableStyle),
+                const tableContent = /*#__PURE__*/ jsxs(Fragment, {
                     children: [
-                        header,
-                        body
+                        topBorder,
+                        headerRow,
+                        headerSeparator,
+                        bodyRows,
+                        bottomBorder
                     ]
                 });
+                if (renderers.table) return renderers.table(headerRow, bodyRows, tableToken);
+                return /*#__PURE__*/ jsx(Box, {
+                    flexDirection: "column",
+                    ...extractBoxProps(tableStyle),
+                    children: tableContent
+                });
             }
         case 'space':
             return /*#__PURE__*/ jsx(Text, {
@@ -536,16 +670,19 @@ function renderBlockToken(token, styles, renderers, showSharp, highlight) {
             return null;
     }
 }
-const src_MemoizedBlock = /*#__PURE__*/ memo(function({ token, styles, renderers, showSharp, highlight }) {
+const src_MemoizedBlock = /*#__PURE__*/ memo(function({ token, styles, renderers, showSharp, highlight, theme }) {
     return /*#__PURE__*/ jsx(Fragment, {
-        children: renderBlockToken(token, styles, renderers, showSharp, highlight)
+        children: renderBlockToken(token, styles, renderers, showSharp, highlight, theme)
     });
 }, (prevProps, nextProps)=>prevProps.token === nextProps.token);
 src_MemoizedBlock.displayName = 'MemoizedBlock';
-function MarkdownComponent({ children, id, styles = {}, renderers = {}, showSharp = false, highlight = true }) {
+function MarkdownComponent({ children, id, styles = {}, renderers = {}, showSharp = false, highlight = true, theme = 'github-dark' }) {
     const generatedId = useId();
     const key = id || generatedId;
-    const tokens = useMemo(()=>marked.lexer(children), [
+    const tokens = useMemo(()=>marked.lexer(children, {
+            silent: true,
+            gfm: true
+        }), [
         children
     ]);
     return /*#__PURE__*/ jsx(Box, {
@@ -555,7 +692,8 @@ function MarkdownComponent({ children, id, styles = {}, renderers = {}, showShar
                 styles: styles,
                 renderers: renderers,
                 showSharp: showSharp,
-                highlight: highlight
+                highlight: highlight,
+                theme: theme
             }, `${key}-block-${index}`))
     });
 }

package/dist/types.d.ts

@@ -67,6 +67,13 @@ export type MarkdownProps = {
      * @default true
      */
     highlight?: boolean;
+    /**
+     * Shiki theme name for syntax highlighting
+     * @default 'github-dark'
+     * @example 'github-dark', 'github-light', 'nord', 'dracula', etc.
+     * @see https://shiki.style/themes
+     */
+    theme?: string;
 };
 export type MemoizedBlockProps = {
     token: Token;
@@ -74,4 +81,5 @@ export type MemoizedBlockProps = {
     renderers: BlockRenderers;
     showSharp: boolean;
     highlight: boolean;
+    theme: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ink-markdown-es",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A modern performance markdown renderer for ink",
   "keywords": [
     "markdown",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "dedent": "^1.7.1",
-    "highlight.js": "^11.11.1",
-    "marked": "^16.4.2"
+    "marked": "^16.4.2",
+    "shiki": "^3.22.0"
   }
 }