I have a DT data table in my RMarkdown document that allows users to download to a csv. How can I shift this table to the left in my HTML file
in order to get the whole document to shift left, you can add inline CSS code in your Rmarkdown, like this
---
title: "DT table"
author: "Daniel"
date: "5/22/2021"
output: html_document
---
<style type="text/css">
.main-container {
max-width: 1800px;
margin-left: auto;
margin-right: auto;
}
</style>
```{r, message=FALSE, warning=FALSE}
library(DT)
datatable(iris)
```
Which renders in the web browser all the way to the left.
If you know more CSS than me, then you can control your document with Divs and CSS selectors to get a even more specific layout
Related
I made a presentation with a scrollable code chunk output using the xaringan package in R before like the photo shown below.
I want to make the same scrollable code chunk output in quarto revealjs presentation. Anyone knows how to do it in quarto presentation?
scrollable code chunk output:
If it helps, here is the css code I used before when making a presentation in xaringan.
Thank you in advance!
/* scrollable code chunk output */
.remark-code {
display: block;
overflow-x: auto;
max-height: 100%;
padding: .5em;
color: #fff;
background: rgb(131, 139, 139);
}
You just need two steps to do the same in Quarto revealjs. At first, define a css class with overflow-x: auto and then pass the class to the chunk option class-output so that output of that will have horizontal scrolling.
---
title: Output Horizontal scrolling
format: revealjs
engine: knitr
---
## Quarto
```{r}
#| class-output: hscroll
library(gapminder)
df <- dplyr::bind_cols(gapminder, gapminder, .name_repair = "minimal")
head(df)
```
```{css, echo=FALSE}
.hscroll {
overflow-x: auto;
white-space: nowrap;
}
```
And if you want to do this for code chunks, instead of passing the .hscroll class as a chunk option to a specific chunk, use the knitr opts_chunk key in the yaml section.
---
title: Output Horizontal scrolling
format: revealjs
engine: knitr
knitr:
opts_chunk:
class-output: hscroll
---
## Quarto
```{r}
library(gapminder)
df <- dplyr::bind_cols(gapminder, gapminder, .name_repair = "minimal")
head(df)
```
```{css, echo=FALSE}
.hscroll {
overflow-x: auto;
white-space: nowrap;
}
```
Is there an option I can provide to code chunks in RMarkdown so that it will have a cell number attached to the HTML output. Much like Jupyter has cell numbers.
I've seen some example with line numbering which is not what I want.
Using cell numbers is helpful when I'm discussing an RMarkdown HTML file over the phone with someone. I can ask him/her to see cell 23. I have a lot of R code, so providing section titles, while possible, is tedious.
Here's a solution using only CSS. It relies on CSS counters: each new R chunk increments the counter (named counter-rchunks).
You can knit the following minimal Rmd file and get this result:
---
title: "Counter for chunks"
author: "Romain Lesur"
output: html_document
---
```{css, echo=FALSE}
body {
counter-reset: counter-rchunks;
}
div.main-container {
padding-left: 5em;
}
pre.r {
counter-increment: counter-rchunks;
position: relative;
overflow: visible;
}
pre.r::before {
content: 'In [' counter(counter-rchunks) ']: ';
display: inline-block;
position: absolute;
left: -5em;
color: rgb(48, 63, 159);
}
```
```{r cars}
summary(cars)
```
```{r head-cars}
head(cars)
```
You may have to adapt this solution to your HTML template.
You also can insert these CSS rules to a .css file and includes it in your html_document.
I am knitting an Rmd file in RStudio to HTML, and I'd like to increase the space between body text and tables/figures. Here's a nice solution for PDF output. What part of the CSS specifies this spacing in HTML output? I'm looking for a template-wide solution, not a manual <br>.
---
title: "Example"
output:
bookdown::html_document2:
fig_captions: yes
number_sections: false
theme: cerulean
highlight: tango
toc: true
code_download: true
code_folding: "show"
toc_float: true
---
<style type="text/css">
body{ /* Normal */
font-size: 18px;
font-family: Helvetica;
}
div#TOC li {
list-style:none;
background-image:none;
background-repeat:none;
background-position:0;
}
</style>
```{r setup, include=FALSE}
library(ggplot2)
library(knitr)
```
## Section
Here is some text before a table.
```{r cars}
kable(head(cars))
```
Here is some text after the table. Here comes a plot. Could use more space after the table and before the plot.
```{r pressure, echo=FALSE, fig.align="center", fig.cap="My caption", message=FALSE, warning=FALSE}
ggplot(cars, aes(speed)) +
geom_histogram()
```
Here is some text after the plot. Need some space between the figure caption and the body text.
Add
.figure {
margin-top: 100px;
margin-bottom: 100px;
}
table {
margin-top: 100px;
margin-bottom: 100px !important;
}
inside the <style> tag. Obviously adjust to the needed amount.
Is it possible to add an image to the title page of ioslides presentation?
I would like to add a big logo after the instead of xyz.
---
title: "Empowering Data-Driven Decisions at <br> xyz"
author: Omayma Said
date: Jan 11, 2017
output: ioslides_presentation
---
Yes. There is a standard option to include a small logo included in the ioslides bookdown documentation as well as some code to make a custom size image using css. This css can go in a separate document or it can at the start of your document after the YAML header which is typically easier when you only have a few lines to add.
Here is an example of putting the css in the document using code snippets from the bookdown documentation.
---
output:
ioslides_presentation:
logo: logo.png
---
<script>
.gdbar img {
width: 300px !important;
height: 150px !important;
margin: 8px 8px;
}
.gdbar {
width: 400px !important;
height: 170px !important;
}
slides > slide:not(.nobackground):before {
width: 150px;
height: 75px;
background-size: 150px 75px;
}
</script>
# Transition slide
## First slide
Yes, it is possible with the help of css.
First step is to add the css in the output of the markdown:
---
title: "Your <br> Title"
author: "Author Name"
date: "<div class = 'slide-date'>`r format(Sys.Date(),format='%B %Y')` <div>"
output:
ioslides_presentation:
css: styles.css
---
The next step is to add the image in your styles.css file
slides>slide.title-slide {
background-image: url('title_image.png');
background-size: 100% 100%;
}
Happy Coding!
I recently opened a standard Rmd file without editing anything. The default file looks like this:
Untitled.rmd
---
title: "myfile"
author: "Me"
date: "May 25, 2015"
output: html_document
fontsize: 12pt
---
This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.
When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:
```{r}
summary(cars)
```
You can also embed plots, for example:
```{r, echo=FALSE}
plot(cars)
```
Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.
I wanted to create an html file corresponding to the above file so in a separate R script I did the following:
knit('Untitled.Rmd', 'doc.md')
markdownToHTML('doc.md', 'testing.html',header = TRUE)
For some reason the font size doesn't work and the header information that I was hoping for doesn't appear in my testing.html. Anyone know why this is happening?
This is what I used to control font size and color in an R-markdown file. It basically overrides the CSS style sheets without having to create a new file. The example changes the sizes of the headers and titles, as well as the inline text and the R-code text, and sets some colors as well.
In my case I needed to pack more information into a document that had a specified number of pages so I made everything smaller.
---
title: "This is a title"
date: 25 May 2015
output:
html_document:
theme: cerulean
---
<style type="text/css">
body{ /* Normal */
font-size: 12px;
}
td { /* Table */
font-size: 8px;
}
h1.title {
font-size: 38px;
color: DarkRed;
}
h1 { /* Header 1 */
font-size: 28px;
color: DarkBlue;
}
h2 { /* Header 2 */
font-size: 22px;
color: DarkBlue;
}
h3 { /* Header 3 */
font-size: 18px;
font-family: "Times New Roman", Times, serif;
color: DarkBlue;
}
code.r{ /* Code block */
font-size: 12px;
}
pre { /* Code block - determines code spacing between lines */
font-size: 14px;
}
</style>
# H1 Header
Some body text
## H2 Header
More body text
### H3 Header
blah blah blah
```{r echo=T}
n <- 100
df <- data.frame(x=rnorm(n),y=rnorm(n))
```
### Another H3
Update:
Added more more styles, comments, and a bit of color to make this answer more useful. And a screen shot: