Render Markdown in a new tab in Shiny


I wrote a new shiny app for eSpark. It turns some sql data pulls into plots that can be inserted into a keynote presentation. I think it's pretty cool and it saves me a ton of time. But it requires some instructions. I needed a way to put a page of instructions in the shiny app.

I could have just written out the instuctions in the ui.R file itself. But I like to modularize the code so I wanted to write the instructions in a separate markdown file.

RStudio includes a great markdown viewer. I created a markdown file in a folder called instructions and started typing away.

# Instructions for my app

These are the instructions  
They go in a file called instructions.md

In RStudio I open up that file and click the Preview HTML button

Imgur

This will generate an html file from your markdown file and save it in the same directory as the markdown file.

Now you have the instructions saved as an html page in a subdirectory of your app. For me it was at /instructions/instructions.html. I tried inserting a link on my homepage to that file, but the shiny server won't process files that way.

Instead I ended up reading in that file as a value into the server.R file and then rendering it as html.

In the server.R file

output$instructions <- renderText({  
  readLines("instructions/instructions.html")  
})

This stores the raw html as a text string in the output$instructions variable.
To render this in the app I created a tab panel and rendered the html within that tab.

In the ui.R file

shinyUI(navbarPage("My App",
  tabPanel("Instructions", fluidPage(
    htmlOutput('instructions')
  )),

  tabPanel("App", fluidPage(
    # The ui elements for the app
  ))

This will then render the html instructions file as a separate tab in the app.

Imgur

Voila! A markdown page directly in the shiny app itself. I imagine that a decent number of my future shiny apps will take advantage of this. I can use these for instructions, examples, product road, troubleshooting guide, etcetera. Simple and useful.

Problems with this technique

One small consequence was that shiny had a hard time reading in code blocks. It didn't preserve the new lines within the block. So I had to write the code blocks with html <code> tags instead of the typical triple backtick.

[top]