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()
```
Related
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'>
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.
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)))))
If I have some Markdown like
## My Title
A paragraph of content here.
code_line(1);
// a code comment
class MoreCode { }
and more text to follow...
How can I set a class on the <code> block that's generated in the middle there? I want to have it output
<code class=’prettyprint’>
code_line(1);
// a code comment
class More Code { }
</code>
But I can't seem to set it. I do not have control over the Markdown code being run, only over the content.
You can embed HTML in Markdown. Type literally what you want, with no indent.
<code class="prettyprint">
code_line(1);
// a code comment
class More Code { }
</code>
For the specific case of syntax highlighting following the back ticks at the start of a fenced code block with the language works just about everywhere these days.
```js
code_line(1);
// a code comment
class MoreCode { }
```
Though not answering the question exactly. You can use a different render too like Maruku or Kramdown:
## My Title
A paragraph of content here.
~~~
code_line(1);
// a code comment
class MoreCode { }
~~~
{: .prettyprint}
and more text to follow...
Output (tested with haml & kramdown):
<pre class="prettyprint"><code>
code_line(1);
// a code comment
class MoreCode { }
</code></pre>
Kramdown syntax: http://kramdown.rubyforge.org/quickref.html#block-attributes
Markdown has an extension (attr_list.py) which allows you to use Maruku's {: .classname} syntax.
Markdown Extra supports class and id attributes using curly braces. See: https://michelf.ca/projects/php-markdown/extra/#spe-attr