lollms-webui

mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-21 21:27:47 +00:00

History

Saifeddine ALOUI 350d1ce320 add lollms markdown renderer		2024-08-27 21:05:20 +02:00
..
DOC.md	add lollms markdown renderer	2024-08-27 21:05:20 +02:00
README.md	add lollms markdown renderer	2024-08-27 21:05:20 +02:00

README.md

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

Mermaid Diagrams: Renders Mermaid diagrams from Markdown code blocks.
Code Highlighting: Uses Prism.js for syntax highlighting of code blocks.
Math Equations: Supports LaTeX-style math equations.
Tables: Converts Markdown tables into HTML tables.
Text Formatting: Handles headers, bold, italic, links, lists, blockquotes, and horizontal rules.
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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Renderer Example</title>
    <!-- Highlight.js for code highlighting -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>

    <!-- MathJax for LaTeX math rendering -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-mml-chtml.js"></script>

    <!-- Mermaid for graph rendering -->
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Axios for HTTP requests -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <!-- Anime.js for animations -->
    <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>

    <!-- Prism CSS and JS for code highlighting -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-python.min.js"></script>
    <!-- Add more languages as needed -->

    <!-- Include the MarkdownRenderer script -->
    <script src="/lollms_assets/js/lollms_markdown_renderer"></script>
    <link rel="stylesheet" href="/lollms_assets/css/lollms_markdown_renderer">
</head>
<body>
    <div id="markdown-content">
        <!-- Markdown content will be rendered here -->
    </div>

    <script>
        // Initialize the MarkdownRenderer
        const mr = new MarkdownRenderer();

        // Example Markdown text
        const markdownText = `
        # Sample Markdown
        This is a **bold** text and this is *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  |
        `;

        // Render the Markdown text
        mr.renderMarkdown(markdownText).then(renderedHtml => {
            document.getElementById('markdown-content').innerHTML = renderedHtml;
        });
    </script>
</body>
</html>

Or using async

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Renderer Example</title>
    <!-- External Libraries -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-mml-chtml.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-python.min.js"></script>
    <!-- MarkdownRenderer -->
    <script src="/lollms_assets/js/lollms_markdown_renderer"></script>
    <link rel="stylesheet" href="/lollms_assets/css/lollms_markdown_renderer">
</head>
<body>
    <div id="markdown-content"></div>
    <script>
        (async () => {
            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;
        })();
    </script>
</body>
</html>

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

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).
Rendering Mermaid Diagrams: Wrap your Mermaid code in a code block with the mermaid identifier to render diagrams.
Rendering Math Equations: Use LaTeX-style syntax for math equations. Inline equations can be wrapped in $...$ , and block equations can be wrapped in $$...$$.
Rendering Tables: Markdown tables are automatically converted into HTML tables with proper styling.
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.