ink-markdown-es 1.3.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,35 +121,6 @@ const BOX_STYLE_KEYS = [
     'borderLeftDimColor',
     'borderRightDimColor'
 ];
-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){
-                    const color = token.color || void 0;
-                    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 = {};
@@ -171,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)=>{
@@ -323,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':
             {
@@ -364,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, {
@@ -382,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}`))
                     })
                 });
             }
@@ -495,7 +413,8 @@ function renderBlockToken(token, styles, renderers, showSharp, highlight, theme
                                     /*#__PURE__*/ jsxs(Text, {
                                         dimColor: true,
                                         children: [
-                                            " │",
+                                            ' ',
+                                            "│",
                                             i < tableToken.header.length - 1 ? ' ' : ''
                                         ]
                                     })
@@ -586,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, {
@@ -607,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.3.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>;