Add preview of hex colors inside code chunk

[brunomioto]

Description

As seen in the new version of RStudio (or Github itself), it would be great if we could have a preview of the colors when typing the hex code, like here: #ffc127.
When sharing plots' code, it's helpful to know what color each one is.

[mcanouil]

Could you clarify, where you want this exactly?

[brunomioto]

Could you clarify, where you want this exactly?

In the code chunk itself

[mcanouil]

So in the rendered documents?

[brunomioto]

Yes

[mcanouil]

Like this?

Quarto document

HTML

--- format: html include-after-body: - text: | <script type="text/javascript"> // Get all elements with a hex color code const elements = document.querySelectorAll('*:not(script):not(style)'); for (let i = 0; i < elements.length; i++) { const element = elements[i]; const text = element.innerHTML; const regex = /#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/g; const newText = text.replace( regex, `$&<span style="display: inline-block; color: $&;">&#9632;</span>` ); element.innerHTML = newText; } </script> --- The `#b22222` colour is a dark red colour, also known as firebrick. It is a web safe colour. The #b22222 colour hex could be obtained by blending #ff4444 with #640000. Closest websafe colour is: #cc3333.

[brunomioto]

Yes!

[mcanouil]

Note that this messes up code blocks.
Also adding colour, basically disable the ability to copy clean code.

[mcanouil]

I don't think this should be applied to code blocks at all.

[brunomioto]

Oh, you are right. So maybe we can add it to plain text only?

[mcanouil]

Here an updated version.

---
format: html
include-after-body:
  - text: |
      <script type="text/javascript">
      // Author: Mickaël Canouil
      // Version: <1.0.0>
      // Description: Scan HTML to find hex colour code and add a coloured square next to it.
      // License: MIT
      function scanElements(element) {
        if (element.nodeType === Node.TEXT_NODE) {
          const regex = /#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/g;
          const newText = element.textContent.replace(
            regex,
            `$&<span style="display: inline-block; color: $&;">&#9632;</span>`
          );
          if (newText !== element.textContent) {
            const newElement = document.createElement('span');
            newElement.innerHTML = newText;
            element.parentNode.replaceChild(newElement, element);
          }
        } else if (element.nodeType === Node.ELEMENT_NODE && !element.classList.contains('sourceCode')) {
          for (let i = 0; i < element.childNodes.length; i++) {
            scanElements(element.childNodes[i]);
          }
        }
      }

      scanElements(document.body);
      </script>
---

The `#b22222` colour is a dark red colour, also known as firebrick.
It is a web safe colour.
The #b22222 colour hex could be obtained by blending #ff4444 with #640000.
Closest websafe colour is: #cc3333.

```{r}
my_colour <- "#b22222"
```

[mcanouil]

Using a Lua filter, it could be possible to do the same, but for LaTeX and HTML formats.

[brunomioto]

That's a great idea for a Quarto extension

[mcanouil]

Teasing, Lua filter extension incoming (still some tweaks, and LaTeX code to add).

[brunomioto]

Awesome!
Just thinking here, is it possible to use the background color of hex code without breaking it like the little square?

[mcanouil]

Well, yes, but then you have the change to font colour to get sufficient contrast.
This require computation ...

[EmilHvitfeldt]

I have been working on a similar project last night!

right now it is written in js but I'm confident it could be translated to Lua. Still ironing out the kinks.

con:

• Doesn't automatically detect colors like @mcanouil's solution

pro:

• works for more types of colors
• doesn't have false positives

This is how it interfaces right now, but I would like to move to using shortcodes like {{ colorbox rgb(10,100,0) }}

Names one [Orange]{.color}

hex codes [#441100]{.color}

short hex codes [#123]{.color}

rgb [rgb(10, 100, 200)]{.color}

rgb with % [rgb(100%, 20%, 100%)]{.color}

hwb [hwb(135 0% 40%)]{.color}

hsl [hsl(240, 100%, 50%)]{.color}

[mcanouil]

Shortcode is easy to add with my current filter.
For HTML, other formats can be handled, but it is going to be tricky for LaTeX.

I'am also going to try a code syntax for colours: `#b22222` which will produce #b22222 or `rgb(178,34,34)` for rgb(178,34,34).

[brunomioto]

Feature request: Copy to clipboard on click (maybe this could be an option inside the extension)

[mcanouil]

First release (v0.1.0): https://github.com/mcanouil/quarto-preview-colour.
Edit: added support for LaTeX in addition to HTML based formats in v0.2.0.

[mcanouil]

🎨 NEW: Quarto Preview Colour Extension v1.0.0! (finally)

✨ Inline colour previews (code and/or text)
✨ Hex, RGB, HSL, and HWB support
✨ Click to copy colour codes (HTML)
✨ HTML, LaTeX, Typst, DOCX & PPTX support

https://github.com/mcanouil/quarto-preview-colour