Embed Diffs in R Markdown Or Shiny

Rmarkdown

Basic Requirements

Any R chunks that produce diffs should include the results='asis' option, e.g.:

```{r, comment="", results="asis"}
# R code here
```

Embedded CSS

This is what a basic code block should look like:

```{r, comment="", results="asis"}
cat(                                 # output to screen
  as.character(                      # convert to diff to character vector
    diffPrint(                       # run diff
      1:5, 2:6,
      format="html",                 # specify html output
      style=list(
        html.output="diff.w.style"   # configure html style
      )
) ) )
```

Here we use this same code as an actual markdown R code block:

cat(
  as.character(
    diffPrint(
      1:5, 2:6,
      format="html",
      style=list(html.output="diff.w.style")
) ) )

<
 
1:5
>
 
2:6
@@ 1 @@
@@ 1 @@
<
 
[1] 1 2 3 4 5
>
 
[1] 2 3 4 5 6

This is an ugly implementation because it produces illegal HTML. The styles are directly embedded in the body of the document, outside of the HEAD tags. Although this is illegal HTML, it seems to work in most browsers. Another problem is that every diff you use in your document will inject the same CSS code over and over.

External CSS

A better option is to provide the CSS directly by modifying the output portion of the YAML header:

---
output:
    rmarkdown::html_vignette:
        toc: true
        css: !expr diffobj::diffobj_css()
---

In reality you will probably want to specify multiple CSS files, including the original rmarkdown one:

---
output:
    rmarkdown::html_vignette:
        toc: true
        css:
          - !expr diffobj::diffobj_css()
          - !expr system.file("rmarkdown", "templates", "html_vignette", "resources", "vignette.css", package = "rmarkdown")
---

Once you set this up then you can use:

cat(
  as.character(
    diffPrint(
      1:5, 2:6,
      format="html",
      style=list(html.output="diff.only")   # notice this changed
) ) )

<
 
1:5
>
 
2:6
@@ 1 @@
@@ 1 @@
<
 
[1] 1 2 3 4 5
>
 
[1] 2 3 4 5 6

This will omit the CSS, but since we include it via the YAML everything should work as expected.

Use Options

Almost all diffobj parameters can be specified via options:

options(
  diffobj.format="html",
  diffobj.style=list(html.output="diff.only")
)

Then you can just run the diff as normal:

cat(as.character(diffPrint(1:5, 2:6)))

<
 
1:5
>
 
2:6
@@ 1 @@
@@ 1 @@
<
 
[1] 1 2 3 4 5
>
 
[1] 2 3 4 5 6

Shiny

Shiny usage is very similar to rmarkdown. In both cases we want to get diffobj to produce HTML output to embed in our document. If we are willing to embed the CSS with each diff, we can use:

library(shiny)
shinyApp(
  ui=fluidPage(htmlOutput('diffobj_element')),
  server=function(input, output) {
    output$diffobj_element <- renderUI({
      HTML(
        as.character(
          diffPrint(
            1:5, 2:6,
            format="html",
            style=list(html.output="diff.w.style")
) ) )}) } )

If we have many diffs, it may be preferable to use options and external style sheet:

options(
  diffobj.format="html",
  diffobj.style=list(html.output="diff.only")
)
shinyApp(
  ui=fluidPage(
    includeCSS(diffobj_css()),
    htmlOutput('diffobj_element')
  ),
  server=function(input, output) {
    output$diffobj_element <- renderUI({
      HTML(as.character(diffPrint(1:5, 2:6,)))
}) } )

Unlike with our rmarkdown example, this CSS is included in the body of the HTML document instead of in the header, so it is technically illegal like in our embedded css example.

- Rmarkdown
- Shiny