Vignette (muggle default)

Vignette based on bookdown::html_document2()

Max Held

This vignettes documents how you can use bookdown::html_document2() and tests its compatibility with the subugoetheme against the default.

Test Content

Omitting Headings

Pkgdown currently does not support omitting arbitrary headings from the table of contents (TOC) in a documented way (see #1430). As a hack-job, you can pass a data attribute to the heading in plain HTML, which will be picked up by bootstrap-toc. Remember that this hack depends on the current implementation of pkgdown and may break without notice.

This chunk produces the below heading skipped from the TOC.

<h3 data-toc-skip> A `data-toc-skip`ped Section</h3>

A `data-toc-skip`ped Section

Bookdown Features

Will only be rendered correctly in the muggle default version.

Crossreferences

Sections

This is section \@ref(bookdown) (does not work because sections are unnummbered).

This is section ?? (does not work because sections are unnummbered).

But manual [links](#bookdown) work fine.

But manual links work fine.

Tables

Below in table \@ref(tab:cars), there are some cars.

Below in table 1, there are some cars.

knitr::kable(x = mtcars[1:5, ], caption = "A Table With Some Cars")

Table 1: A Table With Some Cars

	mpg	cyl	disp	hp	drat	wt	qsec	vs	am	gear	carb
Mazda RX4	21.0	6	160	110	3.90	2.620	16.46	0	1	4	4
Mazda RX4 Wag	21.0	6	160	110	3.90	2.875	17.02	0	1	4	4
Datsun 710	22.8	4	108	93	3.85	2.320	18.61	1	1	4	1
Hornet 4 Drive	21.4	6	258	110	3.08	3.215	19.44	1	0	3	1
Hornet Sportabout	18.7	8	360	175	3.15	3.440	17.02	0	0	3	2

Plots

The below figure \@ref(fig:cars-2) is based on the same cars.

The below figure 1 is based on the same cars.

library(ggplot2)
p <- ggplot(mtcars, aes(factor(cyl), mpg))
p + geom_violin(aes(fill = cyl))

Figure 1: A Plot With Some Cars

Selected Bootstrap Features

You can use components from bootstrap 3.4.1 for additional styling in vignettes and other sites. You can write this in plain HTML, which gets passed on through to the final website unchanged.

Labels

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Default Primary Success Info Warning Danger

Jumbotron

<div class="jumbotron">
  <h1 data-toc-skip>Hello, world!</h1>
  <p>
    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
  </p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Alerts

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong>
  You successfully read this important alert message.
</div>

Well done! You successfully read this important alert message.

The alert can also be dismissible.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>>

× Warning! Better check yourself, you’re not looking too good.

A Section with a Bootstrap Class

### A Section with a Bootstrap Class {.alert .alert-danger}

Panels

<div class="panel panel-primary">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    HTML can be properly indented without being interpreted as markdown code.
    Oddly, *some* markdown is still available inside balanced HTML tags. 
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Panel heading

HTML can be properly indented without being interpreted as markdown code. Oddly, some markdown is still available inside balanced HTML tags.

Panel footer

A Leading Paragraph

<p class="lead">
  Fermentum iaculis eu non diam phasellus vestibulum lorem
</p>

Fermentum iaculis eu non diam phasellus vestibulum lorem