make sure to mention rendering plotly MathJax with shiny MathJax

Author: cpsievert

NEWS.md

@@ -15,7 +15,7 @@
 
 ### Other improvements relevant for all **plotly** objects
 
-* TeX rendering via MathJax is now supported (#375). Use the new `mathjax` argument in `config()` to specify either external (`mathjax="cdn"`) or local (`mathjax="local"`) MathJaX. If `"cdn"`, mathjax is loaded externally (meaning an internet connection is needed for TeX rendering). If `"local"`, the PLOTLY_MATHJAX_PATH environment variable must be set to the location (a local file path) of MathJax. IMPORTANT: **plotly** uses SVG-based mathjax rendering which doesn't play nicely with HTML-based rendering (e.g., rmarkdown documents). In this case, consider `<iframe>`-ing your plotly graph(s) into the larger document (see [here](https://github.com/ropensci/plotly/blob/master/inst/examples/rmd/MathJax/index.Rmd) for an example).
+* LaTeX rendering via MathJax is now supported and the new `TeX()` function may be used to flag a character vector as LaTeX (#375). Use the new `mathjax` argument in `config()` to specify either external (`mathjax="cdn"`) or local (`mathjax="local"`) MathJaX. If `"cdn"`, mathjax is loaded externally (meaning an internet connection is needed for TeX rendering). If `"local"`, the PLOTLY_MATHJAX_PATH environment variable must be set to the location (a local file path) of MathJax. IMPORTANT: **plotly** uses SVG-based mathjax rendering which doesn't play nicely with HTML-based rendering (e.g., **rmarkdown** documents and **shiny** apps). To leverage both types of rendering, you must `<iframe>` your plotly graph(s) into the larger document (see [here](https://github.com/ropensci/plotly/blob/master/inst/examples/rmd/MathJax/index.Rmd) for an **rmarkdown** example  and [here](https://github.com/ropensci/plotly/blob/master/inst/examples/rmd/MathJax/index.Rmd) for a **shiny** example).
 * The selection (i.e., linked-brushing) mode can now switch from 'transient' to 'persistent' by holding the 'shift' key. It's still possible to _force_ persistent selection by setting `persistent = TRUE` in `highlight()`, but `persistent = FALSE` (the default) is now recommended since it allows one to switch between [persistent/transient selection](https://plotly-book.cpsievert.me/linking-views-without-shiny.html#transient-versus-persistent-selection) in the browser, rather than at the command line.
 * The `highlight()` function gains a `debounce` argument for throttling the rate at which `on` events may be fired. This is mainly useful for improving user experience when `highlight(on = "plotly_hover")` and mousing over relevant markers at a rapid rate (#1277)
 * The new `partial_bundle()` function makes it easy to leverage [partial bundles of plotly.js](https://github.com/plotly/plotly.js#partial-bundles) for reduced file sizes and faster render times.

R/layout.R

@@ -94,19 +94,17 @@ rangeslider <- function(p, start = NULL, end = NULL, ...) {
 #' @param mathjax add [MathJax rendering support](https://github.com/plotly/plotly.js/tree/master/dist#to-support-mathjax).
 #' If `"cdn"`, mathjax is loaded externally (meaning an internet connection is needed for 
 #' TeX rendering). If `"local"`, the PLOTLY_MATHJAX_PATH environment variable must be
-#' set to the location (a local file path) of MathJax. IMPORTANT: plotly uses SVG-based 
-#' mathjax rendering which doesn't play nicely with HTML-based rendering (e.g., rmarkdown documents). 
-#' In this case, consider `<iframe>`-ing your plotly graph(s) into the larger document 
-#' (see [here](https://github.com/ropensci/plotly/blob/master/inst/examples/rmd/MathJax/index.Rmd) for an example).
+#' set to the location (a local file path) of MathJax. IMPORTANT: **plotly** uses SVG-based 
+#' mathjax rendering which doesn't play nicely with HTML-based rendering 
+#' (e.g., **rmarkdown** documents and **shiny** apps). To leverage both types of rendering, 
+#' you must `<iframe>` your plotly graph(s) into the larger document 
+#' (see [here](https://github.com/ropensci/plotly/blob/master/inst/examples/rmd/MathJax/index.Rmd) 
+#' for an **rmarkdown** example and 
+#' [here](https://github.com/ropensci/plotly/blob/master/inst/examples/rmd/MathJax/index.Rmd) for a **shiny** example).
 #' @author Carson Sievert
 #' @export
 #' @examples
 #' 
-#' today <- Sys.Date()
-#' x <- seq.Date(today, today + 360, by = "day")
-#' p <- plot_ly(x = x, y = rnorm(length(x))) %>%
-#'   add_lines()
-#' 
 #' # remove the plotly logo and collaborate button from modebar
 #' config(p, displaylogo = FALSE, collaborate = FALSE)
 #' 
@@ -116,6 +114,13 @@ rangeslider <- function(p, start = NULL, end = NULL, ...) {
 #'   layout(title = TeX("\\text{Some mathjax: }\\alpha+\\beta x")) %>%
 #'   config(mathjax = "cdn")
 #' 
+#' # change the language used to render date axes and on-graph text 
+#' # (e.g., modebar buttons)
+#' today <- Sys.Date()
+#' x <- seq.Date(today, today + 360, by = "day")
+#' p <- plot_ly(x = x, y = rnorm(length(x))) %>%
+#'   add_lines()
+#' 
 #' # japanese
 #' config(p, locale = "ja")
 #' # german

inst/examples/shiny/MathJax/app.R

@@ -0,0 +1,43 @@
+# Example of rendering both plotly's (SVG) MathJax inside a 
+# shiny app with it's own (HTML) MathJax. This currently requires 
+# bringing in the plotly graph with an iframe
+library(shiny)
+library(plotly)
+library(htmlwidgets)
+library(htmltools)
+
+addResourcePath("tmp", tempdir())
+f <- tempfile(fileext = ".html")
+
+ui <- fluidPage(
+  withMathJax(helpText('Dynamic output 1:  $$\\alpha^2$$')),
+  uiOutput("p")
+)
+
+server <- function(input, output, ...) {
+  
+  output$p <- renderUI({
+    
+    plot_ly() %>%
+      add_lines(x = zoo::index(co2), y = co2) %>%
+      layout(
+        title = TeX("CO_2 \\text{measured in } \\frac{parts}{million}"),
+        xaxis = list(title = "Time"),
+        yaxis = list(title = TeX("\\text{Atmospheric concentraion of CO}_2"))
+      ) %>%
+      config(mathjax = "cdn") %>%
+      saveWidget(f)
+    
+    tags$iframe(
+      src = file.path("tmp", basename(f)),
+      width = "100%", 
+      height = "400",
+      scrolling = "no", 
+      seamless = "seamless", 
+      frameBorder = "0"
+    )
+  })
+  
+}
+
+shinyApp(ui, server)