Visualise diff in html report

Question

I would like to produce an html report which visualises the difference between a number of very similar texts. I found the diffobj package, which does what I want if used in an interactive session:

However, I can't figure out how to render this in a report. Here is what I tried so far:

---
title: "Repex"
output: html_document
---

```{r cars}
duplicates <- data.frame(text_original = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet risus et eros sagittis aliquam. Donec fringilla pharetra vestibulum. Fusce vestibulum imperdiet nibh ac rutrum. Aenean sollicitudin, tellus sed tempor varius, quam dolor ornare sapien, eu faucibus quam arcu vestibulum velit. Praesent maximus odio magna, in vulputate arcu cursus vitae. Praesent condimentum purus sit amet nisl vestibulum semper. Nunc quis eros ultricies, elementum eros sed, ullamcorper nunc. Nunc dictum commodo quam, et venenatis velit porta sit amet. Nunc et lorem et odio scelerisque vulputate sed at purus. Sed velit ipsum, consequat vel tristique tincidunt, semper in odio. Nullam pharetra laoreet velit quis sollicitudin. Fusce tellus felis, scelerisque id ipsum et, varius iaculis erat. Sed porttitor at quam sed rhoncus. Donec rutrum justo nec malesuada aliquam. Maecenas feugiat odio ac ante consequat, aliquet tempus magna tempus. Morbi convallis orci felis, ac ultricies ex dignissim in. Donec ornare vehicula ante eu interdum.",
                         text_duplicate = "Lorem dolor sit amet, consectetur elit. Maecenas laoreet risus et eros sagittis aliquam. Donec fringilla pharetra vestibulum. Fusce vestibulum imperdiet nibh ac rutrum. Aenean sollicitudin, tellus sed tempor varius, quam dolor ornare sapien, eu faucibus quam arcu vestibulum velit. Praesent maximus odio magna, in vulputate arcu cursus vitae. Praesent condimentum purus sit amet nisl vestibulum semper. Nunc quis eros ultricies, elementum sed, ullamcorper nunc. Nunc commodo quam, et venenatis velit porta sit amet. Nunc et lorem et odio scelerisque vulputate sed at purus. Sed velit ipsum, consequat vel tristique tincidunt, semper in odio. Nullam pharetra laoreet velit quis sollicitudin. Fusce tellus felis, scelerisque id ipsum et, varius iaculis erat. Sed porttitor at quam sed rhoncus. Donec rutrum justo nec malesuada aliquam. Maecenas feugiat odio ac ante consequat, aliquet tempus magna tempus. Morbi convallis orci felis, ac ultricies ex dignissim in. Donec ornare vehicula ante eu interdum.",
                         stringsAsFactors = FALSE)

library(diffobj)
for (i in 1) {
  orig <- unname(unlist(quanteda::tokens(duplicates$text_original[i], what = "sentence")))
  dup <- unname(unlist(quanteda::tokens(duplicates$text_duplicate[i], what = "sentence")))
  diff <- diffPrint(current = orig,
                    target = dup,
                    format = "html",
                    interactive = FALSE)
  print(diff)
}
```

The result when knitting this file is that the html code for each diff is shown but not rendered. Note, that I used the for loop with just one iteration for demonstration only. The real task is to render around 50 diffs.

Any ideas how to solve this either tweaking the settings of diffPrint() or rmarkdown?

Answer 1

The problem is that diffPrint doesn't output css style.

1. In the setup chunk, add results "asis"

   ```{r cars, results="asis"}
   duplicates <- data.frame(text_original = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet risus et eros sagittis aliquam. Donec fringilla pharetra vestibulum. Fusce vestibulum imperdiet nibh ac rutrum. Aenean sollicitudin, tellus sed tempor varius, quam dolor ornare sapien, eu faucibus quam arcu vestibulum velit. Praesent maximus odio magna, in vulputate arcu cursus vitae. Praesent condimentum purus sit amet nisl vestibulum semper. Nunc quis eros ultricies, elementum eros sed, ullamcorper nunc. Nunc dictum commodo quam, et venenatis velit porta sit amet. Nunc et lorem et odio scelerisque vulputate sed at purus. Sed velit ipsum, consequat vel tristique tincidunt, semper in odio. Nullam pharetra laoreet velit quis sollicitudin. Fusce tellus felis, scelerisque id ipsum et, varius iaculis erat. Sed porttitor at quam sed rhoncus. Donec rutrum justo nec malesuada aliquam. Maecenas feugiat odio ac ante consequat, aliquet tempus magna tempus. Morbi convallis orci felis, ac ultricies ex dignissim in. Donec ornare vehicula ante eu interdum.",
                            text_duplicate = "Lorem dolor sit amet, consectetur elit. Maecenas laoreet risus et eros sagittis aliquam. Donec fringilla pharetra vestibulum. Fusce vestibulum imperdiet nibh ac rutrum. Aenean sollicitudin, tellus sed tempor varius, quam dolor ornare sapien, eu faucibus quam arcu vestibulum velit. Praesent maximus odio magna, in vulputate arcu cursus vitae. Praesent condimentum purus sit amet nisl vestibulum semper. Nunc quis eros ultricies, elementum sed, ullamcorper nunc. Nunc commodo quam, et venenatis velit porta sit amet. Nunc et lorem et odio scelerisque vulputate sed at purus. Sed velit ipsum, consequat vel tristique tincidunt, semper in odio. Nullam pharetra laoreet velit quis sollicitudin. Fusce tellus felis, scelerisque id ipsum et, varius iaculis erat. Sed porttitor at quam sed rhoncus. Donec rutrum justo nec malesuada aliquam. Maecenas feugiat odio ac ante consequat, aliquet tempus magna tempus. Morbi convallis orci felis, ac ultricies ex dignissim in. Donec ornare vehicula ante eu interdum.",
                            stringsAsFactors = FALSE)
   
   library(diffobj)
   for (i in 1) {
     orig <- unname(unlist(quanteda::tokens(duplicates$text_original[i], what = "sentence")))
     dup <- unname(unlist(quanteda::tokens(duplicates$text_duplicate[i], what = "sentence")))
     diff <- diffPrint(current = orig,
                       target = dup,
                       format = "html",
                       interactive = FALSE)
     print(diff)
   }
   ```
   

2. Somewhere in the rmd file add

   <style type="text/css">
   DIV.diffobj_container PRE {
     white-space: pre-wrap;
     margin: 0;
   }
   DIV.diffobj_container DIV.row {
     width: 100%;
     font-family: monospace;
     display: table;
     table-layout: fixed;
   }
   DIV.diffobj_container DIV.line {
     width: auto;
     display: table-cell;
     overflow: hidden;
   }
   DIV.diffobj_container DIV.line>DIV {
     width: 100%;
     display: table;
     table-layout: auto;
   }
   DIV.diffobj_container DIV.line.banner>DIV {
     display: table;
     table-layout: auto; /* set to fixed in JS */
   }
   DIV.diffobj_container DIV.text {
     display: table-cell;
     width: 100%;
   }
   DIV.diffobj_container DIV.gutter {
     display: table-cell;
     padding: 0 0.2em;
   }
   DIV.diffobj_container DIV.gutter DIV {
     display: table-cell;
   }
   #diffobj_content_meta DIV.diffobj_container DIV.row {
     width: auto;
   }
   #diffobj_banner_meta DIV.diffobj_container DIV.line.banner>DIV {
     table-layout: auto;
   }
   #diffobj_outer {
     overflow: hidden;
   }
   /* Summary -------------------------------------------------------------------*/ 
   
   DIV.diffobj_container DIV.summary DIV.map {
     word-wrap: break-word;
     padding-left: 1em;
   }
   DIV.diffobj_container DIV.summary DIV.detail {
     padding-left: 1em;
   }
   
   /* Common elements -----------------------------------------------------------*/
   
   DIV.diffobj_container DIV.line.banner {
     font-size: 1.2em;
     font-weight: bold;
     overflow: hidden;
   }
   /* truncate banners */
   DIV.diffobj_container DIV.line.banner DIV.text DIV{
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     width: 100%;             /* need to compute and set in JS */
   }
   DIV.diffobj_container DIV.gutter,
   DIV.diffobj_container DIV.guide,
   DIV.diffobj_container DIV.fill,
   DIV.diffobj_container DIV.context_sep,
   DIV.diffobj_container SPAN.trim {
     color: #999;
   }
   DIV.diffobj_container DIV.header {
     font-size: 1.1em;
   }
   DIV.diffobj_container DIV.text>DIV.match,
   DIV.diffobj_container DIV.text>DIV.guide {
     background-color: #ffffff;
   }
   DIV.diffobj_container DIV.text>DIV.fill {
     background-color: transparent;
   }
   DIV.diffobj_container DIV.text>DIV {
     padding-right: 3px;
   }
   DIV.diffobj_container DIV.text>DIV {
     border-left: 1px solid #888888;
   }
   DIV.diffobj_container DIV.line {
     background-color: #eeeeee;
   }
   DIV.diffobj_container DIV.text>DIV,
   DIV.diffobj_container DIV.header {
     padding-left: 0.5em;
   }
   DIV.diffobj_container DIV.line>DIV.match,
   DIV.diffobj_container DIV.line>DIV.fill,
   DIV.diffobj_container DIV.line>DIV.guide {
     border-left: 1px solid #888888;
   }
   /* github inspired color scheme - default ------------------------------------*/
   
   DIV.diffobj_container.light.rgb SPAN.word.insert,
   DIV.diffobj_container.light.rgb DIV.line>DIV.insert {
     background-color: #a6f3a6;
   }
   DIV.diffobj_container.light.rgb SPAN.word.delete,
   DIV.diffobj_container.light.rgb DIV.line>DIV.delete {
     background-color: #f8c2c2;
   }
   DIV.diffobj_container.light.rgb DIV.text>DIV.insert {
     background-color: #efffef;
   }
   DIV.diffobj_container.light.rgb DIV.text>DIV.insert,
   DIV.diffobj_container.light.rgb DIV.line>DIV.insert {
     border-left: 1px solid #33bb33;
   }
   DIV.diffobj_container.light.rgb DIV.text>DIV.delete {
     background-color: #ffefef;
   }
   DIV.diffobj_container.light.rgb DIV.text>DIV.delete,
   DIV.diffobj_container.light.rgb DIV.line>DIV.delete {
     border-left: 1px solid #cc6666;
   }
   DIV.diffobj_container.light.rgb DIV.header {
     background-color: #e0e6fa;
     border-left: 1px solid #9894b6;
   }
   /* Yellow Blue variation -----------------------------------------------------*/
   
   DIV.diffobj_container.light.yb SPAN.word.insert,
   DIV.diffobj_container.light.yb DIV.line>DIV.insert {
     background-color: #c0cfff;
   }
   DIV.diffobj_container.light.yb SPAN.word.delete,
   DIV.diffobj_container.light.yb DIV.line>DIV.delete {
     background-color: #e7e780;
   }
   DIV.diffobj_container.light.yb DIV.text>DIV.insert {
     background-color: #efefff;
   }
   DIV.diffobj_container.light.yb DIV.text>DIV.insert,
   DIV.diffobj_container.light.yb DIV.line>DIV.insert {
     border-left: 1px solid #3333bb;
   }
   DIV.diffobj_container.light.yb DIV.text>DIV.delete {
     background-color: #fefee5;
   }
   DIV.diffobj_container.light.yb DIV.text>DIV.delete,
   DIV.diffobj_container.light.yb DIV.line>DIV.delete {
     border-left: 1px solid #aaaa55;
   }
   DIV.diffobj_container.light.yb DIV.header {
     background-color: #afafaf;
     border-left: 1px solid #e3e3e3;
     color: #e9e9e9;
   }
   DIV.diffobj_container.light.yb DIV.line {
     background-color: #eeeeee;
   }
   </style>
   

A working example

source rmarkdown

For the record, related discussion on github