i'm trying to create an FAQ document with expandable sections. For example, in the attached example, I would like sections/questions 1.1 to 1.4 to lie underneath topic 1, and then topic 2 to be a new area with new questions/sections. As can be seen in the attached figure, the code works perfectly for the first two sections but then appears to fail thereafter. I have tried multiple different variants on <br> and </details> but nothing seems to address it. Similarly, it looks as though the table of contents isn't working appropriately as only TOPIC 1 appears in the floating toc. Bizarrely, the number_sections: true seems to number sections appropriately and so it seems to be detecting all headers etc... So, I was hoping somebody can help figure out this mystery that i anticipate is very straightforward!
---
title: "FAQ"
date: "10/04/2020"
output:
html_document:
toc: true
toc_depth: 2
toc_float: true
number_sections: true
theme: flatly
highlight: tango
code_folding: hide
---
```{r setup, include=FALSE}
library(knitr)
## TOPIC 1
### QUESTION 1. {.tabset .tabset-fade .tabset-pills}
<details>
<summary> Click Here! </summary>
#### TLDR
summary
#### Learn More
description
<br>
</details>
### QUESTION 2. {.tabset .tabset-fade .tabset-pills}
<details>
<summary> Click Here! </summary>
#### TLDR
summary
#### Learn More
description
<br>
</details>
### QUESTION 3. {.tabset .tabset-fade .tabset-pills}
<details>
<summary> Click Here! </summary>
#### TLDR
summary
#### Learn More
description
<br>
</details>
### QUESTION 4. {.tabset .tabset-fade .tabset-pills}
<details>
<summary> Click Here! </summary>
#### TLDR
summary
#### Learn More
description
<br>
</details>
## TOPIC 2.
### QUESTION 5. {.tabset .tabset-fade .tabset-pills}
<details>
<summary> Click Here! </summary>
#### TLDR
summary
#### Learn More
description
<br>
</details>
Once you remove all </details> closing tags, problem would be solved.
It seems to be Markdown issue failing to render <details><summary>...</summary></details>.
---
title: "FAQ"
date: "10/04/2020"
output:
html_document:
toc: true
toc_depth: 2
toc_float: true
number_sections: true
theme: flatly
highlight: tango
code_folding: hide
---
```{r setup, include=FALSE}
library(knitr)
```
:::: {style="display: flex;"}
::: {}
Here is the **first** Div.
## TOPIC 1
### QUESTION 1. {.tabset .tabset-fade .tabset-pills}
<details>
<summary> Click Here! </summary>
#### TLDR
summary
#### Learn More
description
<br>
</details>
### QUESTION 2. {.tabset .tabset-fade .tabset-pills}
<details>
<summary> Click Here! </summary>
#### TLDR
summary
#### Learn More
description
<br>
</details>
### QUESTION 3. {.tabset .tabset-fade .tabset-pills}
<details>
<summary> Click Here! </summary>
#### TLDR
summary
#### Learn More
description
<br>
</details>
### QUESTION 4. {.tabset .tabset-fade .tabset-pills}
<details>
<summary> Click Here! </summary>
#### TLDR
summary
#### Learn More
description
<br>
</details>
:::
::: {}
And this block will be put on the right:
## TOPIC 2.
### QUESTION 5. {.tabset .tabset-fade .tabset-pills}
<details>
<summary> Click Here! </summary>
#### TLDR
summary
#### Learn More
description
<br>
</details>
:::
::::
Hope this gets you closer to your goal. Use This link to look more into possibly using multiple columns in your Rmarkdown. The drop down options don't work, but try messing with this and see if it gets you any closer. Let me know. Love to help and learn at the same time
Related
I'm working with react markdown for the first time. I'm creating an FAQ space and decided to use the collapsible disclosure widgets. I want the topics to be collapsible and the questions inside of them to also be collapsible. When I add any or styling elements to the first summary, the disclosure triangle moves to the line above so I'd like to remove it all together. Is there any way to remove the disclosure triangle in only the topic summary? I don't really want to touch any css here but if I have to I can..
<details>
<summary>
<h4>FAQ</h4>
</summary>
<details>
<summary>This is a question?</summary>
> This is an answer.
</details>
</details>
*Expand to view frequently asked questions*````
My .jsx wrapper looks something like this, could I style the summary (or details?) class there, and how?
`
<ReactMarkdown
rehypePlugins={[rehypeRaw, rehypeSanitize]}
components={{
h4: ({node, ...props}) =\> \<div style={{fontSize: "24px", color: "#3D3B36" }} {...props} /\>,
h5: ({node, ...props}) =\> \<div style={{fontSize: "20px", color: "#3D3B36" }} {...props} /\>,
p: ({node, ...props}) =\> \<div style={{color: "#6c757d", marginLeft: "13px", marginBottom: "10px"}} {...props} /\>,
}}
>
{postMarkdown}
</ReactMarkdown>`
A line appears under a heading (#) in certain output formats (e.g. output: github_document) in R Markdown, but not in others. Is there a way to control this parameter explicitly?
Desired output, using
---
output: github_document
---
Output using:
---
output: html_document
---
Output using:
---
output: distill::distill_article
---
My ideal would be to replicate the output of github_document (with the line underneath, and the text beside the image) in the distill_article format, but I would also settle just for replicating the line in html_document format.
Full code for the target output below:
---
output: github_document
---
<style>
body {text-align: justify}
</style>
# distill for R Markdown <img src="rmarkdown.png" align="right" height="200" style="margin-left: 60px" />
This is some text underneath of the title. Lasciate ogne speranza voi ch'entrate. I grow old, I grow old. I shall wear the bottoms of my trousers rolled. Shall I part my hair behind? Do I dare to eat a peach? I shall wear white flannel trousers and walk upon the beach. I have heard the mermaids singing each to each.
I do not think that they will sing to me.
You can use a dashed line ---- to get the same effect:
# distill for R Markdown
--------------------------------------------------------------
This is some text underneath of the title. Lasciate ogne speranza voi ch'entrate. I grow...
distill for R Markdown
This is some text underneath of the title. Lasciate ogne speranza voi ch'entrate. I grow...
Here is the html output with image:
I'm trying to insert a Gantt diagram in my Rmarkdown, using DiagrammeR mermaid.
The problem is when I knit to html, my text appears all greyish/transparent.
I noticed that when I remove the ## for headers, everything's fine.
Does anyone have a solution for me?
Here's the code template :
---
title: "My title"
author: "J. Doe"
output:
html_document:
toc: no
bibliography: biblio.bib
---
```{r libraries, include=FALSE}
library(DiagrammeR)```
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)```
<style>
body {
text-align: justify}
</style>
## Table of content
1. [Project objectives](#bullet-1)
2. [Done and current tasks](#bullet-2)
3. [Bibliography](#bullet-3)
## 1. <a class="anchor" id="bullet-1"></a> Project objectives
PROJECT DESCRIPTION
## 2. <a class="anchor" id="bullet-2"></a> Done and *current* tasks
TASKS
```{r, echo=FALSE}
gantt=DiagrammeR::mermaid("
gantt
dateFormat YYYY-MM-DD
title A Very Nice Gantt Diagram
section Basic Tasks
This is completed :done, first_1, 2014-01-06, 2014-01-08
This is active :active, first_2, 2014-01-09, 3d
Do this later : first_3, after first_2, 5d
Do this after that : first_4, after first_3, 5d
section Important Things
Completed, critical task :crit, done, import_1, 2014-01-06,24h
Also done, also critical :crit, done, import_2, after import_1, 2d
Doing this important task now :crit, active, import_3, after import_2, 3d
Next critical task :crit, import_4, after import_3, 5d
section The Extras
First extras :active, extras_1, after import_4, 3d
Second helping : extras_2, after extras_1, 20h
More of the extras : extras_3, after extras_1, 48h
")
gantt```
## 3. BIBLIOGRAPHY
Many thanks!
J.
The example below (i.e. saved as a file index.rmd ) has the same code chunk to display an image above and below the top level heading, but the image doesn't appear above the top level heading. This occurs if there is a file _output.yml with only this entry bookdown::gitbook: in the same directory.
That line seems to enforce a table of contents (which I want) and that appears to strip out anything (image or text) before the first top level heading by default (which I don't want) - so can this behaviour be modified?
---
site: bookdown::bookdown_site
---
```{r echo=FALSE, message=FALSE, warning=FALSE}
library(imager)
im <- load.image(system.file('extdata/Leonardo_Birds.jpg',package='imager'))
plot(im, axes=FALSE)
```
# R Markdown
```{r echo=FALSE, message=FALSE, warning=FALSE}
library(imager)
im <- load.image(system.file('extdata/Leonardo_Birds.jpg',package='imager'))
plot(im, axes=FALSE)
```
What follows is workaround to your Options 2 and 3, using Markdown and CSS to style images and HTML+CSS to style text; also, using base64 image (transparent gif) generator as an space separator between elements.
Beware of whitespaces! (at the end of each line - place two white spaces and hit ENTER)
Does one of these approaches/hacks work for you? If not, it would be better to delete the answer, it may be misleading to others.
---
title: |
{width=300px}|
|:-:|
{width=300px style="display: block; margin:0 auto"}
{width=300px height=90px align=left}
{width=300px height=90px align=center}
{width=300px height=90px align=right}
{width=150px}
R Markdown Title
<center>R Markdown Title</center>
<p style="text-align: right;">R Markdown Title</p>
{width=150px}
author: "Author Name"
date: "08/03/2020"
---
Using Markdown table to "style" images |-| (left-aligned), |:-:| (centered) and |-:| (right-aligned) will work well with simple RMarkdown outputs.
I realised that you have an image under # top level heading positioned at the very top of the page - with top:0px. causing image duplication and, possibly, hover problem:
<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:0px;height:100px;" />
replace with:
{width=50px style="display: block; margin:0 auto;"}
and see what will happen.
---
title: |
{width=300px style="display: block; margin:0 auto;"}
{width=50px}
R Markdown Title
{width=50px}
output:
html_document: default
---
# I'm a top level heading {-}
{width=50px style="display: block; margin:0 auto;"}
Note, you need to replace the image with a local image if you want to show the image in the rstudio viewer.
The image will be visible in the html file created when you knit, if you open in a browser connected to the internet.
```{r echo=FALSE, message=FALSE, warning=FALSE}
plot(cars)
```
EDIT:
Let's try to find a common ground, A Minimal Book Example, github here.
Adjustments made in index.Rmd:
---
title: |
{height=300px}
author: "Author Name"
date: "`r Sys.Date()`"
site: bookdown::bookdown_site
output: bookdown::gitbook
---
# Prerequisites
<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:50px;height:300px;align:center;" />
This is a _sample_ book written in **Markdown**. You can use anything that Pandoc's Markdown supports, e.g., a math equation $a^2 + b^2 = c^2$.
index.Rmd output:
Adjustments made in Chapter: Introduction (01-intro.Rmd):
# Introduction {#intro}
{height=240px}
<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:50px;height:300px;align:center;" />
You can label chapter and section titles using `{#label}` after them, e.g., we can reference Chapter \#ref(intro). If you do not manually label them, there will be automatic labels anyway, e.g., Chapter \#ref(methods).
01-intro.Rmd output:
With this solution we are "masking" a top level heading (# Introduction) with .png image, which will appear in the Table of Content as text.
Disadvantage: besides the obvious hack, image width must be at least equal or wider than top level heading title.
Note: 3 options are provided here, and none of them are perfect. The perfect solution may rely on modifications to the bookdown package?
Option 1:
Use includes with before_body like this in your _output.yml file (suggested here):
bookdown::gitbook:
css: assets/style.css
includes:
before_body: assets/big-image.html
after_body: assets/footer.html
Disadvantages:
i) Requires making a html file just to insert an image.
ii) If using a web-based image, won't show in Rstudio viewer.
iii) If using a local image, path can get mixed up and won't show in online web html rendering
iv) Includes image at the top of each chapter of bookdown if using before_body: my_image.html. Alternative option in_header: my_image.html does not seem compatible with the sidebar index.
Option 2
Insert image via yaml in index.rmd, using the solution under Tip 3 Add a Logo in your title/header/footer at this blog post
---
title: |
My title
Disadvantages:
i) When you hover over the image, it displays a copy of the image in a slightly different location (Can this "Hover" behaviour be disabled?)
ii) If using a web-based image, won't show in Rstudio viewer.
iii) If using a local image, path can get mixed up and won't show in online web html rendering
Option 3
The code below borrowed from here (which you can place below the top level heading) presumably goes direct through the knitting process and inserts itself in the final html. The issue is that the image doesn't make room for itself and ends up over the first text. Is there some simple html/css to sort this out?
<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:0px;height:100px;" />
Disadvantages:
i) Image doesn't make room for itself and ends up over the first text. You can get around this with a hack by coding extra space (trial and error) through the yaml title like this:
title: |
.
.
.
.
site: bookdown::bookdown_site
EDIT
This is superseded by Radovan's accepted answer.
This was the best answer, taking option 3 from my previous answer, and combining a code approach to making the relevant space from Radovan's answer.
You will still have problems if you want to include a title in the YAML (I don't need this, as my title is in the image).
Also, on first loading the page, it presents nicely, but image is not seen if you go to the top of the document using the table of contents (the inheader approach used by this bookdown shows a better behaviour, but appears at the top of every chapter, which is not desired).
---
title: |
{height=300px}
output:
html_document: default
---
# I'm a top level heading {-}
<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:50px;height:300px;align:center;" />
Note, you need to replace the image with a local image if you want to show the image in the rstudio viewer.
The image will be visible in the html file created when you knit, if you open in a browser connected to the internet.
```{r echo=FALSE, message=FALSE, warning=FALSE}
plot(cars)
```
The problem of hovering the image duplicating the image can be fixed by removing the line below from the css file that is generated at \libs\gitbook-2.6.7\css\style.css
.book .book-header h1 a:hover{color:inherit;text-decoration:none}#media (max-width:1000px){.book .book-header h1{display:none}}
as a result, this code below places the image right above the title:
---
title: |
{width=400px style="display: block; margin:0 auto; align:center;" }
<center>GEOG380 Basic Stats with R</center>
---
I am trying to get an Altmetric badge to show in an html Markdown/Bookdown document with no luck. I am using the "default" badge that appears here: https://www.altmetric.com/products/altmetric-badges/
See a minimal version of the code below:
---
header-includes: null
output:
html_document:
df_print: paged
---
# Altmetric badge
<div data-badge-popover="right" data-badge-type="medium-donut" data-doi="10.1038/nature.2014.14583" data-hide-no-mentions="true" class="altmetric-embed"></div>
Any help would be greatly appreciated.
The awesome people at Altmetric support gave me a way to solve it:
From the snippet in the post it looks like the embed code hasn't been
added, which is essential to make the badge populate. The code is here:
<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
So, the complete working code:
---
header-includes: null
output:
html_document:
df_print: paged
---
# Altmetric badge
<div data-badge-popover="right" data-badge-type="medium-donut" data-doi="10.1038/nature.2014.14583" data-hide-no-mentions="true" class="altmetric-embed"></div>
<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>