From: Vladimír Vondruš <mosra@centrum.cz>
Date: Sat, 3 Nov 2018 21:38:41 +0000 (+0100)
Subject: css: support color swatches in code snippets.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=a5f7808bffcfe6239c1db706d0d089cb73b71b69;p=blog.git

css: support color swatches in code snippets.

Still needs to be hooked into Pygments, m.code and Doxygen theme
somehow.
---

diff --git a/css/m-components.css b/css/m-components.css
index b4644843..a2d5c5ec 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -1100,6 +1100,17 @@ pre.m-code.m-inverted > span.hll {
   border-color: transparent;
 }
 
+/* Code color swatch */
+.m-code-color {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  vertical-align: -0.05rem;
+  margin-left: 0.2rem;
+  margin-right: 0.1rem;
+  border-radius: 0.1rem;
+}
+
 /* Math block, math figure, inline math, math inside buttons because I am
    crazy */
 div.m-math {
diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css
index 7c936b98..9c711d7d 100644
--- a/css/m-dark+doxygen.compiled.css
+++ b/css/m-dark+doxygen.compiled.css
@@ -1346,6 +1346,15 @@ pre.m-code.m-inverted > span.hll {
   background-color: transparent;
   border-color: transparent;
 }
+.m-code-color {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  vertical-align: -0.05rem;
+  margin-left: 0.2rem;
+  margin-right: 0.1rem;
+  border-radius: 0.1rem;
+}
 div.m-math {
   overflow-x: auto;
   overflow-y: hidden;
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 08b4ba5f..859b4325 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -1346,6 +1346,15 @@ pre.m-code.m-inverted > span.hll {
   background-color: transparent;
   border-color: transparent;
 }
+.m-code-color {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  vertical-align: -0.05rem;
+  margin-left: 0.2rem;
+  margin-right: 0.1rem;
+  border-radius: 0.1rem;
+}
 div.m-math {
   overflow-x: auto;
   overflow-y: hidden;
diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css
index e79ffd47..8c0a66b6 100644
--- a/css/m-light+doxygen.compiled.css
+++ b/css/m-light+doxygen.compiled.css
@@ -1346,6 +1346,15 @@ pre.m-code.m-inverted > span.hll {
   background-color: transparent;
   border-color: transparent;
 }
+.m-code-color {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  vertical-align: -0.05rem;
+  margin-left: 0.2rem;
+  margin-right: 0.1rem;
+  border-radius: 0.1rem;
+}
 div.m-math {
   overflow-x: auto;
   overflow-y: hidden;
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 24f4b3f7..6abbff92 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -1346,6 +1346,15 @@ pre.m-code.m-inverted > span.hll {
   background-color: transparent;
   border-color: transparent;
 }
+.m-code-color {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  vertical-align: -0.05rem;
+  margin-left: 0.2rem;
+  margin-right: 0.1rem;
+  border-radius: 0.1rem;
+}
 div.m-math {
   overflow-x: auto;
   overflow-y: hidden;
diff --git a/doc/css/components.rst b/doc/css/components.rst
index 4dcb5b6d..94826dd2 100644
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -883,6 +883,28 @@ instead of :html:`<pre>`:
     :abbr:`reST <reStructuredText>` directive and a :rst:`:code:` inline text
     role.
 
+`Color swatches in code snippets`_
+----------------------------------
+
+For code dealing with colors it might be useful to show the actual color that's
+being represented by a hexadecimal literal, for example. In the below snippet,
+:html:`<span class="m-code-color" style="background-color: #3bd267;"></span>`
+is added next to the literal, showing a colored square:
+
+.. code-figure::
+
+    .. code:: html
+
+        <pre class="m-code"><span class="p">.</span><span class="nc">success</span> <span class="p">{</span>
+          <span class="k">color</span><span class="p">:</span> <span class="mh">#3bd267<span class="m-code-color" style="background-color: #3bd267;"></span></span><span class="p">;</span>
+        <span class="p">}</span></pre>
+
+    .. raw:: html
+
+        <pre class="m-code"><span class="p">.</span><span class="nc">success</span> <span class="p">{</span>
+          <span class="k">color</span><span class="p">:</span> <span class="mh">#3bd267<span class="m-code-color" style="background-color: #3bd267;"></span></span><span class="p">;</span>
+        <span class="p">}</span></pre>
+
 `Colored terminal output`_
 --------------------------