Skip to content

Instantly share code, notes, and snippets.

@0187773933

0187773933/RenderMDWithKaTeX.html

Created June 7, 2023 20:27
Show Gist options
  • Save 0187773933/cea7f46c89194bfb4aae758ae88e5484 to your computer and use it in GitHub Desktop.
Save 0187773933/cea7f46c89194bfb4aae758ae88e5484 to your computer and use it in GitHub Desktop.
Download ZIP
Render MD with KaTeX to HTML
Raw
RenderMDWithKaTeX.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MD + Katex Render Test</title>
<script defer src="https://39363.org/CDN/marked.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-3UiQGuEI4TTMaFmGIZumfRPtfKQ3trwQE2JgosJxCnGmQpL/lJdjpcHkaaFwHlcI" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-G0zcxDFp5LWZtDuRMnBkk3EphCK1lhEf4UEyEM693ka574TZGwo4IWwS6QLzM/2t" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/mhchem.min.js" integrity="sha256-8MoD3xlLjD1gF/9FXbag75iFeQVmP6MRps3teIsVNAs=" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous" ></script>
</head>
<body>
<div id="source">
# Hello, World!
This is a test of Markdown rendering.
- really?
- finally?
- ok
Here's some math:
$$
\ce{C6H12O6 + 6O2 -> 6CO2 + 6H2O}
$$
</div>
<script type="text/javascript">
function render_md( element_id ) {
let element = document.getElementById( element_id );
let text = replaceHTMLElementsInString( element.innerHTML );
let md_lines = marked.parse( text );
element.innerHTML = md_lines;
}
function render_math( element_id ) {
let element = document.getElementById( element_id );
// let text = element.innerHTML;
// let escaped_text = replaceInString( text );
// console.log( escaped_text );
// element.textContent = text;
console.log( element );
renderMathInElement( element , {
strict: "ignore" ,
delimiters: [
{ left: "$$" , right: "$$" , display: true } ,
{ left: "$" , right: "$" , display: true }
],
throwOnError : false
});
}
function replaceInString(str) {
str = str.replace(/<[\/]?pre[^>]*>/gi, "");
str = str.replace(/<br\s*[\/]?[^>]*>/gi, "\\n");
str = str.replace(/<div[^>]*>/gi, "\\n");
// Thanks Graham A!
str = str.replace(/<[\/]?span[^>]*>/gi, "")
str.replace(/<\/div[^>]*>/g, "\\n");
return replaceHTMLElementsInString( str );
}
function replaceHTMLElementsInString(str) {
str = str.replace(/&nbsp;/gi, " ");
str = str.replace(/&tab;/gi, " ");
str = str.replace(/&gt;/gi, ">");
str = str.replace(/&lt;/gi, "<");
return str.replace(/&amp;/gi, "&");
}
document.addEventListener( "DOMContentLoaded" , function() {
render_md( "source" );
render_math( "source" );
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment