feat: Add background color to rules, add TOML highlighting (#55)

* feat: Add background color to rules, add TOML highlighting * Fix ESLint error
stackabletech · Jan 29, 2024 · 51ad644 · 51ad644
1 parent b20d3d3
commit 51ad644
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/src/css/admonition.css b/src/css/admonition.css
@@ -15,7 +15,33 @@
   }
 }
 
-/* Change color of the "important" admonition back to the default red */
-.doc .admonitionblock.code-rule.warning .icon {
-  background-color: #e40046;
+/* Adjust styles for the "correct" code style rule usage */
+.doc .admonitionblock.code-rule.tip {
+  /* Change the background color of the "tip" admonition to a light green */
+  & td.content {
+    background-color: #e7fbe8;
+  }
+
+  /* Change the background color of the code block to a light green */
+  & td.content div.listingblock pre.highlight code {
+    background-color: #e7fbe8;
+  }
+}
+
+/* Adjust styles for the "wrong" code style rule usage */
+.doc .admonitionblock.code-rule.warning {
+  /* Change the color of the "important" admonition back to the default red */
+  & .icon {
+    background-color: #e40046;
+  }
+
+  /* Change the background color of the "tip" admonition to a light green */
+  & td.content {
+    background-color: #f0d2db;
+  }
+
+  /* Change the background color of the code block to a light green */
+  & td.content div.listingblock pre.highlight code {
+    background-color: #f0d2db;
+  }
 }
diff --git a/src/js/vendor/highlight.bundle.js b/src/js/vendor/highlight.bundle.js
@@ -21,7 +21,8 @@
   hljs.registerLanguage('shell', require('highlight.js/lib/languages/shell'))
   hljs.registerLanguage('sql', require('highlight.js/lib/languages/sql'))
   hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'))
-  hljs.registerLanguage('yaml', require('highlight.js/lib/languages/yaml'));
+  hljs.registerLanguage('yaml', require('highlight.js/lib/languages/yaml'))
+  hljs.registerLanguage('toml', require('highlight.js/lib/languages/ini'));
 
   [].slice.call(document.querySelectorAll('pre code.hljs')).forEach(function (node) {
     hljs.highlightElement(node)