How to change the URL rendering of code in Revealjs?

[CsatiZoltan]

Description

Hi,

I use the Revealjs backend of Quarto. The rendering of an inline code is the same as that of an inline code with a hyperlink. Therefore, I have to hover the mouse over the text to see if the mouse pointer changes. I, the creator of a presentation, is used to it, but the audience will not think about it. Here is an example:

The corresponding code

- [`code with link`](https://example.com)
- `code`
- [link](https://example.com)

I thought that the code with link could be rendered differently. Is it possible to do in Quarto?

Thank you.

[mcanouil]

Reveal.js is HTML, so you can tweak the style however you want.

For this, you need to use your favourite browser inspect/developper mode in order to define the right rule that you can inject:

• via theme: https://quarto.org/docs/presentations/revealjs/themes.html
• via raw css: https://quarto.org/docs/output-formats/html-basics.html#includes

[CsatiZoltan]

I know nothing about web development, which one is easier?

[mcanouil]

They are the same, if you don't know anything about CSS, it's going to be hard for you to get what you want.
Here is an example to add a simple underline to links using brand.yml.
For more advanced customisation, you'll have to learn (S)CSS.

---
title: Accessible links in Reveal.js
format:
  revealjs:
    embed-resources: true
brand:
  typography:
    link:
      decoration: underline
---

## The three lines

- [`code with link`](https://example.com)
- `code`
- [link](https://example.com)

Below a CSS version:

---
title: Accessible links in Reveal.js
format:
  revealjs:
    embed-resources: true
    include-in-header:
      text: |
        <style>
        /* Underline every link, so colour is not the only cue. */
        .reveal a[href] {
          text-decoration: underline;
          text-underline-offset: 0.18em;
        }

        /* Inline code inside a link takes the colour of that link. */
        # .reveal a[href] code {
        #   color: inherit;
        # }

        /* Show where the keyboard is. */
        .reveal a[href]:focus-visible {
          outline: 3px solid currentColor;
          outline-offset: 3px;
        }
        </style>
---

## The three lines

- [`code with link`](https://example.com)
- `code`
- [link](https://example.com)

[CsatiZoltan]

Thanks, both approaches work. Although I had to deactivate the chalkboard (I can live with it, annotation with the pencil is enough for me).

Now I see that the underlining is too intrusive, especially if there are many links on a slide: they attract the attention too much, at the expense of the rest of the text. I thought that I should rather change the link colour from blue to something else. That way, code with a link be distinct from code without link. What do you think?

[mcanouil]

That way, code with a link be distinct from code without link. What do you think?

This is for you to decide, but beware that colour change is not the best approach towards accessibility for your readers.

[CsatiZoltan]

What do you recommend then? I don't have experience with accessibility. I would be surprised if this question hadn't come up before for others. I mean, adding a link to inline code should be quite common in programming presentations...

[mcanouil]

Presentations are usually for talks, I believe most speakers avoid having links everywhere and/or compile them in a dedicated section.
Note sure why you want absolutely to put the link behind the code if your intent is for the audience to see/click on it. Having the link with explicit link text next to the code would seem better in my opinion.

Overall, there are your decisions to make, not something really tied up to Quarto CLI or its use.

[mcanouil]

@CsatiZoltan

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

[CsatiZoltan]

Sorry, I didn't know about alt texts. When I inserted it in the text box from the clipboard, the markup was automatically generated. I updated the alt text.