CODEWITHSUNDEEP
htmlquartobootswatch
feder80
feder80

Reputation: 1351

How to add HTML code to a Quarto website?

Basically, it should be possible to copy html-code directly into a Quarto document (.qmd) and then render it to an html-website.

I tried to do that and copied the following code from the Simplex Theme to a quarto website:

<div class="card border-primary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Secondary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>

However, the results only partially works:

enter image description here

Do I make something wrong?

Upvotes: 2

Views: 5688

Answers (2)

Shafee
Shafee

Reputation: 19857

You can add raw HTML content to the quarto document safely by letting quarto (actually pandoc!) know that you are adding raw content and to do that warp the html code as is with {=html}.

---
title: "RAW HTML CONTENT"
format: html
css: bootstrap.min.css
---


```{=html}
<div class="card border-primary mb-3" style="max-width: 20rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h4 class="card-title">Primary card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
```

html content in quarto

Upvotes: 15

Julian
Julian

Reputation: 9240

For me it works as expected, eg.

---
title: "Test"
---

# make simplex button

<button type="button" class="btn btn-primary btn-lg">Large button</button>


# make card


<div class="card border-primary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Secondary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>

Output:

enter image description here

I assume your problem is related to spaces, e.g. this works

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

while if there are white spaces in the beginning of a line, it does not work, e.g.

  <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

Output: enter image description here

Upvotes: 2

Related Questions