ink-markdown-es 1.0.2 → 1.2.0

package/README.md

@@ -21,9 +21,6 @@ bun add ink-markdown-es      # bun
 ```
 
 ```tsx
-import Markdown from "ink-markdown-es";
-import { render } from "ink";
-
 const text = `# Hello World
 
 This is a show case.
@@ -34,12 +31,27 @@ It's very fast!
 - Support custom renderers
 - **Bold text** and *italic text*
 - Inline \`code\` support
-
-### Code Block
-
-\`\`\`javascript
-const hello = "world";
-console.log(hello);
+- **Syntax highlighting** for code blocks powered by highlight.js
+
+### Code Block with Syntax Highlighting
+
+\`\`\`typescript
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+const user: User = {
+  id: 1,
+  name: "Alice",
+  email: "alice@example.com"
+};
+
+async function fetchUser(id: number): Promise<User> {
+  const response = await fetch(\`/api/users/\${id}\`);
+  return response.json();
+}
 \`\`\`
 
 > This is a blockquote
@@ -59,25 +71,33 @@ Check out [this link](https://example.com) for more info.
 | Bob | 30 |
 `;
 
-render(
-  <Markdown
-    showSharp
-    renderers={{
-      h1: (text) => (
-        <Box padding={1} borderStyle="round" borderDimColor>
-          <Text bold color="greenBright">
-            {text}
-          </Text>
-        </Box>
-      ),
-    }}
-  >
-    {text}
-  </Markdown>
-);
+const TestApp = () => {
+  useInput(() => {});
+
+  return (
+    <Markdown
+      showSharp
+      theme="dracula"
+      renderers={{
+        h1: (text) => (
+          <Box padding={1} borderStyle="round" borderDimColor>
+            <Text bold color="greenBright">
+              {text}
+            </Text>
+          </Box>
+        ),
+      }}
+    >
+      {text}
+    </Markdown>
+  );
+};
+
+render(<TestApp />);
+
 ```
 
-<img width="1919" height="689" alt="image" src="https://github.com/user-attachments/assets/d7cc741d-4c52-4b27-b183-ca8cce13007b" />
+<img width="1904" height="964" alt="image" src="https://github.com/user-attachments/assets/bed0c942-6d08-4f24-a42a-4999bdf1fc85" />
 
 ## Props
 
@@ -86,6 +106,7 @@ render(
 - `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

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

package/dist/index.d.ts

@@ -1,6 +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, }: 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,7 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useId, useMemo } from "react";
-import { marked } from "marked";
 import { Box, Text } from "ink";
+import { marked } from "marked";
+import { memo, useEffect, useId, useMemo, useState } from "react";
+import { codeToTokens } from "shiki";
 const DEFAULT_STYLES = {
     h1: {
         bold: true,
@@ -120,6 +121,119 @@ const BOX_STYLE_KEYS = [
     'borderLeftDimColor',
     'borderRightDimColor'
 ];
+const TERMINAL_COLORS = {
+    comment: 'gray',
+    'comment.block': 'gray',
+    'comment.line': 'gray',
+    keyword: 'magenta',
+    'keyword.control': 'magenta',
+    'keyword.other': 'magenta',
+    string: 'green',
+    'string.quoted': 'green',
+    'string.regexp': 'red',
+    'entity.name.function': 'blue',
+    'support.function': 'blueBright',
+    'meta.function-call': 'blueBright',
+    variable: 'white',
+    'variable.parameter': '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',
+    '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',
+    storage: 'magenta',
+    'storage.type': 'magenta'
+};
+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'
+    };
+    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 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];
+        }
+    }
+}
+async function highlightCodeAsync(code, language, theme = 'github-dark') {
+    try {
+        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}`));
+            }
+        }
+        return nodes;
+    } catch  {
+        return null;
+    }
+}
 function extractTextProps(style) {
     if (!style) return {};
     const result = {};
@@ -141,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)=>{
@@ -248,7 +407,7 @@ function renderInlineTokens(tokens, styles, renderers) {
         }
     });
 }
-function renderBlockToken(token, styles, renderers, showSharp) {
+function renderBlockToken(token, styles, renderers, showSharp, highlight, theme = 'github-dark') {
     switch(token.type){
         case 'heading':
             {
@@ -289,6 +448,12 @@ function renderBlockToken(token, styles, renderers, showSharp) {
                 const codeToken = token;
                 const codeStyle = mergeStyles(DEFAULT_STYLES.code, styles.code);
                 if (renderers.code) return renderers.code(codeToken.text, codeToken.lang, codeToken);
+                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, {
@@ -302,17 +467,15 @@ function renderBlockToken(token, styles, renderers, showSharp) {
                 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)
+                        children: renderBlockToken(t, styles, renderers, showSharp, highlight, theme)
                     }, `bq-${i}`));
-                if (renderers.blockquote) return renderers.blockquote(/*#__PURE__*/ jsx(Fragment, {
-                    children: content
-                }), blockquoteToken);
+                if (renderers.blockquote) return renderers.blockquote(content, blockquoteToken);
                 return /*#__PURE__*/ jsx(Box, {
                     ...extractBoxProps(blockquoteStyle),
                     children: /*#__PURE__*/ jsx(Box, {
                         flexDirection: "column",
                         children: blockquoteToken.tokens.map((t, i)=>{
-                            const rendered = renderBlockToken(t, styles, renderers);
+                            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 || ''
@@ -374,40 +537,119 @@ function renderBlockToken(token, styles, renderers, showSharp) {
                 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, {
@@ -428,16 +670,19 @@ function renderBlockToken(token, styles, renderers, showSharp) {
             return null;
     }
 }
-const src_MemoizedBlock = /*#__PURE__*/ memo(function({ token, styles, renderers, showSharp }) {
+const src_MemoizedBlock = /*#__PURE__*/ memo(function({ token, styles, renderers, showSharp, highlight, theme }) {
     return /*#__PURE__*/ jsx(Fragment, {
-        children: renderBlockToken(token, styles, renderers, showSharp)
+        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 }) {
+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, {
@@ -446,7 +691,9 @@ function MarkdownComponent({ children, id, styles = {}, renderers = {}, showShar
                 token: token,
                 styles: styles,
                 renderers: renderers,
-                showSharp: showSharp
+                showSharp: showSharp,
+                highlight: highlight,
+                theme: theme
             }, `${key}-block-${index}`))
     });
 }

package/dist/types.d.ts

@@ -1,6 +1,6 @@
-import type { ReactNode, ComponentProps } from 'react';
+import type { Box, Text } from 'ink';
 import type { Token, Tokens } from 'marked';
-import type { Text, Box } from 'ink';
+import type { ComponentProps, ReactNode } from 'react';
 export type TextStyleProps = Pick<ComponentProps<typeof Text>, 'color' | 'backgroundColor' | 'dimColor' | 'bold' | 'italic' | 'underline' | 'strikethrough' | 'inverse' | 'wrap'>;
 export type BoxStyleProps = ComponentProps<typeof Box>;
 export type HeadingStyleProps = TextStyleProps & BoxStyleProps & {
@@ -62,10 +62,24 @@ export type MarkdownProps = {
     styles?: BlockStyles;
     renderers?: BlockRenderers;
     showSharp?: boolean;
+    /**
+     * Enable syntax highlighting for code blocks
+     * @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;
     styles: BlockStyles;
     renderers: BlockRenderers;
     showSharp: boolean;
+    highlight: boolean;
+    theme: string;
 };

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import type { TextStyleProps, BoxStyleProps } from './types';
+import type { BoxStyleProps, TextStyleProps } from './types';
 export declare function extractTextProps(style: (TextStyleProps & BoxStyleProps) | undefined): TextStyleProps;
 export declare function extractBoxProps(style: (TextStyleProps & BoxStyleProps) | undefined): BoxStyleProps;
 export declare function mergeStyles<T>(defaultStyle: T | undefined, userStyle: T | undefined): T;

package/package.json

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