Since I am not familiar with css I was wondering if there is a simple way to "tell" my rmarkdown page to left align when rendering an HTML-page?
Something like this:
---
title: "My html-page"
output:
html_document:
body_placement: left
---
Maybe something like this:
---
title: "My html-page"
output: html_document
---
<style>
body {
position: absolute;
left: 0px;}
</style>
If you'd actually like some basic styles (i.e. not my theme:null suggestion), grab Skeleton and put normalize.css & skeleton.css in the same directory as your Rmd file. Then you can do:
---
title: "Title"
output:
html_document:
theme: null
css:
- normalize.css
- skeleton.css
keep_md: true
md_document:
variant: markdown_github
---
One
Two
```{r}
print("three")
```
which will result in:
You can add a third - my.css if you want to customize it a bit more.
Related
I found instructions to add a logo to the top of my Table of Contents (TOC).
https://rstudio4edu.github.io/rstudio4edu-book/book-fancy.html
However, the edits I made are not reflected in the bookdown website.
I have made edits to
_output.yml
bookdown::gitbook:
css: style.css
config:
toc:
before: |
<li class="toc-logo"><img src="docs/images/logos/logo-transparent.png"></li>
after: |
<li>Published with bookdown</li>
edit: https://github.com/rstudio/bookdown-demo/edit/master/%s
download: ["pdf", "epub"]
bookdown::pdf_book:
includes:
in_header: preamble.tex
latex_engine: xelatex
citation_package: natbib
keep_tex: yes
bookdown::epub_book: default
bookdown::bs4_book: default
and the style.css
/*--- LOGO ---*/
.toc-logo {
width: 200px !important;
object-fit: contain;
margin: 0 auto;
}
.toc-logo img {
max-width: 100%;
margin-bottom: 10px;
}
.summary > li:first-child {
height: auto !important;
}
my index.Rmd file looks like this:
title: "Book"
author: "FH"
date: "`r Sys.Date()`"
site: bookdown::bookdown_site
output: bookdown::gitbook
documentclass: book
bibliography: [book.bib, packages.bib]
biblio-style: apalike
link-citations: yes
cover-image: images/logos/logo-transparent.png
github-repo: FH/book
description: "Guide book."
I am not sure why the when I Build Book, the logo change is not reflected. Also it seems that maybe the "tile: "Book" in index.Rmd overrides everything else?
What it looks like now:
So apparently the code above for adding a logo works but only if you are building a bookdown::gitbook
I had been building a bookdown::bs4_book for which it is not possible to add a logo this way. To add a logo I ended up creating an template.html file and adding it to the _output.xml
_output.yml
bookdown::bs4_book:
template: template.html
css: style.css
I found an example to follow by looking at: https://github.com/jeroenjanssens/data-science-at-the-command-line/tree/master/book/2e
Alternatively you can edit the original template.html of bs4_book
https://github.com/rstudio/bookdown/blob/main/inst/templates/bs4_book.html
When I add a floating Table of Contents to my R-Markdown document, it always is on the left side of the page (with the content to the right), like so:
---
title: "some title"
author: "me"
date: "3/2/2020"
output:
html_document:
toc: TRUE
toc_float: TRUE
---
However, I'd like to move the floating TOC to the right side of the page. How can I accomplish this? The image below is what I'd like:
Insert the CSS chunk below (after YAML) and try increasing/decreasing the values of px (right and margin-left) for fine-tuning:
---
title: "some title"
author: "me"
date: "3/2/2020"
output:
html_document:
toc: TRUE
toc_float: TRUE
---
```{css toc-content, echo = FALSE}
#TOC {
right: 270px;
margin: 20px 0px 25px 0px;
}
.main-container {
margin-left: 200px;
}
```
The R Hmisc package hidingTOC function does this, allows for changing some of the characteristics of the display, and provides buttons labeled 1 2 3 that the reader can click to show the table of contents to level 1, level 1-2, level 1-3. No special yaml is needed; just have require(Hmisc) in your setup chunk and have the inline text sometime after that chunk: r hidingTOC(buttonLabel="Outline") or just use the default. You can also just say r Hmisc::hidingTOC() as the inline R code. Don't need to put these commands in a chunk; they render HTML which is automatically included in the document.
I'm trying to put an image as logo, on the right hand side next to the title and want it to work embedded in a single HTML file, but I'm not succeeding (for instance, to share only the HTML file and not both the HTML file and the image).
Here is the code I have:
---
title: "Title"
header-includes: \usepackage{graphicx}
author: "Team"
date: "Date"
output:
html_document
---
<script>
$(document).ready(function() {
$head = $('#header');
$head.prepend('<img src="Image_I_Want.png\" style=\"float: right;width: 250px;\"/>')
});
</script>
<br>
## 1) Some nice title
Thank you in advance!
Here is the link to logo.jpg:
https://s-media-cache-ak0.pinimg.com/736x/a7/e8/fa/a7e8fa149fb23e4cbcfe9e8406b6b911.jpg
<script>
$(document).ready(function() {
$head = $('#header');
$head.prepend('<img src=\"logo.jpg\" style=\"float: right;width: 150px;\"/>')
});
</script>
---
title: "Title"
header-includes: \usepackage{graphicx}
author: "Team"
date: "Date"
output:
html_document
---
This is going to be hard to do using Markdown. Markdown trades simplicity for control. I don't know how it prints out the title where you want your logo to be.
Two possible alternatives:
Create the HTML using 'knit', then edit it manually.
Write an RHTML document just using pure HTML.
If you don't know HTML, use a WYSIWYG program (or find a web designer).
The HTML you want is going to be something like:
<h1>My company title</h1><img style='float:right;' src='myimage.png'>
I am looking to increase the overall width of my HTML Rmarkdown output.
When producing PDF documents from Rmarkdowns there is an option to set the margin in the YAML section of the Rmd (ex. geometry: margin=.5in).
I am looking for something similar for HTML docs. The following link is a good example of my issue: https://rstudio.github.io/DT/extensions.html
As you can see on that html webpage, there is a lot of white space to the left and right of the datatables. Is there a way to reduce this margin space and thus increase the width of the datatables?
Thanks
Put this at the top (but below the YAML) of your rmarkdown document:
<style type="text/css">
.main-container {
max-width: 1800px;
margin-left: auto;
margin-right: auto;
}
</style>
Don't put it in a chunk but as plain text. It should set the max-width of the content area to 1800px.
As of rmarkdown 2.10, did get no results with the solutions proposed here or on the linked answer.
I could not get it to work with inline css in the .rmd file.
It did however work immediately when adding a doc.css file in the .rmd folder with just this entry:
div.main-container {
max-width: 1600px !important;
}
and adding it to the yaml header like this:
---
title: asd
author: abc
date: "`r format(Sys.time(), '%d %B, %Y')`"
output:
html_document:
toc: true
toc_float: true
toc_depth: 6
mathjax: null
css: doc.css
---
Something else inserts max-width into the html output, so you need to mark the width !important for it to work
<style type="text/css">
.main-container {
max-width: 100% !important;
margin: auto;
}
</style>
As explained here, you need to use this code:
datatable(..., options = list(autoWidth = TRUE,columnDefs = list(list(width = '200px', targets = c(1, 3)))))
When knitting the following Rmd file
```{r, fig.cap="mycaption"}
plot(0,0,axes=FALSE,xlab=NA,ylab=NA)
```
with the "Knit HTML" button of RStudio then the caption does not appear in the html output file. Indeed the html source code corresponding to the figure is:
<p><img src="data:image/png;base64,..." alt="mycaption"/></p>
To see the caption it should be for instance:
<p><img src="data:image/png;base64,..." alt="mycaption"/><p class="caption">mycaption</p></p>
How to easily get an html output with visible captions ?
I usually just use results='asis' in the chunk options and include raw html in the chunk, wrapping it in cat() but as Yihui mentioned you can create your own hook:
```{r}
knit_hooks$set(htmlcap = function(before, options, envir) {
if(!before) {
paste('<p class="caption">',options$htmlcap,"</p>",sep="")
}
})
```
```{r, htmlcap="Hello Dolly"}
library(ggplot2)
ggplot(diamonds,aes(price,carat)) + geom_point()
```