ink-markdown-es 1.2.0 → 1.4.0

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, theme, }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
+declare function MarkdownComponent({ children, id, styles, renderers, showSharp, }: 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,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import { marked } from "marked";
-import { memo, useEffect, useId, useMemo, useState } from "react";
-import { codeToTokens } from "shiki";
+import { memo, useId, useMemo } from "react";
 const DEFAULT_STYLES = {
     h1: {
         bold: true,
@@ -42,7 +41,8 @@ const DEFAULT_STYLES = {
         borderDimColor: true
     },
     code: {
-        marginTop: 1
+        marginTop: 1,
+        paddingX: 2
     },
     codespan: {
         dimColor: true
@@ -121,119 +121,6 @@ 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 = {};
@@ -255,51 +142,6 @@ 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)=>{
@@ -407,7 +249,7 @@ function renderInlineTokens(tokens, styles, renderers) {
         }
     });
 }
-function renderBlockToken(token, styles, renderers, showSharp, highlight, theme = 'github-dark') {
+function renderBlockToken(token, styles, renderers, showSharp) {
     switch(token.type){
         case 'heading':
             {
@@ -448,12 +290,6 @@ function renderBlockToken(token, styles, renderers, showSharp, highlight, theme
                 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, {
@@ -466,22 +302,20 @@ function renderBlockToken(token, styles, renderers, showSharp, highlight, theme
             {
                 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, theme)
-                    }, `bq-${i}`));
-                if (renderers.blockquote) return renderers.blockquote(content, blockquoteToken);
+                if (renderers.blockquote) {
+                    const content = blockquoteToken.tokens.map((t, i)=>/*#__PURE__*/ jsx(Box, {
+                            children: renderBlockToken(t, styles, renderers, showSharp)
+                        }, `bq-${i}`));
+                    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, showSharp, highlight, theme);
-                            if (rendered) return /*#__PURE__*/ jsx(Text, {
+                        children: blockquoteToken.tokens.map((t, i)=>/*#__PURE__*/ jsx(Text, {
                                 ...extractTextProps(blockquoteStyle),
                                 children: 'paragraph' === t.type ? renderInlineTokens(t.tokens, styles, renderers) : t.text || ''
-                            }, `bq-text-${i}`);
-                            return null;
-                        })
+                            }, `bq-text-${i}`))
                     })
                 });
             }
@@ -579,7 +413,8 @@ function renderBlockToken(token, styles, renderers, showSharp, highlight, theme
                                     /*#__PURE__*/ jsxs(Text, {
                                         dimColor: true,
                                         children: [
-                                            " │",
+                                            ' ',
+                                            "│",
                                             i < tableToken.header.length - 1 ? ' ' : ''
                                         ]
                                     })
@@ -670,13 +505,13 @@ function renderBlockToken(token, styles, renderers, showSharp, highlight, theme
             return null;
     }
 }
-const src_MemoizedBlock = /*#__PURE__*/ memo(function({ token, styles, renderers, showSharp, highlight, theme }) {
+const src_MemoizedBlock = /*#__PURE__*/ memo(function({ token, styles, renderers, showSharp }) {
     return /*#__PURE__*/ jsx(Fragment, {
-        children: renderBlockToken(token, styles, renderers, showSharp, highlight, theme)
+        children: renderBlockToken(token, styles, renderers, showSharp)
     });
 }, (prevProps, nextProps)=>prevProps.token === nextProps.token);
 src_MemoizedBlock.displayName = 'MemoizedBlock';
-function MarkdownComponent({ children, id, styles = {}, renderers = {}, showSharp = false, highlight = true, theme = 'github-dark' }) {
+function MarkdownComponent({ children, id, styles = {}, renderers = {}, showSharp = false }) {
     const generatedId = useId();
     const key = id || generatedId;
     const tokens = useMemo(()=>marked.lexer(children, {
@@ -691,9 +526,7 @@ function MarkdownComponent({ children, id, styles = {}, renderers = {}, showShar
                 token: token,
                 styles: styles,
                 renderers: renderers,
-                showSharp: showSharp,
-                highlight: highlight,
-                theme: theme
+                showSharp: showSharp
             }, `${key}-block-${index}`))
     });
 }

package/dist/types.d.ts

@@ -62,24 +62,10 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ink-markdown-es",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "A modern performance markdown renderer for ink",
   "keywords": [
     "markdown",
@@ -28,9 +28,9 @@
   ],
   "scripts": {
     "build": "rslib build",
-    "check": "biome check --write",
+    "check": "biome check --write .",
     "dev": "bun --watch run examples/index.tsx",
-    "format": "biome format --write",
+    "format": "biome format --write .",
     "prepublishOnly": "bun run build"
   },
   "devDependencies": {
@@ -40,6 +40,7 @@
     "@types/react": "^19",
     "@biomejs/biome": "2.3.8",
     "ink": "^6",
+    "ink-shiki-code": "workspace:*",
     "react": "^19",
     "react-devtools-core": "^6",
     "typescript": "^5.9.3",
@@ -51,7 +52,6 @@
   },
   "dependencies": {
     "dedent": "^1.7.1",
-    "marked": "^16.4.2",
-    "shiki": "^3.22.0"
+    "marked": "^16.4.2"
   }
 }

package/README.md

@@ -1,123 +0,0 @@
-# ink-markdown-es
-
-A modern performance markdown renderer for [ink](https://github.com/vadimdemedes/ink) using [marked](https://github.com/markedjs/marked).
-
-Inspired by [ink-markdown](https://github.com/vadimdemedes/ink-markdown) and [prompt-kit](https://github.com/ibelick/prompt-kit).
-
-Compare with [ink-markdown](https://github.com/vadimdemedes/ink-markdown):
-
-- **ES module** support & only
-- Use memo & useMemo to improve performance
-- More flexible configuration (`renderers`  prop)
-
-## Quick Start
-
-```bash
-npm install ink-markdown-es  # npm
-
-pnpm add ink-markdown-es     # pnpm
-
-bun add ink-markdown-es      # bun
-```
-
-```tsx
-const text = `# Hello World
-
-This is a show case.
-It's very fast!
-
-## Features
-- Render markdown in ink
-- Support custom renderers
-- **Bold text** and *italic text*
-- Inline \`code\` support
-- **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
-> with multiple lines
-
----
-
-Check out [this link](https://example.com) for more info.
-
-1. First item
-2. Second item
-3. Third item
-
-| Name | Age |
-|------|-----|
-| Alice | 25 |
-| Bob | 30 |
-`;
-
-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="1904" height="964" alt="image" src="https://github.com/user-attachments/assets/bed0c942-6d08-4f24-a42a-4999bdf1fc85" />
-
-## Props
-
-- `children` (string): The markdown content to render.
-- `id` (string, optional): A unique identifier for the component. In AI scene, it's useful to identify the component in the DOM tree, you can use AI message id.
-- `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
-
-To install dependencies:
-
-```bash
-bun install
-```
-
-To run:
-
-```bash
-bun run dev
-```

package/dist/highlight.d.ts

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