Skip to content

Instantly share code, notes, and snippets.

@gorgitko
Last active April 16, 2020 10:53
Show Gist options
  • Save gorgitko/a8c485ebb71530f1947a37bc782297a9 to your computer and use it in GitHub Desktop.
Save gorgitko/a8c485ebb71530f1947a37bc782297a9 to your computer and use it in GitHub Desktop.
In HTML output of RMarkdown document, it adds tooltips to code chunks which show their language. Uses https://atomiks.github.io/tippyjs/
---
title: "Code chunks language tooltips"
output:
html_document:
theme: "united"
self_contained: true
---
<!--You need to use Bootstrap theme (e.g. "united") to load dependencies. -->
```{r, child = "tooltip_child.Rmd"}
```
# R
```{r}
print("R")
```
# bash
```{bash}
echo "bash"
```
# Python
```{python}
print("Python")
```
# Render HTML
```{r, eval = FALSE}
rmarkdown::render("example.Rmd", output_file = "example.html")
```
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
```{js, echo = FALSE}
$(document).ready(function() {
setTimeout(function() {
$("code.hljs").each(function() {
var pre = $(this).parent("pre");
var lang = pre[0].classList[0];
if (typeof lang !== "undefined") {
// To modify the tooltip, look here: https://atomiks.github.io/tippyjs/v6/all-props/
tippy(pre[0], {
content: lang.toUpperCase(),
placement: "left"
});
}
});
}, 250);
});
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment