Search code examples
rquarto

Inline Images in Quarto Markdown

I need to place an inline image in a apresentation in Quarto (Revealjs) but every inline image shows displaced a bit upwards:

enter image description here

the code I wrote is:

I want an inline image but I get: ![](images/RStudio_logo.svg){height=30}

I can't find the information in the documentation and I am not proficient in css.

the question is: Is there a way to do it?

Solution

  • You could add in your yaml a css file which looks like this:

    styles.css

    .center{
  margin: 0!important;
  height: 30px;
}

    and add it to your yaml like this:

    ---
format: revealjs
css: styles.css
---

    then you can add it to your image

    I want an inline image but I get: ![](https://upload.wikimedia.org/wikipedia/commons/d/d0/RStudio_logo_flat.svg){.center}

    enter image description here

    Explanation:

    The reason why this happens is the internal css-style of quarto. The above written code overwrites the existing style (that was it is necessary to use !important), that looks like this

    .reveal img {
  margin: var(--r-block-margin) 0;
}

    Therefore, we use an own css style for that image to override that default.