contrib/auto-render/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Auto-render test</title>
    <script src="/katex.js" type="text/javascript"></script>
    <link href="/katex.css" rel="stylesheet" type="text/css">
    <script src="./auto-render.js" type="text/javascript"></script>
    <style type="text/css">
      body {
          margin: 0px;
          padding: 0px;
          font-size: 36px;
      }

      #test > .blue {
          color: blue;
      }
    </style>
  </head>
  <body>
    <div id="test">
      This is some text $math \frac12$ other text $\unsupported$
      <span class="blue">
        Other node \[ displaymath \frac{1}{2} \] blah $$ \int_2^3 $$
      </span>
      and some <!-- comment --> more text \(and math\) blah. And $math with a
      \$ sign$.
      <pre>
        Stuff in a $pre tag$
      </pre>
    </div>
    <script>
      renderMathInElement(
          document.getElementById("test"),
          {
              delimiters: [
                  {left: "$$", right: "$$", display: true},
                  {left: "\\[", right: "\\]", display: true},
                  {left: "$", right: "$", display: false},
                  {left: "\\(", right: "\\)", display: false}
              ]
          }
      );
    </script>
  </body>
</html>