Include JS to do highlighting of code

R/vis.R

@@ -50,6 +50,10 @@ vis <- function() {
   ## Assemble UI
   ui <- fluidPage(
 
+    # Use CSS and ShinyJS for Code Highlighting
+    includeCSS("inst/srcjs/solarized-dark.css"),
+    includeScript("inst/srcjs/highlight.pack.js"),
+
     # Title
     titlePanel("Visualize your bamlss predictions"),
 
@@ -384,7 +388,11 @@ vis <- function() {
           code <- paste(c_data, c_predictions, c_plot, sep = "\n")
           showModal(modalDialog(
             title = "Obtain your R code",
-            tags$pre(tags$code(code)), easyClose = TRUE
+            tags$pre(tags$code(code)),
+            HTML('<script>$("pre code").each(function(i, block) {
+                   hljs.highlightBlock(block);
+                  });</script>'),
+            easyClose = TRUE
           ))
     })
 

inst/srcjs/solarized-dark.css

@@ -0,0 +1,84 @@
+/*
+
+Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #002b36;
+  color: #839496;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #586e75;
+}
+
+/* Solarized Green */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-addition {
+  color: #859900;
+}
+
+/* Solarized Cyan */
+.hljs-number,
+.hljs-string,
+.hljs-meta .hljs-meta-string,
+.hljs-literal,
+.hljs-doctag,
+.hljs-regexp {
+  color: #2aa198;
+}
+
+/* Solarized Blue */
+.hljs-title,
+.hljs-section,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #268bd2;
+}
+
+/* Solarized Yellow */
+.hljs-attribute,
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-class .hljs-title,
+.hljs-type {
+  color: #b58900;
+}
+
+/* Solarized Orange */
+.hljs-symbol,
+.hljs-bullet,
+.hljs-subst,
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-link {
+  color: #cb4b16;
+}
+
+/* Solarized Red */
+.hljs-built_in,
+.hljs-deletion {
+  color: #dc322f;
+}
+
+.hljs-formula {
+  background: #073642;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}