Fix Docsy to work with latest highlight styles

assets/scss/_code.scss

@@ -4,18 +4,13 @@
 	// Highlighted code.
     .highlight {
         @extend .card;
-        
+	
         margin: 2rem 0;
-        padding: 1rem;
-        background-color: $gray-100;
-
-        pre, div {
-            background-color: inherit !important;
-        }
-
+        padding: 0;
+
         pre {
             margin: 0;
-            padding: 0;
+            padding: 1rem;
         }
     }
 

userguide/config.toml

@@ -81,6 +81,11 @@ weight = 1
   [markup.goldmark]
     [markup.goldmark.renderer]
       unsafe = true
+  [markup.highlight]
+      # See a complete list of available styles at https://xyproto.github.io/splash/docs/all.html
+      style = "tango"
+      # Uncomment if you want your chosen highlight style used for code blocks without a specified language
+      # guessSyntax = "true"
 
 # Everything below this are Site Params
 

userguide/content/en/docs/Adding content/lookandfeel.md

@@ -81,6 +81,30 @@ When you use `.-bg-<color>`, the text colors will be adjusted to get proper cont
 
 <div class="-text-blue pt-3 display-4">Text: Blue</div>
 
+## Code highlighting
+
+With Hugo version 0.60 and higher, you can choose from a range of code block highlight and colour styles using [Chroma](https://github.com/alecthomas/chroma) that are applied to your fenced code blocks by default. If you copied a recent `config.toml` your site uses Tango (like this site), otherwise the Hugo default is Monokai. You can switch to any of the [available Chroma styles](https://xyproto.github.io/splash/docs/all.html) (including our Docsy default Tango) using your `config.toml`:
+
+```toml
+[markup]
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      unsafe = true
+  [markup.highlight]
+      # See a complete list of available styles at https://xyproto.github.io/splash/docs/all.html
+      style = "tango"
+ ```
+
+By default code highlighting styles are not applied to code blocks without a specified language, instead you get Docsy's default style of grey with black text. If you would like the code highlighting style to apply to all code blocks, even without a language, uncomment or add the following line under `[markup.highlight]` in your `config.toml`.
+
+```toml
+      # Uncomment if you want your chosen highlight style used for code blocks without a specified language
+      guessSyntax = "true"
+```
+
+You can find out more about code highlighting in Hugo with Chroma in [Syntax Highlighting](https://gohugo.io/content-management/syntax-highlighting/).
+
+
 ## Customizing templates
 
 ### Add code to head or before body end