react-markdown-code-highlighter
Version:
`react-markdown-code-highlighter` is a flexible [React](https://react.dev) component for rendering Markdown with syntax-highlighted code blocks using [highlight.js](https://highlightjs.org/). It is designed for use in chat systems and AI assistants like C
33 lines • 1.76 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { memo } from 'react';
import Markdown from 'react-markdown';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';
import gfmPlugin from 'remark-gfm';
import BlockWrap from '../BlockWrap/index.js';
const modulePrefix = 'HighReactMarkdown';
const HighReactMarkdown = (props) => {
return (_jsx(Markdown, { remarkPlugins: [gfmPlugin], components: {
code: ({ className, children, ...codeProps }) => {
const match = /language-(\w+)/.exec(className || '');
if (match) {
const language = match[1];
// console.log(`${modulePrefix} code language`, language);
const code = String(children).replace(/\n$/, '');
// console.log(`${modulePrefix} code content`, code);
const highlighted = hljs.getLanguage(language)
? hljs.highlight(code, { language }).value
: hljs.highlightAuto(code).value;
return (_jsx(BlockWrap, { language: language, theme: props.theme, children: _jsx("pre", { className: `hljs language-${language}`, dangerouslySetInnerHTML: { __html: highlighted } }) }));
}
else {
return (_jsx("code", { className: className, ...codeProps, children: children }));
}
},
table: ({ children, ...props }) => {
return (_jsx("div", { className: "markdown-table-wrapper", children: _jsx("table", { className: "ds-markdown-table", children: children }) }));
},
}, ...props }));
};
export default memo(HighReactMarkdown);
//# sourceMappingURL=index.js.map