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

Revisions

  1. linuswillner revised this gist Apr 29, 2020. 1 changed file with 1 addition and 8 deletions.
    9 changes: 1 addition & 8 deletions math-notes-template.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,13 +4,6 @@
    <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">
    <style>
    /* Make formula elements behave akin to <p> elements */
    formula {
    margin-top: 16px;
    margin-bottom: 16px;
    }
    </style>
    </head>
    <body>
    <!-- Content goes here, example: -->
    @@ -27,7 +20,7 @@ <h3>Formula title</h3>
    <script src="https://rawcdn.githack.com/asciimath/asciimathml/6be5471ff2feb561afd7c68224e63b0a7a7d0f12/ASCIIMathML.js"></script>
    <script>
    // Reset math color (ASCIIMath default is a rather hideous blue)
    setTimeout(() => Array.from(document.getElementsByTagName('mstyle')).forEach(element => element.style.color = 'inherit'), 1)
    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}\``)
  2. linuswillner created this gist Apr 29, 2020.
    36 changes: 36 additions & 0 deletions math-notes-template.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    <!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">
    <style>
    /* Make formula elements behave akin to <p> elements */
    formula {
    margin-top: 16px;
    margin-bottom: 16px;
    }
    </style>
    </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)
    setTimeout(() => Array.from(document.getElementsByTagName('mstyle')).forEach(element => element.style.color = 'inherit'), 1)

    // 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>