git » homepage.git » master » tree

<html>
  <head>
    <title>Inline Markdown in Shiny UIs - wondr</title>
    <link rel="stylesheet" href="../style.css"/>
    <link rel="stylesheet" href="../code_highlight.css"/>
    <link rel="alternate" type="application/atom+xml" href="../atom.xml"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body class="page">
    <div class="site">
      <header id="header" class="header-container">
        <div class="site-header">
          <nav id="navmenu" aria-label="Main Menu">
            <ul class="main-menu">
              <li>
                <a href=".." aria-current="page">Index</a>
              </li>
            </ul>
          </nav>
          <div class="site-info">
            <h1 class="site-title title">Wondr</h1>
            <p class="site-description">Wondering about R</p>
          </div>
        </div>
      </header>
      <main class="main">
        <article lang="en" class="entry">
          <header class="entry-header">
            <div class="entry-info">
              <h1 class="entry-title title">Inline Markdown in Shiny UIs</h1>
            </div>
            <div class="meta">
              <span class="posted-on">
                <svg class="icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true">
                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                  <line x1="16" y1="2" x2="16" y2="6"></line>
                  <line x1="8" y1="2" x2="8" y2="6"></line>
                  <line x1="3" y1="10" x2="21" y2="10"></line>
                </svg>
                <span class="screen-reader">Posted on </span>
                <time class="date" datetime="2019-12-20T00:00:00Z">2019-12-20</time>
              </span>
              <span class="reading-time">
                <svg class="icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true">
                  <circle cx="12" cy="12" r="10"></circle>
                  <polyline points="12 6 12 12 15 15"></polyline>
                </svg>
                2 minute read
              </span>
            </div>
          </header>
          <div class="entry-content">
<p><a href="https://rmarkdown.rstudio.com/">R Markdown</a> is a great way to embed R code in a Markdown document, but it’s also easy to do the inverse: embed <a href="https://en.wikipedia.org/wiki/Markdown">Markdown</a> in R code, such as a Shiny app’s UI, with the <a href="https://github.com/rstudio/markdown">markdown</a> package.</p>
<p>This makes writing snippets of prose in Shiny app UIs very convenient. Here’s an example:</p>
<pre><code>library(shiny)
library(markdown)

markdown &lt;- function(s) {
  s &lt;- gsub(&quot;\\n[ \\t]*&quot;, &quot;\n&quot;, s)
  HTML(markdownToHTML(fragment.only = TRUE, text = s))
}

ui &lt;- fluidPage(
  markdown(&quot;
  # Inline Markdown
  
  This is a demonstration of inline markdown using the `markdown` 
  package.
  
  We can have links to [Google](https://google.com), and even lists 
  like the one below!
  
  1. Foo
  1. Bar
  1. Baz&quot;)
)

server &lt;- function(input, output, session) {
}

shinyApp(ui, server)</code></pre>
<h2 id="how-it-works">How it works</h2>
<ol type="1">
<li><code>base::gsub()</code> is used to remove leading whitespace from each line while preserving empty lines. If you’re on Windows and your R code has <code>\r\n</code> line endings, you’ll need to tweak this part. This transformation allows you to arbitrarily indent your Markdown string, as RStudio (and probably other editors) want to do automatically.</li>
<li><code>markdown::markdownToHTML()</code> converts the Markdown to a character vector of HTML. <code>fragment.only = TRUE</code> produces an HTML fragment instead of an HTML document with CSS and JavaScript.</li>
<li><code>shiny::HTML()</code> inserts the HTML into the UI verbatim, without escaping it.</li>
</ol>
          </div>
        </article>
        <article data-sblg-article="1" class="entry-content"></article>
      </main>
      <footer id="footer" class="footer-container">



        <div class="footer">

<div class="social">
  <nav aria-label="Social Menu">
    <ul class="social-menu"><li>
      <a href="mailto:alan@tailrecursion.com" >
          <span class="screen-reader">Send E-mail</span>
          <svg class="icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true">
  
  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
  <polyline points="22,6 12,13 2,6"></polyline>
  
</svg>

        </a>
      </li><li>
        <a href="https://github.com/alandipert/wondr-blog" >
          <span class="screen-reader">Open Github account</span>
          <svg class="icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true">
  
  <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
  
</svg>

        </a>
      </li>

<li>
        <a href='https://twitter.com/alandipert' target='_blank' rel='noopener'>
          <span class='screen-reader'>Open Twitter account in new tab</span><svg class='icon' viewbox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-hidden='true'>
  
  <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/>
  
</svg>
</a>
      </li>
    </ul>
  </nav>
</div>
        </div>
      </footer>
    </div>
  </body>
</html>