ink-markdown-es 1.0.2 → 1.1.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,32 @@ 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
+      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
 

package/dist/highlight.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from 'react';
+export declare function highlightCode(code: string, language?: string): 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, }: 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, useId, useMemo } from "react";
+import highlight_0 from "highlight.js";
 const DEFAULT_STYLES = {
     h1: {
         bold: true,
@@ -120,6 +121,102 @@ const BOX_STYLE_KEYS = [
     'borderLeftDimColor',
     'borderRightDimColor'
 ];
+const TERMINAL_COLORS = {
+    keyword: 'magenta',
+    'keyword.control': 'magenta',
+    'keyword.operator': 'cyan',
+    string: 'green',
+    'string.special': 'greenBright',
+    comment: 'gray',
+    function: 'blue',
+    'function.call': 'blueBright',
+    'function.builtin': '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',
+    operator: 'cyan',
+    punctuation: 'white',
+    property: 'blue',
+    attribute: 'blue',
+    tag: 'red',
+    'tag.builtin': 'redBright',
+    boolean: 'yellow',
+    null: 'yellow',
+    regexp: 'red',
+    meta: 'gray',
+    title: 'yellowBright',
+    section: 'yellowBright'
+};
+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;': ' '
+    };
+    return text.replace(/&[a-z]+;|&#\d+;/gi, (match)=>entities[match] || match);
+}
+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);
+    }
+    return result;
+}
+function highlightCode(code, language) {
+    try {
+        let highlighted;
+        if (language) try {
+            highlighted = highlight_0.highlight(code, {
+                language
+            });
+        } catch  {
+            highlighted = highlight_0.highlightAuto(code);
+        }
+        else highlighted = highlight_0.highlightAuto(code);
+        return parseHighlightedCode(highlighted.value);
+    } catch  {
+        return null;
+    }
+}
 function extractTextProps(style) {
     if (!style) return {};
     const result = {};
@@ -248,7 +345,7 @@ function renderInlineTokens(tokens, styles, renderers) {
         }
     });
 }
-function renderBlockToken(token, styles, renderers, showSharp) {
+function renderBlockToken(token, styles, renderers, showSharp, highlight) {
     switch(token.type){
         case 'heading':
             {
@@ -289,6 +386,19 @@ 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) {
+                    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
+                        })
+                    });
+                }
                 return /*#__PURE__*/ jsx(Box, {
                     ...extractBoxProps(codeStyle),
                     children: /*#__PURE__*/ jsx(Text, {
@@ -302,17 +412,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)
                     }, `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);
                             if (rendered) return /*#__PURE__*/ jsx(Text, {
                                 ...extractTextProps(blockquoteStyle),
                                 children: 'paragraph' === t.type ? renderInlineTokens(t.tokens, styles, renderers) : t.text || ''
@@ -428,13 +536,13 @@ 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 }) {
     return /*#__PURE__*/ jsx(Fragment, {
-        children: renderBlockToken(token, styles, renderers, showSharp)
+        children: renderBlockToken(token, styles, renderers, showSharp, highlight)
     });
 }, (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 }) {
     const generatedId = useId();
     const key = id || generatedId;
     const tokens = useMemo(()=>marked.lexer(children), [
@@ -446,7 +554,8 @@ function MarkdownComponent({ children, id, styles = {}, renderers = {}, showShar
                 token: token,
                 styles: styles,
                 renderers: renderers,
-                showSharp: showSharp
+                showSharp: showSharp,
+                highlight: highlight
             }, `${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,16 @@ export type MarkdownProps = {
     styles?: BlockStyles;
     renderers?: BlockRenderers;
     showSharp?: boolean;
+    /**
+     * Enable syntax highlighting for code blocks
+     * @default true
+     */
+    highlight?: boolean;
 };
 export type MemoizedBlockProps = {
     token: Token;
     styles: BlockStyles;
     renderers: BlockRenderers;
     showSharp: boolean;
+    highlight: boolean;
 };

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.1.0",
   "description": "A modern performance markdown renderer for ink",
   "keywords": [
     "markdown",
@@ -51,6 +51,7 @@
   },
   "dependencies": {
     "dedent": "^1.7.1",
+    "highlight.js": "^11.11.1",
     "marked": "^16.4.2"
   }
 }