React component to use markdown with code blocks syntax highlighting , admonitions, math blocks and more
npm install @arubiku/react-markdown
@arubiku/react-markdown is a React package that allows you to render Markdown content easily and efficiently, with support for code highlighting and customizable themes.
bash
npm install @arubiku/react-markdown
or
yarn add @arubiku/react-markdown
`
Usage
To use the package in your application, you must first import the HighlighterProvider and the SimpleMarkdown component into your file:
`jsx
import React from 'react';
import { HighlighterProvider, SimpleMarkdown } from '@arubiku/react-markdown';
const App = () => {
const markdownContent =
\\javascript
const hello = 'Hello, World!';
console.log(hello);
\\\
;
return (
);
};
export default App;
`
$3
The SimpleMarkdown component accepts the following properties:
| Property | Type | Description |
|--------------------|----------|---------------------------------------------------------------------------------|
| content | string | The content in Markdown format that you want to render. |
| className | string | Additional CSS classes for the container. The default is dark:prose-invert. |
| paragraphClass | string | CSS classes for paragraphs. Default is my-2. |
| imageHeight | number | Height of images in pixels. Default is 400. |
| theme | string | Code highlighting theme. Default is light. |
| codeBlockTheme | string | CSS classes for code blocks. Default is bg-[#fdf6e3] dark:bg-[#2d353b]. |
| tableHeaderClass | string | CSS classes for table headers. Default is bg-gray-200 dark:bg-gray-700]. |
| tableCellClass | string | CSS classes for table cells. Default is border px-4 py-2. |
| extraAlerts | AlertMarkdowns[] | Extra alerts to be added to the markdown. Default is []. |
$3
| Property | Type | Description |
|------------------|----------|---------------------------------------------------------------------------------|
| SVG | JSX.Element | The SVG icon to be displayed. |
| ID | string | The ID of the alert. |
| CLASSNAME | string | The CSS class of the alert. |
| TITLE | string | The title of the alert. |
| COLOR | string | The color of the alert. |
> [!NOTE]
> To use the dark theme, ensure you have dark mode enabled in Tailwind CSS.
$3
The package supports the following Markdown syntax:
- Headers [#, ##, ###]
- Bold and italic text [bold, italic]
- Underline [__a__]
- Blockquotes [>]
- Special Block Quotes [> [!NOTE, !TIP, !IMPORTANT, !WARNING, !CAUTION]]
- Tables
- Images ![alt text or iframe]
- Links text
- Code blocks [``]
[code]
$ {equation} ex: $ f(x) = 2x^2 + frac{3}{4}
HighlighterProvider: A context provider that supplies syntax highlighting capabilities to all child components.
SimpleMarkdown: The main component for rendering Markdown content.
git checkout -b feature/new-feature).
git commit -m 'I added new functionality').
git push origin feature/new-feature).