Replace "==Important text==" to "<mark>Important text</mark>"

[cavo789]

Description

In my revealjs slideshows, I like to use a custom shortcode (not sure if the term is correct here) like:

==Important text==

i.e. a portion of text between ==. The idea is then to convert to <mark>Important text</mark> when rendering / playing the revealjs slideshow in my browser.

After try/error, I've found a solution based on javascript:

window.addEventListener("load", (event) => {
    // This function will search for shortcode like "==IpsoLorem==" 
    // i.e. a portion of text between two equal sign and will replace it
    // to "<mark>IpsoLorem</mark>" so we can then use CSS to highlight
    // that portion.
    Reveal.on("slidechanged", function (event) {
        var re = /==([^=]*)==/;
        event.currentSlide.innerHTML = event.currentSlide.innerHTML.replace(new RegExp(re, "g"), "<mark>$1</mark>");
    } );
});

In my slidechanged event, I run a regex and replace the pattern. It works fine and using CSS I can highlight the term.

Fine... but...

It only works during revealjs rendering and only during a slidechanged event.

When rendering to f.i. pdf / docx / ... the JS is, for sure, not fired, and the code stay ==Important text==.

Did you have a good starting point filter I can read / learn and then modify to meet my need ?

Thanks!

[mcanouil]

Read the documentation on shortcode filter.
There is a starting template.

https://quarto.org/docs/extensions/creating.html

[cavo789]

Thanks Michaël!

Will take a look.

[cderv]

I see several "Quarto way"

As mentioned above, Shortcode is one of them but it will mean that you'll have to write this syntax

{{< mark Important Text >}}

Shortcodes is a Quarto feature.

A pandoc way supported in Quarto would be to use filter that detect Spans and create the correct HTML. This would mean this syntax

[Important Text]{.mark}

In your Lua filter, you would catch Span

And if you want to keep your specific syntax

==Important text==

you will need to have a filter that does what your JS script is doing using regex, but a bit differently as you would need to handle the parsed AST by pandoc

> quarto pandoc --to native
==Important text==

[ Para [ Str "==Important" , Space , Str "text==" ] ]

This means you either pandoc.utils.stringify() the content to have a full word regex match, or you do loop over Str elements in Inlines in a topdown approach to find a string starting with == and the one ending with ==.

Anyhow, the two previous solutions are better in term of implementation, but the syntax is changing.

Regarding your solution, possibly using the ready event would apply your change to the whole presentation at once. You could then package it as a Revealjs plugin (https://quarto.org/docs/extensions/revealjs.html)

Hope it helps

[cavo789]

Thanks Christophe

[Important Text]{.mark} is perfect. I'll abandon my own shortcode.