RMarkdown renders incorrectly as a black background, white boxes, and green text

I am trying to use RMarkdown to write some code as follows:

```{r, message = F, warning = F, results='hide'}
library(tidyverse)
#devtools::install_github("")
library(ggthemes)
```.

(where the period is not in my code.)

I want it to just display the code but not the results. It does this, but the formatting is very different from what I am expecting. It does this both in my local host and on the internet. What should I do?

Note that I am doing this in a blogdown .Rmarkdown file. This actually seems to be the problem. I tried the same code snippet outside of the blogdown project, and it worked just fine.

Another thing I learned is that if I do it with an .Rmd file (to .html) it works, so it is something to do with the .Rmarkdown (to .markdown) that doesn't work.

Screen Shot 2021-09-09 at 1.14.27 PM

See this section of the docs for an explanation of differences between Rmd and Rmarkdown. What appears to be happening from the screen image is the choice of a dark Hugo theme Try running blogdown::check_site() to see what options are set.

Thank you very much, technocrat. That makes sense. I tried running blogdown::check_site(), but did not find the options. Would I find them in the css file?

You should have seen something like this (for a fresh site)

> blogdown::check_site()
― Running a series of automated checks for your blogdown website project...
----------------------------------------------------------------------------------
○ A successful check looks like this.
● [TODO] A check that needs your attention looks like this.
| Let's check out your blogdown site!
----------------------------------------------------------------------------------
― Checking config.yaml
| Checking "baseURL" setting for Hugo...
● [TODO] Update "baseURL" to your actual URL when ready to publish.
| Checking "ignoreFiles" setting for Hugo...
○ "ignoreFiles" looks good - nothing to do here!
| Checking setting for Hugo's Markdown renderer...
○ All set! Found the "unsafe" setting for goldmark.
― Check complete: config.yaml

― Checking .gitignore
● [TODO] .gitignore was not found. You may want to add this.
― Checking Hugo
| Checking Hugo version...
○ Found Hugo. You are using Hugo 0.80.0.
| Checking .Rprofile for Hugo version used by blogdown...
○ blogdown is using Hugo 0.80.0 to build site locally.
― Check complete: Hugo

― Checking netlify.toml...
○ Found HUGO_VERSION = 0.80.0 in [build] context of netlify.toml.
| Checking that remote & local Hugo versions match...
○ It's a match! Local and remote Hugo versions are identical (0.80.0).
| Checking that Netlify & local Hugo publish directories match...
○ Good to go - blogdown and Netlify are using the same publish directory: public
― Check complete: netlify.toml

― Checking content files
| Checking for validity of YAML metadata in posts...
○ All YAML metadata appears to be syntactically valid.
| Checking for previewed content that will not be published...
○ Found 0 files with future publish dates.
○ Found 0 files marked as drafts.
| Checking your R Markdown content...
● [TODO] Found 1 R Markdown file to render:

  content/post/2020-12-01-r-rmarkdown/index.Rmd

  To render a file, knit or use blogdown::build_site(build_rmd = 'newfile')
○ All R Markdown output files are up to date with their source files.
| Checking for .html/.md files to clean up...
○ Found 0 duplicate .html output files.
○ Found 0 incompatible .html files to clean up.
| Checking for the unnecessary 'content/' directory in theme...
○ Great! Your theme does not contain the content/ directory.
― Check complete: Content

Here is what mine says. But I do not see any output about options relating to a dark Hugo theme (or I am missing it if it is there).

> blogdown::check_site()
― Running a series of automated checks for your blogdown website project...
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
○ A successful check looks like this.
● [TODO] A check that needs your attention looks like this.
| Let's check out your blogdown site!
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
― Checking config.yaml
| Checking "baseURL" setting for Hugo...
● [TODO] Update "baseURL" to your actual URL when ready to publish.
| Checking "ignoreFiles" setting for Hugo...
○ "ignoreFiles" looks good - nothing to do here!
| Checking setting for Hugo's Markdown renderer...
○ All set! Found the "unsafe" setting for goldmark.
― Check complete: config.yaml

― Checking .gitignore
| Checking for items to remove...
○ Nothing to see here - found no items to remove.
| Checking for items to change...
○ Nothing to see here - found no items to change.
| Checking for items you can safely ignore...
○ Found! You have safely ignored: .DS_Store, Thumbs.db
| Checking for items to ignore if you build the site on Netlify...
○ Found! You have safely ignored: /public/, /resources/
| Checking for files required by blogdown but not committed...
○ Great! Did not find such files.
― Check complete: .gitignore

― Checking Hugo
| Checking Hugo version...
○ Found Hugo. You are using Hugo 0.88.1.
| Checking .Rprofile for Hugo version used by blogdown...
○ blogdown is using Hugo 0.88.1 to build site locally.
― Check complete: Hugo

― Checking netlify.toml...
○ Found HUGO_VERSION = 0.88.1 in [build] context of netlify.toml.
| Checking that remote & local Hugo versions match...
○ It's a match! Local and remote Hugo versions are identical (0.88.1).
| Checking that Netlify & local Hugo publish directories match...
○ Good to go - blogdown and Netlify are using the same publish directory: public
― Check complete: netlify.toml

― Checking content files
| Checking for validity of YAML metadata in posts...
○ All YAML metadata appears to be syntactically valid.
| Checking for previewed content that will not be published...
○ Found 0 files with future publish dates.
● [TODO] Found 1 file marked as drafts. To un-draft, run the command:

  blogdown::edit_draft(c(
  "content/old doesnt work/misc.Rmd"
  ))

  and change a file's YAML from 'draft: true' to 'draft: false' or delete it
| Checking your R Markdown content...
○ All R Markdown files have been knitted.
○ All R Markdown output files are up to date with their source files.
| Checking for .html/.md files to clean up...
○ Found 0 duplicate .html output files.
○ Found 0 incompatible .html files to clean up.
| Checking for the unnecessary 'content/' directory in theme...
○ Great! Your theme does not contain the content/ directory.
― Check complete: Content

Look under your blogdown directory for a folder called themes, which should have theme_toml with layout like

# theme.toml template for a Hugo theme
# See https://github.com/spf13/hugoThemes#themetoml for an example

name = "Lithium"
license = "MIT"
licenselink = "https://github.com/jrutheiser/hugo-lithium-theme/blob/master/LICENSE.md"
description = "Lithium minimal theme"
homepage = "https://github.com/jrutheiser/hugo-lithium-theme"
tags = ["blog"]
features = ["blog", "google analytics"]
min_version = 0.15

[author]
  name = "Jonathan Rutheiser"
  homepage = "http://jrutheiser.com/"

It looks like I am using https://github.com/nanxstats/hugo-renga.

Try a new site taking the RStudio defaults, which will give you the lithium theme, and see if you like it any better. Unless you want to spend a lot of time digging into theme construction, it's better to pick one and stay with it rather than trying to tweak.

Some insight on what could be the cause:

  • When doing Rmd -> HTML, usual rmarkdown conversion happens using Pandoc, and the syntax highlighting will be done either by Pandoc or by highlightjs depending on the option sets
  • When doing Rmarkdown to .markdown, the HTML will be rendered by HUGO (using Goldmark so not using pandoc) directly and the syntax highlighter will be the one from this Hugo renderer. This means that the Hugo config can change the way it looks.

So depending on your site, on your theme, on your configuration you could get different results. You need to configure correctly depending on how you want it to render and get highlighted, and what the theme you are using is supporting.

You can seatch the web for blogdown and syntax highlighting, + Hugo and syntax highlighting.
The bookdown book have a several mentions about highlighting: Search for the term in

Hope it helps

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.