This post demonstrate my fork of Yihui’s knitr-jekyll which tweaks the default layout to resemble tufte-jekyll. As Yihui mentions in his knitr-jekyll blog post (which I highly recommend reading), GitHub Pages does not support arbitrary Jekyll plugins, but I’ve managed to remove tufte-jekyll’s dependency on custom plugins via custom knitr output hooks. Not only does this allow GitHub Pages to build and host this template automagically, but it also fixes tufte-jekyll’s problem with figure paths.
The rest of this post shows you how to use these custom hooks and some other useful things specific to this template (at some point, you might also want the source for this post)
By default, the
fig.width chunk option is equal to 7 inches. Assuming the zoom of your browser window is at 100%, that translates to about 3/4 of the textwidth.
Figure 1: A nice plot that is not quite wide enough. Note that this figure caption was created using the
fig.cap chunk option
If we increase
fig.width to a ridiculous number, say 20 inches, it will still be constrained to the text width by default.
Figure 2: The
fig.height for this chunk is same as Figure 1, but the
fig.width is now 20. Since the width is constrained by the text width, the figure is shrunken quite a bit.
By constraining the figure width, it will ensure that figure captions (set via
fig.cap) appear correctly in the side margin. If you don’t want to restrict the final figure width, set the
fig.fullwidth chunk option equal to
TRUE. In this case, the figure caption is placed in the side margin below the figure.
Figure 3: Full width plot
To place figures in the margin, set the
fig.margin chunk option equal to
Figure 4: useR logo
Sizing terminal output
R terminal output width is 80, which is a bit too big for the styling of this blog, but a width of 55 works pretty well:
If you want inline math rendering, put
$$ math $$ inline. For example, . If you want it on it’s own line, do something like:
which results in
Much margin. So excite.
Put stuff in the side margin using the
<span> HTML tag with a class of ‘marginnote’:
Another (less cute) example of margin notes is to add a table caption. In fact, the figure captions above are just margin notes.
Table 1: Output from a simple linear regression in tabular form.
Similar to a ‘marginnote’ is a ‘sidenote’ 1 which works like this
1 Sidenotes are kind of like footnotes that appear in the side margin.
Unfortunately, this is a lot of HTML markup, but of course1, you can also do footnotes, so that might be a better option.
If you find any issues or want to help improve the implementation, please let me know!
I hate it when people say “of course” as though this is obvious everyone. ↩