react-markdown-table-ts 1.2.1 → 1.3.0

package/.github/workflows/build.yml

@@ -0,0 +1,35 @@
+name: build
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Storybook
+        run: npm run build-storybook
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
+          storybookBuildDir: storybook-static

package/.github/workflows/publish.yml

@@ -0,0 +1,31 @@
+name: Publish to NPM
+
+on:
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test
+
+      - name: Build package
+        run: npx tsc
+
+      - name: Publish to NPM
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/test.yml

@@ -0,0 +1,42 @@
+name: Test Coverage
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run tests with coverage
+      run: npm run test:coverage
+
+    - name: Upload coverage to Codecov
+      uses: codecov/codecov-action@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        files: ./coverage/clover.xml,./coverage/lcov.info
+        flags: unittests
+        name: codecov-umbrella
+        fail_ci_if_error: true
+        verbose: true
+

package/.gitignore

@@ -0,0 +1,12 @@
+
+node_modules
+dist
+dist-ssr
+package-lock.json
+.*
+!.github
+!.storybook
+!.gitignore
+coverage/
+*storybook.log
+storybook-static

package/.storybook/main.ts

@@ -0,0 +1,13 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [],
+  "framework": {
+    "name": "@storybook/react-vite",
+    "options": {}
+  }
+};
+export default config;

package/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from "storybook/manager-api";
+import theme from "./theme";
+
+addons.setConfig({
+    theme: theme,
+});

package/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react-vite'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/.storybook/theme.ts

@@ -0,0 +1,8 @@
+import { create } from "storybook/theming";
+
+export default create({
+    base: "light",
+    brandTitle: "react-markdown-table-ts",
+    brandUrl: "https://github.com/keithwalsh/react-markdown-table-ts",
+    brandTarget: "_self",
+});

package/README.md

@@ -1,17 +1,18 @@
 # ⚛️ react-markdown-table-ts 🛡️
 
+![build](https://github.com/keithwalsh/react-markdown-table-ts/actions/workflows/build.yml/badge.svg)
 [![NPM Version](https://img.shields.io/npm/v/react-markdown-table-ts.svg)](https://www.npmjs.com/package/react-markdown-table-ts)
 [![codecov](https://codecov.io/gh/keithwalsh/react-markdown-table-ts/branch/main/graph/badge.svg)](https://codecov.io/gh/keithwalsh/react-markdown-table-ts)
-![Build](https://github.com/keithwalsh/react-markdown-table-ts/actions/workflows/build.yml/badge.svg)
 [![Code Climate](https://codeclimate.com/github/keithwalsh/react-markdown-table-ts/badges/gpa.svg)](https://codeclimate.com/github/keithwalsh/react-markdown-table-ts)
-[![GitHub branch status](https://img.shields.io/github/checks-status/keithwalsh/react-markdown-table-ts/HEAD)](https://github.com/keithwalsh/react-markdown-table-ts/commits/HEAD/)
+[![code quality](https://img.shields.io/codefactor/grade/github/keithwalsh/react-markdown-table-ts)](https://www.codefactor.io/repository/github/keithwalsh/react-markdown-table-ts)
+![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&logo=typescript&logoColor=white)
 
 | ![Light Theme Example](public/light.png) | ![Dark Theme Example](public/dark.png)  |
 |------------------------------------------|-----------------------------------------|
 | `'light'` theme                          | `'dark'` theme                          |
 
 ## Overview 
-This library provides a React component for generating and displaying formatted Markdown tables with syntax highlighting. The core component is `MarkdownTable` which converts 2D array data into properly formatted Markdown table syntax. Columns of variable width maintain consistent spacing across all rows, ensuring vertical alignment of delimiters. For syntax highlighting and line numbering, Prism.js is used within a `<pre>` HTML element.
+A React component for generating and displaying formatted Markdown tables with syntax highlighting. The core component is `MarkdownTable` which converts 2D array data into properly formatted Markdown table syntax. Columns of variable width maintain consistent spacing across all rows, ensuring vertical alignment of delimiters. For syntax highlighting and line numbering, Prism.js is used within a `<pre>` HTML element.
 
 ## API
 ```typescript
@@ -28,23 +29,25 @@ interface MarkdownTableProps {
     className?: string;
     preStyle?: React.CSSProperties;
     minWidth?: number;
+    showLineNumbers?: boolean;
     onGenerate?: (markdownTableString: string) => void;
 }
 ```
 | Prop                 | Type                                    | Default     | Description                                                                        |
 |----------------------|-----------------------------------------|-------------|------------------------------------------------------------------------------------|
 | `inputData`          | `string[][] \| null`                    | `null`      | The outer array represents rows. The inner array represent cells within each row. |
-| `columnAlignments`   | `readonly Alignment[]`                  | `[]`	       | Acceptable values are 'left', 'center', 'right', 'justify', or 'none'. Defaults to 'none' when unspecified. |
+| `columnAlignments`   | `readonly Alignment[]`                  | `[]`	       | Acceptable values are 'left', 'center', 'right', or 'none'. Defaults to 'none' when unspecified. |
 | `isCompact`          | `boolean`                               | `false`     | Disables column width alignment to provide a more compact markdown table string.   |
 | `hasPadding`         | `boolean`                               | `true`      | One space added before and after the content in each cell.                         |
 | `hasTabs`            | `boolean`                               | `false`     | Adds a tab character after each \| and before the content.                         |
 | `hasHeader`          | `boolean`                               | `true`      | Indicates whether the first row of `data` is a header.                             |
 | `convertLineBreaks`  | `boolean`                               | `false`     | Replace newlines with <br> tags in table cells.                                    |
 | `topPadding`         | `number`                                | `16`        | Controls the padding-top (in pixels) of the \<pre\> element display.               |
-| `theme`              | `'light' \| 'dark'`                     | `light`     | Controls the color scheme of the \<pre\> element display.                            |
+| `theme`              | `'light' \| 'dark'`                     | `light`     | Controls the colour scheme of the \<pre\> element display.                            |
 | `className`          | `string`                                | `undefined` | Class will be applied to the \<pre\> element display.                                |
 | `preStyle`           | `React.CSSProperties`                   | `undefined` | Allows direct styling of the display with CSS properties.                          |
 | `minWidth`           | `number`                                | `undefined` | Optional minimum width in pixels for the table container.                          |
+| `showLineNumbers`    | `boolean`                               | `true`      | Show or hide line numbers in the Prism syntax highlighting.                        |
 | `onGenerate`         | `(markdownTableString: string) => void` | `undefined` | Callback to receive the generated Markdown table string.                           |
 ## Usage Patterns
 
@@ -61,7 +64,7 @@ interface MarkdownTableProps {
 ```typescript
 <MarkdownTable
     inputData={data}
-    columnAlignments={['left', 'center', 'right', 'justify']}
+    columnAlignments={['left', 'center', 'right']}
 />
 ```
 3. **Auto-Generated Headers**:
@@ -78,20 +81,26 @@ interface MarkdownTableProps {
     minWidth={500} // Sets the minimum width of the table container to 500 pixels
 />
 ```
+5. **Hiding Line Numbers**:
+```typescript
+<MarkdownTable
+    inputData={data}
+    showLineNumbers={false} // Hides line numbers in the code block
+/>
+```
 
-## Behaviors
+## Behaviours
 
 1. **Input Validation**:
 - Input must be non-null 2D string array
 - All rows should contain string values
 - Empty arrays are not allowed
-- Column alignments must be valid ('left', 'center', 'right', 'justify', 'none')
+- Column alignments must be valid ('left', 'center', 'right', 'none')
 
 2. **Column Width Handling**:
 - Default: Adjusts columns to fit content with 'none' alignment
 - `isCompact={true}`: Minimizes column widths
 - Maintains minimum width of 3 characters for alignment indicators
-- 'justify' alignment behaves same as 'none' for markdown compatibility
 
 3. **Error Handling**:
 - Returns error message string if validation fails
@@ -106,7 +115,7 @@ interface MarkdownTableProps {
 ## Common Transformations
 
 1. **Data Formatting**:
-- Newlines can be converted to `<br>` tags with `canReplaceNewlines`
+- Newlines can be converted to `<br>` tags with `convertLineBreaks`
 - Padding can be controlled with `hasPadding`
 - Tab spacing available with `hasTabs`
 

package/jest.config.js

@@ -0,0 +1,38 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  roots: ['<rootDir>/src'],
+  testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  setupFilesAfterEnv: ['<rootDir>/src/tests/setup.ts'],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/stories/**',
+    '!src/tests/**',
+  ],
+  coverageThreshold: {
+    global: {
+      branches: 80,
+      functions: 80,
+      lines: 80,
+      statements: 80,
+    },
+  },
+  transform: {
+    '^.+\\.tsx?$': ['ts-jest', {
+      tsconfig: {
+        jsx: 'react-jsx',
+        esModuleInterop: true,
+        allowSyntheticDefaultImports: true,
+        verbatimModuleSyntax: false,
+        module: 'commonjs',
+        moduleResolution: 'node',
+      },
+    }],
+  },
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': '<rootDir>/src/tests/__mocks__/styleMock.js',
+  },
+};
+

package/package.json

@@ -1,88 +1,52 @@
 {
   "name": "react-markdown-table-ts",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "A React component that converts structured data into Markdown table syntax and displays it within a `<pre>` tag.",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "rollup -c",
-    "type-check": "tsc --noEmit",
-    "prepublishOnly": "npm run build",
-    "prepare": "npm run build",
-    "lint": "gts lint",
-    "clean": "gts clean",
-    "compile": "tsc",
-    "fix": "gts fix",
-    "pretest": "npm run compile",
-    "posttest": "npm run lint",
-    "test": "jest --config jest.config.js --coverage",
-    "test:watch": "jest --config jest.config.js --watch",
-    "test:ci": "jest --config jest.config.js --coverage --ci",
-    "release": "standard-version",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_f61460f108c0eb8"
-  },
   "keywords": [
     "markdown",
     "md",
     "table",
     "tables",
     "react",
-    "ts",
-    "typescript",
-    "types",
-    "typed",
     "generate",
     "generator",
     "convert",
     "converter"
   ],
-  "author": "Keith Walsh",
-  "license": "MIT",
-  "repository": "https://github.com/keithwalsh/react-markdown-table-ts.git",
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+  "homepage": "https://github.com/keithwalsh/react-markdown-table-ts#readme",
+  "bugs": {
+    "url": "https://github.com/keithwalsh/react-markdown-table-ts/issues"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "prismjs": "^1.30.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@rollup/plugin-commonjs": "^26.0.3",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-interactions": "^8.4.5",
-    "@storybook/addon-onboarding": "^8.4.5",
-    "@storybook/blocks": "^8.4.5",
-    "@storybook/react-vite": "^8.4.5",
-    "@storybook/test": "^8.4.5",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
-    "@types/jest": "^29.5.13",
-    "@types/node": "20.12.7",
-    "@types/prismjs": "^1.26.4",
-    "@types/react": "^18.3.8",
-    "@types/react-dom": "^18.3.0",
-    "chromatic": "^11.20.0",
-    "eslint-plugin-storybook": "^0.11.1",
-    "gts": "^5.3.1",
-    "identity-obj-proxy": "^3.0.0",
+    "@storybook/react-vite": "^9.1.10",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^24.6.0",
+    "@types/prismjs": "^1.26.5",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react-swc": "^4.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup": "^2.79.1",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "standard-version": "^9.5.0",
-    "storybook": "^8.4.5",
+    "storybook": "^9.1.10",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.1.6"
-  },
-  "dependencies": {
-    "prismjs": "^1.29.0"
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7"
   }
 }

package/src/index.tsx

@@ -0,0 +1,176 @@
+/**
+ * @fileoverview Main MarkdownTable component that generates and displays markdown
+ * table syntax with Prism.js syntax highlighting.
+ */
+
+import { useEffect, useMemo, useRef, useDeferredValue, useTransition, useId } from 'react';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/plugins/line-numbers/prism-line-numbers';
+import type { Alignment, MarkdownTableProps } from './types';
+import { generateMarkdownTableString, generateAlphabetHeaders } from './utils';
+import { validateInputData, MarkdownTableError } from './validation';
+
+const LIGHT_THEME_CSS = `
+code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}pre[class*=language-].line-numbers{position:relative;padding-left:2.4em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.5em;text-align:right}
+`;
+
+const DARK_THEME_CSS = `
+code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#282a36}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}pre[class*=language-].line-numbers{position:relative;padding-left:2.4em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.5em;text-align:right}
+`;
+
+function getTableData(inputData: string[][], hasHeader: boolean) {
+  return hasHeader
+    ? { inputDataHeader: inputData[0], inputDataBody: inputData.slice(1) }
+    : { inputDataHeader: generateAlphabetHeaders(inputData[0].length), inputDataBody: inputData };
+}
+
+function generateTableSyntax(
+  inputData: string[][] | null,
+  hasHeader: boolean,
+  columnAlignments: readonly Alignment[],
+  adjustColumnWidths: boolean,
+  hasTabs: boolean,
+  canReplaceNewlines: boolean,
+  hasPadding: boolean
+): string {
+  try {
+    validateInputData(inputData);
+    const { inputDataHeader, inputDataBody } = getTableData(inputData as string[][], hasHeader);
+
+    return generateMarkdownTableString(
+      { inputDataHeader, inputDataBody },
+      columnAlignments,
+      adjustColumnWidths,
+      hasTabs,
+      canReplaceNewlines,
+      hasPadding
+    );
+  } catch (error) {
+    if (error instanceof MarkdownTableError) {
+      return `Error: ${error.message}`;
+    }
+    throw error;
+  }
+}
+
+export function MarkdownTable({
+  inputData = null,
+  hasHeader = true,
+  columnAlignments = [],
+  isCompact = false,
+  hasTabs = false,
+  hasPadding = true,
+  convertLineBreaks = false,
+  className,
+  onGenerate,
+  theme = 'light',
+  preStyle,
+  topPadding = 16,
+  minWidth,
+  showLineNumbers = true,
+}: MarkdownTableProps) {
+  const preElementRef = useRef<HTMLPreElement>(null);
+  const id = useId();
+  const deferredInputData = useDeferredValue(inputData);
+  const [, startTransition] = useTransition();
+
+  const markdownTableSyntax = useMemo(() => generateTableSyntax(
+    deferredInputData,
+    hasHeader,
+    columnAlignments,
+    !isCompact,
+    hasTabs,
+    convertLineBreaks,
+    hasPadding
+  ), [
+    deferredInputData,
+    hasHeader,
+    columnAlignments,
+    isCompact,
+    hasTabs,
+    convertLineBreaks,
+    hasPadding,
+  ]);
+
+  useEffect(() => {
+    if (onGenerate) {
+      onGenerate(markdownTableSyntax);
+    }
+  }, [markdownTableSyntax, onGenerate]);
+
+  useEffect(() => {
+    const codeElement = preElementRef.current?.querySelector('code');
+    if (codeElement && markdownTableSyntax) {
+      startTransition(() => {
+        requestAnimationFrame(() => {
+          Prism.highlightElement(codeElement as HTMLElement);
+          
+          // Remove line numbers if showLineNumbers is false
+          if (!showLineNumbers && preElementRef.current) {
+            const lineNumbersRows = preElementRef.current.querySelector('.line-numbers-rows');
+            if (lineNumbersRows) {
+              lineNumbersRows.remove();
+            }
+          }
+        });
+      });
+    }
+  }, [markdownTableSyntax, startTransition, showLineNumbers]);
+
+  return (
+    <>
+      <style>
+        {theme === 'light' ? LIGHT_THEME_CSS : DARK_THEME_CSS}
+        {`
+          pre {
+            position: relative;
+            padding-top: ${topPadding}px !important;
+          }
+          pre::before {
+            position: absolute;
+            top: 8px;
+            left: 12px;
+            color: ${theme === 'light' ? '#666' : '#999'};
+            letter-spacing: 2px;
+            font-size: 12px;
+          }
+          /* Hide line numbers when showLineNumbers is false */
+          pre:not(.line-numbers) .line-numbers-rows {
+            display: none !important;
+          }
+          /* Remove left padding when line numbers are hidden */
+          pre:not(.line-numbers) {
+            padding-left: 1em !important;
+          }
+          pre:not(.line-numbers) > code {
+            padding-left: 0 !important;
+          }
+        `}
+      </style>
+      <div
+        id={id}
+        style={{
+          position: 'relative',
+          isolation: 'isolate',
+          display: 'inline-block'
+        }}
+      >
+        <pre
+          ref={preElementRef}
+          className={`${className} language-markdown ${showLineNumbers ? 'line-numbers' : ''} ${theme === 'dark' ? 'dark-theme' : ''}`}
+          style={{
+            width: 'fit-content',
+            minWidth: minWidth ? `${minWidth}px` : 'min-content',
+            margin: 0,
+            ...preStyle
+          }}
+        >
+          <code className="language-markdown" role="code">
+            {markdownTableSyntax}
+          </code>
+        </pre>
+      </div>
+    </>
+  );
+}

package/src/prism.d.ts

@@ -0,0 +1,6 @@
+declare module 'prismjs' {
+  const Prism: {
+    highlightElement: (element: HTMLElement) => void;
+  };
+  export default Prism;
+}