markdownquartoreveal.js

Bootstrap class in markdown table revealjs


I would like to use a striped markdown table like here in my reveal.js presentation which is a bootstrap class. It seems to work for HTML output but not for reveal.js. Here is some reproducible code:

--- 
format: revealjs
---

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Fruit prices {.striped .hover}

Output:

enter image description here

Expected output looks like this:

enter image description here

So I was wondering if anyone knows how to add bootstrap classes to a markdown table in a reveal.js presentation in Quarto?


Solution

  • In revealjs format, Bootstrap styles are not shipped automatically, unlike html format. So to use Bootstrap classes, you need to load the bootstrap styles manually. And then use the bootstrap classes for tables i.e. .table, .table-striped, .table-hover.

    --- 
    format: revealjs
    tbl-cap-location: bottom
    include-in-header: 
      text: |
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    ---
    
    <style>
    caption {
      text-align: center !important;
    }
    </style>
    
    | fruit  | price  |
    |--------|--------|
    | apple  | 2.05   |
    | pear   | 1.37   |
    | orange | 3.09   |
    
    : Fruit prices {.table .table-striped .table-hover}
    

    Also, you may need to change some CSS styles additionally, for example, the alignment of caption text to get similar tables as in the case of html format.


    bootstrap styled table in revealjs slide