<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo for Mathjax Parser</title>
  <script src="https://unpkg.com/mathjax-parser@3.0.3/mathjax-parser.js"></script>

</head>
<body>

<div id="demo" contenteditable="true">
  <p>I'd kill for something like a $$ cold beer $$</p>
  <p> $Hello <br> world$, isn't it a sunny <strong> day <br> today?</strong> Cool beans.</p>
  <p>
    This should <b>$not</b>$ be parsed, since one dollar-sign is in the bold-tag while the other dollar-sign is not.
  </p>
</div>

<hr>

<div id="result"></div>

<button onclick="parseMathjaxWithDemoString()">Parse</button>

<script>
  function parseMathjaxWithDemoString() {
    var demoString = document.getElementById("demo").innerHTML;

    var config = {
          inlineMath: [['$','$'],['\\(','\\)']],
          displayMath: [['$$','$$'],['\\[','\\]']],
          inlineMathReplacement: ['XXX', 'XXX'],
          displayMathReplacement: ['YYY','YYY']
        }

    var parser = new MathjaxParser();
    document.getElementById("result").innerHTML = parser.parse(demoString, config).outputHtml;
  }
</script>

</body>
</html>
// Code goes here

/* Styles go here */