How to center an image using blogdown?

Question

So I am building my first data blog with RStudio and Blogdown and I am seriously stuck on something small but infuriating.

https://data-issues.netlify.app/

Above is the site I am building. I made a logo for it but I would like to make this centered. How would I do so in my markdown (.md) file.

Code here:

---
# Homepage
type: widget_page

# Homepage is headless, other widget pages are not.
headless: true

weight: 1

design:
  columns: "1"
---

{{< figure src=/datavision.png theme="light" class="center">}}

EDIT: added this too to no avail

<p align="center">
![datavision](datavision.png)
</p>

I am using .md files, so where exactly would I define the shortcode for p if not here?

Answer 1

As @YihuiXie said in the comment section below, you don't really need to use a shortcode for raw HTML, there are multiple solutions that you can use.

---

Edit your config to use raw HTML in Markdown

In your config.toml enter:

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

If you have in your project config.yaml use this:

markup:
  goldmark:
    renderer:
      unsafe: true

This enables raw html support in markdown files, in this way you don't need to use shortcodes.

https://gohugo.io/news/0.60.0-relnotes/

---

Raw HTML using Shortcodes

Depending how your project is structured, there should be some kind of layouts folder. I have a project made with Hugo and I have a something like this ../layouts/shortcodes/rawhtml.html with this code:

{{.Inner}}

For example in your code you're already using a Hugo’s Built-in shortcode. After you create the file, you just need to insert your shortcode in this way in your Markdown:

{{< rawhtml >}}
  <img src=/datavision.png class="center">
{{< /rawhtml >}}

The custom CSS code should be defined in ../static/css/, in your config.toml, simply check if there is a variable to set your custom CSS code, for example:

# Custom CSS
customCSS = ["/css/custom.css"]

I used this configuration because the theme required it, but it can be different in your project so keep this in mind. If you don't want to use another file to save your CSS code, you can simply insert it into your shortcode like I did with the HTML, for example:

{{< rawhtml >}}
<style>
    .center{
        /* your code here */
    }
</style>

{{< /rawhtml >}}

---

Use HTML for content pages instead of Markdown

With Hugo, you could also use a HTML instead of a md file in your project. It simply follows the same syntax, but you have to use HTML instead of the Markdown syntax, for example:

---
title: "Contact me"
---

<p>
    Some text here
</p>

In this case you don't need the shortcode from the moment you're already using a HTML.