Add a color box to show which color it is as hexcode is not really that readable in documentation

Author: cderv

_quarto.yml

@@ -672,6 +672,7 @@ format:
 
 filters:
   - filters/tools-tabset.lua
+  - filters/color-box.lua
 
 freeze: true
 

docs/presentations/revealjs/themes.qmd

@@ -193,13 +193,14 @@ Here's a list of all Sass variables (and their default values) used by Reveal th
 +--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
 | `$callout-color-<type>`  | The colors for the various types of callouts. Defaults:                                                                                                            |
 |                          |                                                                                                                                                                    |
-|                          | | type        | default   |                                                                                                                                        |
-|                          | |-------------|-----------|                                                                                                                                        |
-|                          | | `note`      | `#0d6efd` |                                                                                                                                        |
-|                          | | `tip`       | `#198754` |                                                                                                                                        |
-|                          | | `caution`   | `#dc3545` |                                                                                                                                        |
-|                          | | `warning`   | `#fd7e14` |                                                                                                                                        |
-|                          | | `important` | `#ffc107` |                                                                                                                                        |
+|                          | | type        | default                 |                                                                                                                          |
+|                          | |-------------|-------------------------|                                                                                                                          |
+|                          | | `note`      | [`#0d6efd`]{.color-box} |                                                                                                                          |
+|                          | | `tip`       | [`#198754`]{.color-box} |                                                                                                                          |
+|                          | | `caution`   | [`#dc3545`]{.color-box} |                                                                                                                          |
+|                          | | `warning`   | [`#fd7e14`]{.color-box} |                                                                                                                          |
+|                          | | `important` | [`#ffc107`]{.color-box} |                                                                                                                          |
+|                          |                                                                                                                                                                    |
 |                          | Note that style for callout is to have left border using type color, and header background to use a variation of this color.                                       |
 +--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+
 

filters/color-box.lua

@@ -0,0 +1,19 @@
+Span = function(s)
+  if not quarto.format.isHtmlOutput() then
+    return nil
+  end
+  if s.classes:includes('color-box') then
+    local color
+    if  s.attributes['color'] then
+      quarto.log.output("HERE")
+      color = s.attributes['color']
+      s.attributes.color = nil
+    elseif #s.content == 1 and s.content[1] and s.content[1].t == "Code" and s.content[1].text and s.content[1].text:sub(1, 1) == '#' then
+      color = s.content[1].text
+    end
+    if color then
+      s.content:insert(1, pandoc.Span('', pandoc.Attr('', { 'color-box' }, { style ="background-color:" .. color .. ";"})))
+      return pandoc.Span( s.content , { "", { "color-box-container" } })
+    end
+  end
+end

styles.css

@@ -337,3 +337,16 @@ iframe.reveal-demo {
 .illustration {
   border: 1px solid #dee2e6;
 }
+
+span.color-box-container {
+  display: inline-flex;
+  align-items: center; /* Align vertically */
+}
+
+span.color-box {
+  display: inline-block;
+  width: 1em; /* Width of the color box */
+  height: 1em; /* Height of the color box */
+  margin-right: 0.2em; /* Space between box and text */
+  border: 1px solid #000; /* Border color */
+}