Updated on 2020-08-29: I’ve migrated my blog from blogdown to hugo so this post might be outdated. See the original post for examples.
Updated on 2019-09-08: Today I realized the best approach to insert a centered image inside a html-supported markdown post is:
<img class="special-img-class" style="width:100%" src="url-to-image" />
Two common misunderstanding for longtime
blogdown lurkers (like me) or R markdown newbies:
blogdownis equivalent to writing reports with
knitr. There is no need to “knit” every post you write, no matter which format (
.Rmd) you are using, since
blogdownwill handle them itself.
Deploying HTML inside a R markdown file can make the blog post more expressive than merely using Rmd syntax.
I didn’t realize the second one until when I was browsing Nan Xiao’s blog, who is the author of this theme I’m using. At one point, I was wondering why his post looks so different from mine. Out of curiosity, I digged a little into his raw files and came up with these following “hacks”.
Insert an image with style
This has nothing to do with direct usage of HTML, but still is different from traditional markdown rendering. R markdown will not render the name/caption of an image automatically, but it’s not the same case in
I used to like inserting an image with placeholder name like
img, so the R markdown codes would look like this:
Somehow if this is the case,
blogdown will render the image without any problem but leave you a weird image caption “img”.
Solution: Either you ignore the
img with a pair of blank square brackets,
or you figure out a nice caption for the image and do the rest like before. And you can even insert a hyperlink inside the caption. For example:
![This is a [logo](https://www.r-project.org/Rlogo.png) of R project.](https://www.r-project.org/Rlogo.png)
Update on 2019-04-17: You might also want to center images in the post. This can be done with a pair of
But somehow the caption disappears. Try this:
<center> ![This is a [logo](https://www.r-project.org/Rlogo.png) of R project.](https://www.r-project.org/Rlogo.png) <p class="caption">"Logo here!"</p> </center>
Embed a YouTube video
Here’s something R markdown cannot do. We need to borrow the power from HTML.
Update on 2019-04-17: According to this post “Use shortcodes to embed tweets, videos, etc. in your blogdown blog posts ”, one line code can solve the problem:
Note that in the code blog, we need to flag the argument
Additionally, I guess one line of HTML as caption
<p class="caption">"How could this happen?"</p> will increase the “stylelishness” of an embedded media by all means.
<p class="caption">"How could this happen?"</p>
R markdown tables look nice most of the time. But sometimes we need more. With html tag
<pre></pre>, one can easily display a pre-formatted table.
<pre><output> item1 item2 item3 item4 ============================= Gou Li Guo Jia ----------------------------- Qi Yin Huo Fu ============================= run_time: 59.0s total_time: 60.0s </output></pre>
A real example of WYSIWYG.
One way to do so is, of course, to write in a code block. Alternatively, we can attach an external link like this:
And finally this …
I thought the shadow under some inserted images come from some extra HTML scripts. The fact is that it’s a native feature in macOS.
- Command + Shift + 4: Take a screen shot with area selection, traditionally.
- Command + Shift + 5: Bring out the screenshot tool bar. If a screenshot is taken to capture the selected window, it will generate some shadow below.