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

bash

npm install react-markdown-code-highlighter







 



Props



$3



| Name           | Type                                                                                                     | Description                                                                 | Default  |

| -------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | -------- |

|

interval | number

                                                                                                 | Typing speed in milliseconds                                                |

     |

|

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

tsx

import { useState } from 'react';

import DsMarkdown from 'ds-markdown';

import 'ds-markdown/style.css';



const markdown =

# ds-markdown

\ds-markdown\ is a React 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 (

    

      

              answerType="thinking"

        interval={5}

        onEnd={() => {

          setAnswerContent(markdown);

        }}

      >

        {thinkingContent}

      



      {!!answerContent && (

        

          {answerContent}

        

      )}

    

  );

}



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

tsx

import { useRef } from 'react';

import { MarkdownCMD } from 'ds-markdown';

import 'ds-markdown/style.css';



const markdown =

# ds-markdown

\ds-markdown\ is a React component, similar in style to the deepseek official website \Markdown\

Features

;



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 (

    

      

      

    

  );

}



export default App;





Dark Mode Support



$3



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.



$3



Set the theme in your application using JavaScript:

js

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.



$3

js

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

react-markdown-code-highlighter

Features

Installation

bash

npm install react-markdown-code-highlighter







 



Props



$3



| Name           | Type                                                                                                     | Description                                                                 | Default  |

| -------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | -------- |

|

interval | number

                                                                                                 | Typing speed in milliseconds                                                |

     |

|

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

tsx

import { useState } from 'react';

import DsMarkdown from 'ds-markdown';

import 'ds-markdown/style.css';



const markdown =

# ds-markdown

\ds-markdown\ is a React component, similar in style to the deepseek official website \Markdown\

Features

;



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 (

    

      

              answerType="thinking"

        interval={5}

        onEnd={() => {

          setAnswerContent(markdown);

        }}

      >

        {thinkingContent}

      



      {!!answerContent && (

        

          {answerContent}

        

      )}

    

  );

}



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

tsx

import { useRef } from 'react';

import { MarkdownCMD } from 'ds-markdown';

import 'ds-markdown/style.css';



const markdown =

# ds-markdown

\ds-markdown\ is a React component, similar in style to the deepseek official website \Markdown\

Features

;



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 (

    

      

      

    

  );

}



export default App;





Dark Mode Support



$3



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.



$3



Set the theme in your application using JavaScript:

js

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.



$3

js

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