How to fold verbatim text (not code) in R bookdown? - r-markdown

In my document, I want to show some info, using ``` block, such as:
```
bruin#c7 ~ $ cat /etc/centos-release
CentOS Linux release 7.4.1708 (Core)
bruin#c7 ~ $
```
For large output chunks, I want to fold them. How to do that? Searching the web it seems all related topics are about code folding, but what I want to fold is not any type of code, just simple text...
Thanks!

Here is a very easy way to implement the following yourself:
You can find all the code you need in the following reproducible RMD document:
---
title: "Hide Verbatim Blocks"
author: "Martin Schmelzer"
date: "June 22, 2018"
output: html_document
---
<style>
.fold-btn { float: right; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".fold").prepend("<button class=\"fold-btn\">Unfold</button>");
$(".fold").children("code").toggle();
$(".fold-btn").on("click", function() {
if($(this).text() === "Fold") {
$(this).text("Unfold");
} else {
$(this).text("Fold");
}
$(this).next("code").toggle("linear");
})
});
</script>
# Rmd file
```{fold}
bruin#c7 ~ $ cat /etc/centos-release
CentOS Linux release 7.4.1708 (Core)
bruin#c7 ~ $
```
In the JS part we simply add a button to every chunk that is marked with the class fold. Afterwards we add the onClick event to all those buttons. When a button is clicked, its text should toggle between Fold and Unfold. And the corresponding code container should toggle its visibility state as well. Every chunk marked with fold is folded when the document is opened.
How you style the button using CSS is up to you.

Related

How to add scrollable pdf file on xarigan slide

I learned how to insert a certain page of pdf file on my xaringan slide using the following code:
```
{r}
magick::image_read_pdf("document.pdf", pages = 1)
```
The problem is I still cannot see the item on the page because it is located in down below. So I wonder if there's any function like leaflet so that I may be able to scroll the pdf document down.
You can try embed a pdf file using embed html tag, like this,
---
title: "Adding scrollable pdf file in xaringan"
output: xaringan::moon_reader
---
```{css, echo=FALSE}
#embeded_pdf {
width: 100%;
height: 70%;
}
```
## Adding a pdf file
<embed src="lorem_ipsum.pdf" type="application/pdf" id="embeded_pdf">
Note that,
Open the output html file (xaringan slide) in your browser, Rstudio does not show the embedded files in xaringan slides; but in browser, it works fine.
And in src option of embed tag, provide the file path of the pdf file that you want to embed.

How to extend Pandoc

I am using bookdown for a documentation which is outputted with bookdown::gitbook and bookdown::pdf_book.
In my Rmd files, I am using a div to wrap around notes and warnings styled with a css file. For example:
<div class="note">
This is a note.
</div>
Obviously, HTML and CSS is ignored when generating the PDF file. I was wondering if there is a way to "inject" a small script that would replace the div with, for example, a simple prefix text.
Or, is there another way to have it formatted in HTML and in the PDF without littering my file by adding something lengthy every time like:
if (knitr::is_html_output(excludes='epub')) {
cat('
<div class="note">
This is a note.
</div>
')
} else {
cat('Note: This is a note.')
}
I could also style blockquotes as described here but it is not an option as I still need blockquotes.
The appropriate way to do this is to use a fenced div rather than inserting HTML directly into your markdown and trying to parse it later with LUA. Pandoc already allows you to insert custom styles and process them to both file types. In other words, it will take care of creating the appropriate HTML and LaTeX for you, and then you just need to style each of them. The Bookdown documentation references this here, but it simply points to further documentation here, and here.
This method will create both your custom classed div in html and apply the same style name in the LaTeX code.
So, for your example, it would look like this:
::: {.note data-latex=""}
This is a note.
:::
The output in HTML will be identical to yours:
<div class="note">
<p>This is a note.</p>
</div>
And you've already got the CSS you want to style that.
The LaTeX code will be as follows:
\begin{note}
This is a note.
\end{note}
To style that you'll need to add some code to your preamble.tex file, which you've already figured out as well. Here's a very simple example of some LaTeX that would simply indent the text from both the left and right sides:
\newenvironment{note}[0]{\par\leftskip=2em\rightskip=2em}{\par\medskip}
I found this answer on tex.stackexchange.com which brought me on the right track to solve my problem.
Here is what I am doing.
Create boxes.lua with following function:
function Div(element)
-- function based on https://tex.stackexchange.com/a/526036
if
element.classes[1] == "note"
or element.classes[1] == "side-note"
or element.classes[1] == "warning"
or element.classes[1] == "info"
or element.classes[1] == "reading"
or element.classes[1] == "exercise"
then
-- get latex environment name from class name
div = element.classes[1]:gsub("-", " ")
div = div:gsub("(%l)(%w*)", function(a, b) return string.upper(a)..b end)
div = "Div"..div:gsub(" ", "")
-- insert element in front
table.insert(
element.content, 1,
pandoc.RawBlock("latex", "\\begin{"..div.."}"))
-- insert element at the back
table.insert(
element.content,
pandoc.RawBlock("latex", "\\end{"..div.."}"))
end
return element
end
Add pandoc_args to _output.yml:
bookdown::pdf_book:
includes:
in_header: latex/preamble.tex
pandoc_args:
- --lua-filter=latex/boxes.lua
extra_dependencies: ["float"]
Create environments in preamble.tex (which is also configured in _output.yml):
I am using tcolorbox instead of mdframed
\usepackage{xcolor}
\usepackage{tcolorbox}
\definecolor{notecolor}{RGB}{253, 196, 0}
\definecolor{warncolor}{RGB}{253, 70, 0}
\definecolor{infocolor}{RGB}{0, 183, 253}
\definecolor{readcolor}{RGB}{106, 50, 253}
\definecolor{taskcolor}{RGB}{128, 252, 219}
\newtcolorbox{DivNote}{colback=notecolor!5!white,colframe=notecolor!75!black}
\newtcolorbox{DivSideNote}{colback=notecolor!5!white,colframe=notecolor!75!black}
\newtcolorbox{DivWarning}{colback=warncolor!5!white,colframe=warncolor!75!black}
\newtcolorbox{DivInfo}{colback=infocolor!5!white,colframe=infocolor!75!black}
\newtcolorbox{DivReading}{colback=readcolor!5!white,colframe=readcolor!75!black}
\newtcolorbox{DivExercise}{colback=taskcolor!5!white,colframe=taskcolor!75!black}
Because I have also images and tables within the boxes, I run into LaTeX Error: Not in outer par mode.. I was able to solve this issue by adding following command to my Rmd file:
```{r, echo = F}
knitr::opts_chunk$set(fig.pos = "H", out.extra = "")
```

Add an image to Rmarkdown Bookdown output before top level heading

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: |
![](www/image.png){width=300px}|
|:-:|
![](www/image.png){width=300px style="display: block; margin:0 auto"}
![](www/image.png){width=300px height=90px align=left}
![](www/image.png){width=300px height=90px align=center}
![](www/image.png){width=300px height=90px align=right}
![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){width=150px}
R Markdown Title
<center>R Markdown Title</center>
<p style="text-align: right;">R Markdown Title</p>
![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){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:
![](http://stackoverflow.com/favicon.ico){width=50px style="display: block; margin:0 auto;"}
and see what will happen.
---
title: |
![](https://i.imgur.com/GiViTbA.png){width=300px style="display: block; margin:0 auto;"}
![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){width=50px}
R Markdown Title
![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){width=50px}
output:
html_document: default
---
# I'm a top level heading {-}
![](http://stackoverflow.com/favicon.ico){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: |
![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){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}
![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){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_image.png)
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: |
![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){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: |
![class='btn noHover'](images/Stats.png){width=400px style="display: block; margin:0 auto; align:center;" }
<center>GEOG380 Basic Stats with R</center>
---

TinyMCE Editor (3.x) altering format when pasting from Word 2015

When I copy the contents of a properly formatted word document, meaning it has H1 tags, 3 paragraphs, a URL link, and an email link, some bolded and some italicized words - basically a very basic document, the formatting isn't retained. Below is my init file.
tinyMCE.init({
// General options
mode : "exact",
elements : "content",
theme: "advanced",
//plugins : "safari,pagebreak,advhr,advimage,advlink,iespell,insertdatetime,preview,paste,fullscreen",
plugins : "pagebreak,style,advlink,iespell,insertdatetime,preview,print,contextmenu,paste,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
plugin_preview_width : "500",
plugin_preview_height : "600",
// Theme options
theme_advanced_buttons1:"cut,copy,paste,pasteword,|,undo,redo,|,bold,italic,underline,|,forecolor,backcolor|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|fullscreen,code,iespell,imageButton,preview",
theme_advanced_disable : "help,removeformat,sub,sup,anchor,link,unlink,image,|,insertdate,inserttime,advhr,print",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
paste_auto_cleanup_on_paste: false,
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "center",
valid_elements : "*[*]",
convert_urls:true,
cleanup : false
});
When I run the following console commands, I do see the "html" code IS there. Also, when I click on the HTML icon in the toolbar, I see the HTML code there, too (though all the H1 tags are removed except for the first one).
// Get the HTML contents of the currently active editor
console.debug(tinyMCE.activeEditor.getContent());
// Get the raw contents of the currently active editor
tinyMCE.activeEditor.getContent({format : 'raw'});
// Get content of a specific editor:
tinyMCE.get('content').getContent()
When I click the submit button, all I have on my action page is a simple cfdump and there, it is just plain text and a giant since paragraph. There are no P tags, not H1 tags, just plain text.
<cfdump var="#form.content#">
<cfoutput>
#form.content#
<textarea>#form.content#</textarea>
</cfoutput>
Just for grins, on the action page, I inserted the form.content into my MSSQL database with a datatype of nvarchar(2000) just to see if maybe the browser was playing games and the database only shows plain text, too. Here is another abnormality is that when I run my test page in Chrome, only plain text is saved. When I run the test page in FireFox, the Microsoft XML data is saved.
I only need one browser to work. Can someone provide any guidance on this?
Gotta love spaghetti code.
There was some logic that I missed that was doing a check for browsers that I missed so the issue was really with fckeditor and not tinymce.
/Start Snippet from: http://ckeditor.com/forums/Support/FCK-Link-picker-errors-FF-3
I got the same problem with FCK 2.3.2. The best solution is to change function CreateLink in fckeditorcode_gecko.js:
Old code I had:
FCK.CreateLink=function(A){FCK.ExecuteNamedCommand('Unlink');if (A.length>0){var B='javascript:void(0);/*'+(new Date().getTime())+'*/';FCK.ExecuteNamedCommand('CreateLink',B);var C=document.evaluate("//a[#href='"+B+"']",this.EditorDocument.body,null,9,null).singleNodeValue;if (C){C.href=A;return C;}}};
New code:
FCK.CreateLink=function(A){FCK.ExecuteNamedCommand('Unlink');if (A.length>0){var B='javascript:void(0);/*'+(new Date().getTime())+'*/';FCK.ExecuteNamedCommand('CreateLink',B);var C=this.EditorDocument.evaluate("//a[#href='"+B+"']",this.EditorDocument.body,null,9,null).singleNodeValue;if (C){C.href=A;return C;}}};
In fact, I only replaced document.evaluate with this.EditorDocument.evaluate
/end snippet

Self-contained rmarkdown file contains only some embedded images

I'm seeing different behaviour in an R Markdown (Rmd) file depending on how I reference the image I'd like to embed in an HTML document. In the simple example below, the second image is embedded in the document, but the first (using the R chunk) is not.
---
title: "title"
output:
html_document:
mode: selfcontained
theme: null
---
```{r packages, echo=FALSE}
library(htmltools)
```
```{r imgTest, echo=FALSE}
img(src = "http://placehold.it/350x150")
```
<img src="http://placehold.it/350x150">
This is the output in the HTML (for the relevant bit):
<p><img src="http://placehold.it/350x150"/></p>
<p><img src="data:image/png;base64,iVBORw0KG<SNIPPED>"></p>
In summary, using the htmltools function img() within a code chunk does not embed the image but instead it remains a link.
For various reasons, I need the document to be truly self-contained (no links) and to also avoid raw HTML.
Can anyone explain why this is happening and offer a solution? I've tried a variety of chunk options without success so far.