R Markdown with the Docco Classic Style

Yihui Xie

2025-03-15

Docco

To use the Docco style for Markdown vignettes in an R package, you need to

  • add *.Rmd files under the vignettes directory
  • add Suggests: knitr and VignetteBuilder: knitr to the DESCRIPTION file
  • specify the vignette engine \VignetteEngine{knitr::docco_classic} in the Rmd files (inside HTML comments)

After building and installing the package, you can view vignettes via

browseVignettes(package = 'Your_Package')

Examples

Below are some code chunks as examples.

cat('_hello_ **markdown**!', '\n')

hello markdown!

Normally you do not need any chunk options.

1+1

## [1] 2

10:1

##  [1] 10  9  8  7  6  5  4  3  2  1

rnorm(5)^2

## [1] 0.93675 1.62965 0.05061 0.10361 2.21366

strsplit('hello, markdown vignettes', '')

## [[1]]
##  [1] "h" "e" "l" "l" "o" "," " " "m" "a" "r" "k" "d" "o" "w" "n" " " "v" "i" "g"
## [20] "n" "e" "t" "t" "e" "s"

Feel free to draw beautiful plots and write math P(X>x)=α/2P(X>x)=\alpha/2.

plot of chunk unnamed-chunk-3

How does it work

Custom CSS and JS files are passed to markdown::mark_html() to style the HTML page:

n=300; set.seed(123)
par(mar=c(4,4,.1,.1))
plot(rnorm(n), rnorm(n), pch=21, cex=5*runif(n), col='white', bg='gray')

That is it.

You probably have noticed that you can adjust the widths of the two columns using your cursor. What is more, press T on your keyboard, and see what happens.

knitr::rocco

## function (input, ...) 
## {
##     knit2html(input, ..., meta = list(css = c("@npm/@xiee/utils/css/docco-classic.min.css", 
##         "@prism-xcode"), js = c("@npm/jquery@3.7.1/dist/jquery.min.js", 
##         "@npm/@xiee/utils/js/docco-classic.min.js,docco-resize.js", 
##         "@npm/@xiee/utils/js/center-img.min.js")))
## }
## <bytecode: 0x13e5fcd98>
## <environment: namespace:knitr>