Unable to render HTML using quarto

[ynap0lean]

Description

Hello !

I am facing an issue where quarto is not rendering HTML but instead is displaying the HTML code as is. The code to reproduce this is hosted at the following repository.

Fairly new to quarto, sorry if this is too basic a question !

[mcanouil]

Why are you writing your document using raw HTML? (One of the goal/benefit is to abstract the code)

I suggest you read markdown basics guide, especially the part about raw code.

[ynap0lean]

Thank you for the prompt response ! I went through the guide you linked. Maybe it helps contextualize the problem a bit. What I am going for here is to make a ‘slideshow’ of postcard like images (in the same directory as the .qmd)

Could you point in the right direction please keeping this new information in mind ?

Thank you in advance !

[chiragraman]

I think another crucial part of the question is how to define a reusable custom div element with some js to control swippable gestures and css for styling.

I believe the task is to separate out the html and js into some sort of a template container and specify the specific content of the images in the specific qmd file.

I still don’t know the right place to start with something like this, but maybe @mcanouil can point to the right place.

[mcanouil]

@chiragraman you are looking for Lua shortcode/filter described in the extension part of the documentation (https://quarto.org/docs/extensions/).

You can also take inspiration from extensions:

• https://quarto.org/docs/extensions/
• https://m.canouil.dev/quarto-extensions/

@ynap0lean Look at the fenced divs and spans from the link I shared, as well as Lua in extensions.

[mcanouil]

Assuming the HTML/JavaScript code in the repository is correct:

---
title: "Career Timeline"
format:
  html:
    css: style.css
    include-after-body:
      - text: |
          <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
          <script>
            document.addEventListener('DOMContentLoaded', function () {
              var swiper = new Swiper('.swiper-container', {
                loop: true,
                autoplay: {
                  delay: 5000,
                  disableOnInteraction: false,
                },
                pagination: {
                  el: '.swiper-pagination',
                  clickable: true,
                },
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                },
              });
            });
          </script>
---

::: {.timeline}

::: {.swiper-container}
:::: {.swiper-wrapper}
:::::: {.swiper-slide}
::::::: {.card}
### 2015

#### Junior Developer at Company A

Worked on developing web applications using HTML, CSS, and JavaScript.
::::::
:::::

:::::: {.swiper-slide}
::::::: {.card}
### 2016

#### Mid-Level Developer at Company B

Contributed to the backend development using Node.js and Express.
::::::
:::::

:::::: {.swiper-slide}
::::::: {.card}
### 2017

#### Senior Developer at Company C

Led a team of developers to build scalable web applications.
::::::
:::::

:::::: {.swiper-slide}
::::::: {.card}
### 2018

#### Tech Lead at Company D

Oversaw the technology strategy and architecture for various projects.
::::::
:::::

:::::: {.swiper-slide}
::::::: {.card}
### 2019

#### Engineering Manager at Company E

Managed a team of engineers and coordinated project deliveries.

::::::
:::::

:::::: {.swiper-slide}
::::::: {.card}
### 2020

#### Director of Engineering at Company F

Directed engineering efforts and ensured alignment with business goals.
::::::
:::::

::::

:::: {.swiper-pagination}
::::

:::: {.swiper-button-next}
::::

:::: {.swiper-button-prev}
::::

:::

:::