## Documentation for `MarkdownRenderer` Library
The `MarkdownRenderer` library is a JavaScript class designed to render Markdown content into HTML. It supports various features such as code highlighting, LaTeX math rendering, Mermaid diagrams, and more. Below is a detailed explanation of how the library works, how to integrate it into an HTML file, and examples of its usage.
### Features
1. **Mermaid Diagrams**: Renders Mermaid diagrams from Markdown code blocks.
2. **Code Highlighting**: Uses Prism.js for syntax highlighting of code blocks.
3. **Math Equations**: Supports LaTeX-style math equations.
4. **Tables**: Converts Markdown tables into HTML tables.
5. **Text Formatting**: Handles headers, bold, italic, links, lists, blockquotes, and horizontal rules.
6. **Copy Code Functionality**: Allows users to copy code blocks with line numbers.
### Integration into an HTML File
To use the `MarkdownRenderer` library, you need to include several external libraries and stylesheets in your HTML file. Below is an example of how to set up your HTML file:
```html
Markdown Renderer Example
```
Or using async
```html
Markdown Renderer Example
```
### Explanation of the Code
- **External Libraries**: The HTML file includes several external libraries such as Highlight.js, MathJax, Mermaid, Tailwind CSS, Axios, Anime.js, and Prism.js. These libraries are necessary for rendering code, math equations, diagrams, and styling.
- **MarkdownRenderer Initialization**: An instance of `MarkdownRenderer` is created and used to render Markdown text into HTML.
- **Rendering Markdown**: The `renderMarkdown` method is called with the Markdown text. It processes the text and converts it into HTML, which is then inserted into the `#markdown-content` div.
### Usage Examples
1. **Rendering Code Blocks**: The library uses Prism.js to highlight code blocks. You can specify the language for syntax highlighting by using the appropriate language identifier (e.g., `javascript`, `python`).
2. **Rendering Mermaid Diagrams**: Wrap your Mermaid code in a code block with the `mermaid` identifier to render diagrams.
3. **Rendering Math Equations**: Use LaTeX-style syntax for math equations. Inline equations can be wrapped in `$...$`, and block equations can be wrapped in `$$...$$`.
4. **Rendering Tables**: Markdown tables are automatically converted into HTML tables with proper styling.
5. **Copy Code Functionality**: Each code block includes a "Copy" button that allows users to copy the code with line numbers.
This documentation provides a comprehensive guide to using the `MarkdownRenderer` library. By following the integration steps and examples, you can easily render Markdown content in your web applications.