react-markdown-code-highlighter

react-markdown-code-highlighter is a flexible React component for rendering Markdown with syntax-highlighted code blocks using highlight.js. It is designed for use in chat systems and AI assistants like ChatGPT, Claude, DeepSeek, and any application that needs beautiful, performant Markdown rendering with code highlighting.

DEMO

Features

• 💬 Perfect for chat UIs and AI assistants (ChatGPT, Claude, DeepSeek, etc.)
• 🖍 Syntax highlighting for code blocks via highlight.js
• 🛠 Optional typing effect for streaming/AI responses
• ⚡ Optimized for large documents and fast rendering
• 📦 Easy integration with any React project

Installation

npm install react-markdown-code-highlighter

Props

Default Export

| Name | Type | Description | Default | | -------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | -------- | | interval | number | Typing speed in milliseconds | 30 | | answerType | thinking | answer | Markdown type | answer | | onEnd | (data: { str: string; answerType: AnswerType }) => void | Callback after typing ends. May trigger multiple times due to AI streaming | - | | onStart | (data: { currentIndex: number; currentChar: string; answerType: AnswerType; prevStr: string }) => void | Callback when typing starts. May trigger multiple times | - | | onTypedChar | (data: { currentIndex: number; currentChar: string; answerType: AnswerType; prevStr: string }) => void | Callback for each character being typed | - |

Usage Example - Default Export

View Online

import { useState } from 'react';
import DsMarkdown from 'ds-markdown';
import 'ds-markdown/style.css';

const markdown = `# ds-markdown

\`ds-markdown\` is a [React](https://react.dev) component, similar in style to the deepseek official website \`Markdown\`

## Features

- 🦮 1:1 reproduction of the chat response effect from the deepseek official website
- 🛠 Built-in typing effect
- 🦮 Built-in common \`markdown\` text display
- 🔤 Performance optimization for large documents: processes in batches to avoid UI lag when generating typing effects
`;

function App() {
  const [thinkingContent, setThinkingContent] = useState('');
  const [answerContent, setAnswerContent] = useState('');

  const onClick = () => {
    // If clicked repeatedly, previous effects will be cleared
    setThinkingContent('This is my thinking content. I have finished thinking, here is my answer.');
  };

  return (
    <div>
      <button onClick={onClick}>Show Typing Effect</button>
      <DsMarkdown
        answerType="thinking"
        interval={5}
        onEnd={() => {
          setAnswerContent(markdown);
        }}
      >
        {thinkingContent}
      </DsMarkdown>

      {!!answerContent && (
        <DsMarkdown answerType="answer" interval={5}>
          {answerContent}
        </DsMarkdown>
      )}
    </div>
  );
}

export default App;

Imperative Example

In the above example, the typing effect is handled declaratively. When streaming data, the text changes continuously, so you can use the imperative approach to add text, reducing markdown rerenders.

Usage: import { MarkdownCMD } from 'ds-markdown';

View Online

import { useRef } from 'react';
import { MarkdownCMD } from 'ds-markdown';
import 'ds-markdown/style.css';

const markdown = `# ds-markdown

\`ds-markdown\` is a [React](https://react.dev) component, similar in style to the deepseek official website \`Markdown\`

## Features

- 🦮 1:1 reproduction of the chat response effect from the deepseek official website
- 🛠 Built-in typing effect
- 🦮 Built-in common \`markdown\` text display
- 🔤 Performance optimization for large documents: processes in batches to avoid UI lag when generating typing effects
`;

function App() {
  const ref = useRef();

  const onClick = () => {
    // If clicked repeatedly, previous effects will be cleared
    ref.current.clear();
    // Show thinking process
    ref.current.push('Thinking process: I am thinking about what ds-markdown is\n\nThinking finished, preparing to send answer', 'thinking');
    // Show result
    ref.current.push(markdown, 'answer');
  };

  return (
    <div>
      <button onClick={onClick}>Show Typing Effect</button>
      <MarkdownCMD ref={ref} />
    </div>
  );
}

export default App;

Dark Mode Support

How Dark Mode Works

The code block theme (light or dark) is determined by the value of vite-ui-theme in your browser's localStorage:

• If vite-ui-theme is set to 'dark', code blocks will use the dark theme.
• Any other value (or unset) will use the light theme.

How to Enable Dark Mode

Set the theme in your application using JavaScript:

window.localStorage.setItem('vite-ui-theme', 'dark'); // Enable dark mode
window.localStorage.setItem('vite-ui-theme', 'light'); // Enable light mode

You can toggle this value based on your app's theme switcher or user preference.

Example: Toggle Dark Mode

function toggleTheme() {
  const current = window.localStorage.getItem('vite-ui-theme');
  window.localStorage.setItem('vite-ui-theme', current === 'dark' ? 'light' : 'dark');
  window.location.reload(); // or trigger a re-render in your app
}

Note: The code block theme is read once on component mount. If you change the theme, you may need to reload or re-render the component to see the effect.

Compatibility

This component uses react hooks, so the minimum required react version is v16.8.0.

License

MIT