Border around Markdown embed in RMarkdown

Question

I have a couple of Github profile "cards" created from here which I am embedding as Markdown in a RMarkdown page on a pkgdown website.

How would i go about adding a border to these? Anything i have found searching has been about using CSS or html to add borders to images rather than embeds like this.

Or alternatively change the background colour of them - they are white on a white page.

Thanks

Answer 1

You can mix markdown and html code and even use css code chunks in your RMarkdown document to change the styling. In the document below, I put the metrics card in a div with class=bordered and then changed the border-style attribute for the bordered class:

---

title: "test"
output: html_document
editor_options: 
  chunk_output_type: console
---
    
```{css echo=FALSE}
.bordered{
  border-style: solid;
}
```

<div class="bordered">
![](https://metrics.lecoq.io/davidaarmstrong?template=classic&base=header%2C%20activity%2C%20community%2C%20repositories%2C%20metadata&base.indepth=false&base.hireable=false&base.skip=false&config.timezone=America%2FToronto)
</div>

Here's the result:

---

side-by-side

To put two side-by-side: you could use a flexbox strategy:

```{css echo=FALSE}
.wrapper {
  display: flex;
}

.left {
  flex: 50%;
  margin:15px; 
  border-style: solid;
}

.right {
  flex: 50%;
  margin:15px; 
  border-style: solid;
}
```

<div class="wrapper">
<div class="left">
![](https://metrics.lecoq.io/davidaarmstrong?template=classic&base=header%2C%20activity%2C%20community%2C%20repositories%2C%20metadata&base.indepth=false&base.hireable=false&base.skip=false&config.timezone=America%2FToronto)
</div>
<div class="right">
![](https://metrics.lecoq.io/davidaarmstrong?template=classic&base=header%2C%20activity%2C%20community%2C%20repositories%2C%20metadata&base.indepth=false&base.hireable=false&base.skip=false&config.timezone=America%2FToronto)
</div>
</div>

Here's the result: