I use blogdown with hugo (theme tranquilpeak). When I add a tabbed codeblock in my .Rmd file, the codeblock doesn't show up as intended, it is shown as normal text. Any idea why?
2017-09-02-tabbed-codeblock.Rmd
---
title: tabbed-codeblock
author:
date: "2017-09-02"
output:
html_document:
keep_md: yes
---
### Testing tabbed codeblock
{{< tabbed-codeblock >}}
<!-- tab js -->
var test = 'test';
<!-- endtab -->
<!-- tab css -->
.btn {
color: red;
}
<!-- endtab -->
{{< /tabbed-codeblock >}}
See Section 2.3.2 of the blogdown book:
Shortcodes are supposed to work in plain Markdown documents only. To use shortcodes in R Markdown instead of plain Markdown, you have to call the function blogdown::shortcode().
And please read the R help page of the function blogdown::shortcode() if it is not clear to you.
Related
I'm using the Academic theme (Hugo) on my webpage, and I would like to know when creating slides, how can I customize Reveal? For example, I am using:
---
...
slide:
theme: night
...
---
how can I change the font size?
Thanks for the help in advance!
I have an R markdown document that uses flexdashboard and shiny. The document/app has several pages and I would like to be able to link the navbar title defined in the YAML header to the first page so that a user gets the feeling of being redirected to the "Home" page when clicking the title.
I've attached a very simple example of an .Rmd file that uses flexdashboard and has 2 pages. In this example the user should be directed to Page 1 when clicking on App title.
---
title: "App title"
output: flexdashboard::flex_dashboard
runtime: shiny
---
Page 1
====================================================================================
This is some random text on page 1...
Page 2
========================================================================================
And some even more random text on page 2....
I have seen examples where pages are linked within an external .yml file (bookdown) or where the logo/title is linked to an external site, but I couldn't find examples of how to link the navbar title to a section/page within the R markdown document itself.
To add complexity: in my app, the document is used for several applications and the title is therefore read in via an environment variable:
---
title: '`r Sys.getenv("TIER")`'
Any help is much appreciated!
To make the title clickable as link you can use additional JavaScript.
<script>
document.querySelector(".navbar-header").innerHTML =
"<a href=\"path_to_destination\" class=\"navbar-brand navbar-inverse\">
My Dashboard
</a>";
</script>
The querySelector looks for the title element and replaces it with a custom one. Here I replace it with a link to the path_to_destination. You can see the class names which are added to the link, to format the link according to the predefined classes. Otherwise the link is not formatted like the title.
As you said the title is based on some variable we can insert R code like in every other place in the document:
<script>
document.querySelector(".navbar-header").innerHTML =
"`r 2+2`";
</script>
I'm looking to add a Bootstrap navigation bar (as shown here: https://getbootstrap.com/docs/4.0/components/navbar/) to an R Markdown template I am creating.
From reading around, I've seen how you can add HTML elements from another file and call them within R Markdown.
But, is there anyway to include the HTML code inside of the markdown file, that way that navigation bar still gets added, but I only have a single page needed to show the results?
This requires a .yml(yaml) file to compliment our Rmarkdown file.
our almost empty Rmarkdown file titled index.Rmd...
---
title: "navbar for stackoverflow"
---
Now we just add code to our .yml file for our navbar. Rmarkdown looks inside it's root directory for a _site.yml file for rendering instructions per the blogdown book, which is the same author as your reference.
inside our _site.yml file inside the same directory as our index.Rmd file...
name: "Rmarkdown with navbar"
output_dir: "."
navbar:
title: "Rmarkdown with navbar"
type: inverse
right:
- text: "Contact me"
icon: fa-envelope-o
href: https://www.stackoverflow.com
- text: "GitHub"
icon: fa-github
href: https://www.stackoverflow.com
- text: "Stackoverflow"
icon: fa-stack-overflow
href: https://www.stackoverflow.com
- text: "Youtube"
icon: fa-youtube
href: https://www.stackoverflow.com
- text: "Instagram"
icon: fa-instagram
href: https://www.stackoverflow.com
- text: "Twitter"
icon: fa-twitter
href: https://www.stackoverflow.com
output:
html_document:
theme: spacelab
highlight: textmate
Which renders the below output.
The theme argument in the yaml file IS one of the select few bootstrap options Rmarkdown comes installed with.
Figured this out! The best solution I have found for this is to use RHTML to create the markdown file:
https://bookdown.org/yihui/rmarkdown-cookbook/html-hardcore.html
From there, you can use HTML to create the backbone of your document, and wrap your R code like so:
<!--begin.rcode
df <- data.frarme(x = 1:5, y = 1:5)
df
end.rcode-->
This definitely will require more work on my end, but it gives me exactly what I've been looking for.
In R markdown using Flexdashboard template, colours of Bootswatch themes don's seem matching what's shown on the Bootswatch website
For example, using flatly theme
---
title: "Test Dashboard"
output:
flexdashboard::flex_dashboard:
theme: flatly
runtime: shiny
---
What I got is like this:
flatly theme in rmarkdown flexdashboard theme
What the flatly theme looks like from Bootswatch is like this:
flatly theme from Bootswatch
Is there some settings that I need to specify to get the correct colour? Or for Rmarkdown Bootswatch themes are set to look differently?
Adding the following JS chunk solves the problem:
```{js}
$('.navbar-inverse').removeClass('navbar-inverse').addClass('navbar-
default');
```
I have tried a couple of approaches but none worked so far. I want to include an image preview for a blog post written in R markdown (.Rmd) on my main blog page where a number of posts and projects are generally shown. I can make it work in plain markdown (.md) using below code taken from the Hugo academic-theme here
+++
# Optional image to display on homepage (relative to `static/img/` folder).
image_preview = "bubbles.jpg"
+++
The result would look as shown here (see section Projects).
However, I do not know how to translate this to the .Rmd yaml in my blog post. I can include an image at the top using below but since I'm using a toc table of content option, the image is only shown after the toc and thus does not appear in the post preview on the main page.
---
title: some title
author: some author
date: 'some date'
slug: some-slug
categories:
- some category
tags:
- some-tag
output:
blogdown::html_page:
toc: true
number_sections: true
toc_depth: 2
---
Ideally, the image is only shown in the preview on the main page and not in the actual blog post (intention is to "lure" the reader with visually appealing image to actual content) but if not possible otherwise I'm also fine if the image shows on top of the actual post as long as it shows in the preview of the main page.
If the image_preview parameter works with the md document, it should also work with the Rmd one, provided that you use the syntax with : I guess:
---
title: some title
author: some author
date: 'some date'
slug: some-slug
categories:
- some category
tags:
- some-tag
output:
blogdown::html_page:
toc: true
number_sections: true
toc_depth: 2
image_preview: 'bubbles.jpg'
---