// Requires importing:
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
// When served with lollms, just use
// Don't forget to get the css too
// Make sure there is a global variable called mr that instanciate MarkdownRenderer
// mr = new MarkdownRenderer()
class MarkdownRenderer {
async renderMermaidDiagrams(text) {
const mermaidCodeRegex = /```mermaid\n([\s\S]*?)```/g;
const matches = text.match(mermaidCodeRegex);
if (!matches) return text;
for (const match of matches) {
const mermaidCode = match.replace(/```mermaid\n/, '').replace(/```$/, '');
const uniqueId = 'mermaid-' + Math.random().toString(36).substr(2, 9);
try {
const result = await mermaid.render(uniqueId, mermaidCode);
const htmlCode = `
${result.svg}
`;
text = text.replace(match, htmlCode);
} catch (error) {
console.error('Mermaid rendering failed:', error);
text = text.replace(match, `
Failed to render diagram
`);
}
}
return text;
}
async renderCodeBlocks(text) {
if (typeof Prism === 'undefined') {
throw new Error('Prism is not loaded. Please include Prism.js in your project.');
}
const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
const renderedText = await text.replace(codeBlockRegex, (match, language, code) => {
language = language || 'plaintext';
if (!Prism.languages[language]) {
console.warn(`Language '${language}' is not supported by Prism. Falling back to plaintext.`);
language = 'plaintext';
}
const highlightedCode = Prism.highlight(code.trim(), Prism.languages[language], language);
const lines = highlightedCode.split(/\r?\n/);
const numberedLines = lines.map((line, index) =>
`${index + 1}${line}`
).join('\n');
return `
${language}
${numberedLines}
`;
});
return renderedText;
}
handleInlineCode(text) {
return text.replace(/`([^`]+)`/g, function(match, code) {
return `${code}`;
});
}
handleMathEquations(text) {
return text.replace(/\\\[([\s\S]*?)\\\]|\$\$([\s\S]*?)\$\$|\$([^\n]+?)\$/g, function(match, p1, p2, p3) {
const equation = p1 || p2 || p3;
return '' + equation + '';
});
}
async handleTables(text) {
let alignments = [];
let tableRows = [];
let isInTable = false;
let hasHeader = false;
// Process the text line by line
text = text.split('\n').map(line => {
// Check if the line is a table row
if (line.trim().startsWith('|') && line.trim().endsWith('|')) {
isInTable = true;
const tableRow = line.trim().slice(1, -1); // Remove leading and trailing |
const cells = tableRow.split('|').map(cell => cell.trim());
if (cells.every(cell => cell.match(/^:?-+:?$/))) {
// This is the header separator row
alignments = cells.map(cell => {
if (cell.startsWith(':') && cell.endsWith(':')) return 'center';
if (cell.endsWith(':')) return 'right';
return 'left';
});
hasHeader = true;
return ''; // Remove separator row
}
const cellType = !hasHeader ? 'th' : 'td';
const renderedCells = cells.map((cell, cellIndex) =>
`<${cellType} class="border px-4 py-2" style="text-align: ${alignments[cellIndex] || 'left'};">${cell}`
).join('');
tableRows.push(`
${renderedCells}
`);
return ''; // Remove the original Markdown line
} else if (isInTable) {
// We've reached the end of the table
isInTable = false;
hasHeader = false;
const tableContent = tableRows.join('');
tableRows = []; // Reset for next table
return `
${tableContent}
`;
}
return line; // Return non-table lines unchanged
}).join('\n');
// Handle case where table is at the end of the text
if (isInTable) {
const tableContent = tableRows.join('');
text += `