Certainly! Here's the updated version of the quick guide using `await` for rendering the Markdown content:
## MarkdownRenderer Library - Quick Guide
The `MarkdownRenderer` library is a JavaScript class for converting Markdown content into HTML with features like code highlighting, LaTeX math rendering, and Mermaid diagrams.
### Key Features
1. **Mermaid Diagrams**: Render diagrams from Markdown code blocks.
2. **Code Highlighting**: Use Prism.js for syntax highlighting.
3. **Math Equations**: Support LaTeX-style math equations.
4. **Tables**: Convert Markdown tables into HTML.
5. **Text Formatting**: Handle headers, bold, italic, links, lists, blockquotes, and horizontal rules.
6. **Copy Code**: Enable copying of code blocks with line numbers.
### Integration Steps
Include the following in your HTML file header (this must be added to the html to allow the rendering):
```html
```
### Usage
```javascript
const mr = new MarkdownRenderer();
const markdownText = `
# Sample Markdown
**Bold** text, *italic* text.
## Code Block
\`\`\`javascript
console.log('Hello, World!');
\`\`\`
## Mermaid Diagram
\`\`\`mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
\`\`\`
## Math Equation
$$E = mc^2$$
## Table
| Name | Age |
|-------|-----|
| Alice | 24 |
| Bob | 30 |
`;
const renderedHtml = await mr.renderMarkdown(markdownText);
document.getElementById('markdown-content').innerHTML = renderedHtml;
```
- **Code Blocks**: Use Prism.js for syntax highlighting by specifying the language (e.g., `javascript`).
- **Mermaid Diagrams**: Use `mermaid` identifier in code blocks.
- **Math Equations**: Use `$...$` for inline and `$$...$$` for block equations.
- **Tables**: Automatically convert Markdown tables to HTML.