Method renderHtml

packages/muya/src/state/markdownToHtml.ts:95–133

()

    // render pure html by marked
    async renderHtml() {
        let html = getHighlightHtml(this.markdown, {
            superSubScript: this.muya?.options?.superSubScript ?? true,
            footnote: this.muya?.options?.footnote ?? false,
            isGitlabCompatibilityEnabled:
        this.muya?.options?.isGitlabCompatibilityEnabled ?? true,
            math: this.muya?.options?.math ?? true,
        });

        html = sanitize(html, EXPORT_DOMPURIFY_CONFIG, false) as string;

        const exportContainer = (this._exportContainer
            = document.createElement('div'));
        exportContainer.classList.add('mu-render-container');
        exportContainer.innerHTML = html;
        document.body.appendChild(exportContainer);

        // render only render the light theme of mermaid and diagram...
        await this.renderMermaid();
        await this.renderDiagram();
        let result = exportContainer.innerHTML;
        exportContainer.remove();

        // hack to add arrow marker to output html
        // TODO: JOCS, are these codes still needed?
        const paths = document.querySelectorAll('path[id^=raphael-marker-]');
        const def = '<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">';
        result = result.replace(def, () => {
            let str = '';
            for (const path of paths)
                str += path.outerHTML;

            return `${def}${str}`;
        });

        this._exportContainer = null;

        return `<article class="markdown-body">${result}</article>`;
    }

    /**
     * Get HTML with style