Skip to content

LaTeX using MathJax

Jump to bottom Edit New page
Florian Rathgeber edited this page Jul 3, 2013 · 11 revisions

Note: as of 0.5.0 the ready event is no longer necessary so the code below will no longer work as is, but there is a working demo.

As requested in issue "MathJax support", joshbode supplied the following gist, utilizing the remark ready event:

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="https://github.com/downloads/gnab/remark/remark-0.4.2.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML&delayStartupUntil=configured">
      remark.on('ready', function () {
        MathJax.Hub.Config({
          tex2jax: {
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
          }
        });
        MathJax.Hub.Queue(function() {
          $(MathJax.Hub.getAllJax()).map(function(index, elem) {
            return(elem.SourceElement());
          }).parent().addClass('has-jax');
        });
        MathJax.Hub.Configured();
      });
    </script>
    <style type="text/css" media="screen">
      code.has-jax {font: inherit; font-size: 100%; background: inherit; border: inherit;}
    </style>
  </head>
  <body>
    <textarea id="source">
 
class: center, middle
 
# `\(\LaTeX{}\)` 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>
    <div id="slideshow" />
  </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