Inline LaTeX equations in shiny app with MathJax

Question

A solution to display LaTeX equations in line is offered here with a working live demo

The above mentioned solution to display equations in line is (cutting a few lines of code):

ui.R:

library(shiny)

shinyUI(fluidPage(
  title = 'MathJax Examples with in-line equations',
  withMathJax(),
  # section below allows in-line LaTeX via $ in mathjax. Replace less-than-sign with < 
  # and grater-than-sign with >
  tags$div(HTML("less-than-sign script type='text/x-mathjax-config' greater-than-sign
                MathJax.Hub.Config({
                tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
                });
                less-than-sign /script greater-than-sign
                ")),
  helpText('An irrational number $\\sqrt{2}$
           and a fraction $1-\\frac{1}{2}$'),
  helpText('and a fact about $\\pi$:$\\frac2\\pi = \\frac{\\sqrt2}2 \\cdot
           \\frac{\\sqrt{2+\\sqrt2}}2 \\cdot
           \\frac{\\sqrt{2+\\sqrt{2+\\sqrt2}}}2 \\cdots$'),
  uiOutput('ex1')
  ))

server.R:

shinyServer(function(input, output, session) {
  output$ex1 <- renderUI({
    withMathJax(helpText('Dynamic output 1:  $\\alpha^2$'))
  })
})

I am running R version 3.5.2 on macOS, and shiny 1.2. The app output is some verbatim text instead of the expected blend of text and inline equations:

less-than-sign script type='text/x-mathjax-config' greater-than-sign MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['′,′
']]} }); less-than-sign /script greater-than-sign
and a fact about $\pi$:$\frac2\pi = \frac{\sqrt2}2 \cdot \frac{\sqrt{2+\sqrt2}}2 \cdot \frac{\sqrt{2+\sqrt{2+\sqrt2}}}2 \cdots$
Dynamic output 1: $\alpha^2$

Can it be because of my R environment?

Does your code still contain "`less-than-sign`" and "`greater-than-sign`"? Those should be replace with "`<`" and "`>`" as stated in the comment. Showing it like that was probably just a way to get around some escaping behaviour when posting it to the blog or something. — Marius, Feb 26 '19 at 01:06
@Marius Good point. I have replaced those but it's still not working. — tic-toc-choc, Feb 26 '19 at 18:54

score 5 · Answer 1 · answered Feb 26 '19 at 09:26

An alternative way, using KaTeX instead of MathJax:

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$link(rel="stylesheet", 
              href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css", 
              integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ",
              crossorigin="anonymous"),
    HTML('<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>'),
    HTML('<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>'),
    HTML('
    <script>
      document.addEventListener("DOMContentLoaded", function(){
        renderMathInElement(document.body, {
          delimiters: [{left: "$", right: "$", display: false}]
        });
      })
    </script>')
  ),
  titlePanel("Hello Shiny!"),
  helpText('An irrational number $\\sqrt{2}$
           and a fraction $1-\\frac{1}{2}$'),
  helpText('and a fact about $\\pi$:$\\frac2\\pi = \\frac{\\sqrt2}2 \\cdot
           \\frac{\\sqrt{2+\\sqrt2}}2 \\cdot
           \\frac{\\sqrt{2+\\sqrt{2+\\sqrt2}}}2 \\cdots$'),
  uiOutput('ex1')
)

server <- function(input, output) {

  output$ex1 <- renderUI({
    tagList(
      helpText('Dynamic output 1: $\\alpha^2$'),
      tags$script('renderMathInElement(document.getElementById("ex1"), {delimiters: [{left: "$", right: "$", display: false}]});')
    )
  })  

}

score 2 · Answer 2 · answered Sep 18 '19 at 18:36

Fixing the MathJax script:

The problem is spaces in the <script> call. If you just replace "less-than-sign" with "<" and "greater-than-sign" with ">", you will be left with

tags$div(HTML("< script type='text/x-mathjax-config' >
            MathJax.Hub.Config({
            tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
            });
            < /script >
            "))

The < script> tag needs to be <script>. Thus, you should remove the spaces at the beginnings of those tags:

tags$div(HTML("<script type='text/x-mathjax-config' >
            MathJax.Hub.Config({
            tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
            });
            </script >
            "))

Inline LaTeX equations in shiny app with MathJax

2 Answers2

Fixing the MathJax script: