diff --git a/docs/images/codeDarkTheme.png b/docs/images/codeDarkTheme.png
new file mode 100644
index 0000000000..2ff204bad1
Binary files /dev/null and b/docs/images/codeDarkTheme.png differ
diff --git a/docs/userGuide/syntax/code.md b/docs/userGuide/syntax/code.md
index 959af92be7..a7a9ca6eab 100644
--- a/docs/userGuide/syntax/code.md
+++ b/docs/userGuide/syntax/code.md
@@ -2,7 +2,12 @@
 
 #### Themes
 
-MarkBind can present formatted code blocks, be it fenced or inline, with either **light** or **dark** themes. The default is dark.
+MarkBind can present formatted code blocks, be it fenced or inline, with either **light** or **dark** themes. The default is dark <trigger for="modal:code-dark-example" trigger="click">_(click for an example)_</trigger>.
+
+<modal header="Dark Code Theme" id="modal:code-dark-example">
+
+<pic src="/images/codeDarkTheme.png" alt="Theme example"></pic>
+</modal>
 
 Refer [here](../siteJsonFile.html#style) for configuring MarkBind to use a specific theme for the code blocks.
 
@@ -10,7 +15,7 @@ Refer [here](../siteJsonFile.html#style) for configuring MarkBind to use a speci
 
 MarkBind provides several features, some of which are added on top of the existing functionality of Markdown's _fenced code blocks_.
 
-<small>More info: https://www.markdownguide.org/extended-syntax#fenced-code-blocks</small>
+<small>More info: <https://www.markdownguide.org/extended-syntax#fenced-code-blocks></small>
 
 Features:
 
@@ -38,6 +43,7 @@ To enable syntax coloring, specify a language next to the backticks before the f
 
 Line numbers are <tooltip content="Line numbers were provided by default in version v3.1.1 and below. To preserve the exact line numbers behavior of sites generated in previous versions, simply set the codeLineNumbers option in site.json to true">hidden by default</tooltip>. To enable line numbers for the entire site by default,
 add `"codeLineNumbers": true` to the [`site.json`]({{baseUrl}}/userGuide/siteJsonFile.html#style) file:
+
 ```json {highlight-lines="8[:]"}
 {
   // ...
@@ -120,6 +126,7 @@ public class Inventory {
         return items.remove(item);
     }
 }
+
 ```
 </variable>
 </include>
@@ -157,6 +164,7 @@ To add a heading, add the attribute `heading` with the heading text as the value
   <bar type="name">goo</bar>
 </foo>
 ```
+
 </variable>
 </include>
 
@@ -208,6 +216,7 @@ A _wrap text_ button can be added to code blocks using the `codeBlockWrapButtons
 <br>
 
 #### Inline Code
+
 ##### Syntax coloring
 
 MarkBind can apply syntax-coloring on inline code too.
@@ -228,10 +237,13 @@ or the java code `public static void main(String[] args)`{.java}.
 </foo>
 ```
 ````
+
 ```
 `<bar type="name">goo</bar>`{.xml}
 ```
+
 </div>
+
 <div id="examples" class="d-none">
 
 ```xml
@@ -239,6 +251,7 @@ or the java code `public static void main(String[] args)`{.java}.
   <bar type="name">goo</bar>
 </foo>
 ```
+
 Syntax coloring for inline code: `<bar type="name">goo</bar>`{.xml} too!
 
 </div>