Skip to content

Instantly share code, notes, and snippets.

@linuswillner

linuswillner/math-notes-template.html

Last active April 29, 2020 14:46
Show Gist options
  • Save linuswillner/8c1b5eda0b6ce8739cacc1cb36685243 to your computer and use it in GitHub Desktop.
Save linuswillner/8c1b5eda0b6ce8739cacc1cb36685243 to your computer and use it in GitHub Desktop.
Download ZIP
A simple HTML template for making maths, physics etc. notes with support for ASCIIMath formatting
Raw
math-notes-template.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<title>HTML Math Notes</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
</head>
<body>
<!-- Content goes here, example: -->
<h2>Welcome to HTML Math Notes!</h2>
<p>
<h3>Formula title</h3>
<p>You can add more information about the formula here.</p>
<p>By using formula tags, you can format your maths expressions with ASCIIMath.</p>
<p>For more details about ASCIIMath formatting, see <a href="https://asciimath.org">asciimath.org</a>.</p>
<formula>sum_(i=1)^n i^3=((n(n+1))/2)^2</formula>
</p>
<!-- Load MathJax and ASCIIMath -->
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://rawcdn.githack.com/asciimath/asciimathml/6be5471ff2feb561afd7c68224e63b0a7a7d0f12/ASCIIMathML.js"></script>
<script>
// Reset math color (ASCIIMath default is a rather hideous blue)
window.addEventListener('load', () => Array.from(document.getElementsByTagName('mstyle')).forEach(element => element.style.color = 'inherit'))
// Prepare all <formula> tags with the ASCIIMath tags (Backticks) to enable AM rendering
Array.from(document.getElementsByTagName('formula')).forEach(element => element.innerText = `\`${element.innerText}\``)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment