Skip to content

LaTeX Using KaTeX

Jump to bottom Edit New page
RMWinslow edited this page May 5, 2023 · 8 revisions

MathJax is fairly easily integratable with remark, as shown on LaTeX Using MathJax, but as the fine folks at Khan Academy have discovered, it's not too fast, so they created KaTeX. For most cases, especially if you're only using LaTeX and not MathML or similar (because why would you?) KaTeX is a heck of a lot faster (and also a bit easier to do common configuration changes)! Here's an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
      /* Slideshow styles */
    </style>
  </head>
  <body>
    <textarea id="source">

class: center, middle

# \\(\KaTeX{}\\) in remark

---

# Display and Inline

1. This is an inline integral: \\(\int_a^bf(x)dx\\)
2. More \\(x={a \over b}\\) formulae.

Display formula:

$$e^{i\pi} + 1 = 0$$

    </textarea>
    <script src="https://gnab.github.io/remark/downloads/remark-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/contrib/auto-render.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">
    <script type="text/javascript">
      var options = {};
      var renderMath = function() {
        document.addEventListener("DOMContentLoaded", function() {
          renderMathInElement(document.body, {
              delimiters: [
                {left: "$$", right: "$$", display: true},
                {left: "$", right: "$", display: false},
                {left: "\\(", right: "\\)", display: false},
                {left: "\\[", right: "\\]", display: true}
              ]});
        });
      }
      var slideshow = remark.create(options, renderMath);

    </script>
  </body>
</html>
<title>Title</title> <style> @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz); @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic); @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic); 
  body { font-family: 'Droid Serif'; }
  h1, h2, h3 {
    font-family: 'Yanone Kaffeesatz';
    font-weight: normal;
  }
  .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
<textarea id="source">

Code:

def add(a,b)
  a + b
end
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
  var slideshow = remark.create();
</script>
Clone this wiki locally