diff --git a/docs/source/_static/css/custom.css b/docs/source/_static/css/custom.css
index b25846c..3f2cb7c 100644
--- a/docs/source/_static/css/custom.css
+++ b/docs/source/_static/css/custom.css
@@ -24,6 +24,13 @@ a.icon.icon-home:visited {
 /* Change code highlight background on dark mode */
 @media (prefers-color-scheme: dark) {
     .rst-content .highlight {
-       background: #26292b;
+        background: #26292b;
     }
 }
+
+/* Change code block font */
+.rst-content .linenodiv pre,
+.rst-content div[class^="highlight"] pre,
+.rst-content pre.literal-block {
+    font-family: Source Code Pro, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, Courier, monospace;
+}
diff --git a/docs/source/_templates/layout.html b/docs/source/_templates/layout.html
index a109bcb..9e1b7e7 100644
--- a/docs/source/_templates/layout.html
+++ b/docs/source/_templates/layout.html
@@ -40,6 +40,8 @@
   <link rel="stylesheet" href="{{ pathto('_static/css/theme.css', 1)|e }}" type="text/css" />
   <link rel="stylesheet" href="{{ pathto('_static/css/custom.css', 1)|e }}" type="text/css" />
 
+  <link href="https://adobe-fonts.github.io/source-code-pro/source-code-pro.css" rel="stylesheet">
+
   {%- for cssfile in extra_css_files %}
   <link rel="stylesheet" href="{{ pathto(cssfile, 1) }}" type="text/css" />
   {%- endfor -%}
diff --git a/docs/source/conf.py b/docs/source/conf.py
index 6494b1a..c53b98c 100644
--- a/docs/source/conf.py
+++ b/docs/source/conf.py
@@ -13,7 +13,7 @@
 import os
 import sys
 
-sys.path.insert(0, os.path.abspath("."))
+sys.path.insert(0, os.path.abspath("../.."))
 sys.path.append(os.path.abspath("extensions"))
 
 
diff --git a/docs/source/generate_style_list.py b/docs/source/generate_style_list.py
index 37e2de3..6f258ce 100644
--- a/docs/source/generate_style_list.py
+++ b/docs/source/generate_style_list.py
@@ -36,7 +36,7 @@ def generate_style_list():
         )
         style_heading = f"`{style}`\n" + "~" * len(f"`{style}`")
         output_example = indent_all_lines(full + "\n\n" + body_only)
-        style_list += f"{style_heading}\n\n::\n\n{output_example}\n\n"
+        style_list += f"{style_heading}\n\n.. code-block:: none\n\n{output_example}\n\n"
     # put it all together
     return f"{heading}\n\n{table_of_contents}\n{style_list}"
 
@@ -49,4 +49,5 @@ def write_to_file(filename, content):
 
 if __name__ == "__main__":
     content = generate_style_list()
-    write_to_file(os.path.join("docs", "source", "styles.rst"), content)
+    write_to_file(os.path.join(os.path.dirname(__file__), "styles.rst"), content)
+    print("Successfully generated styles.rst")
diff --git a/docs/source/styles.rst b/docs/source/styles.rst
index 1572e72..e945461 100644
--- a/docs/source/styles.rst
+++ b/docs/source/styles.rst
@@ -8,7 +8,7 @@ Preset styles
 `ascii`
 ~~~~~~~
 
-::
+.. code-block:: none
 
    +-----+-----------------------+
    |  #  |  G     H     R     S  |
@@ -29,7 +29,7 @@ Preset styles
 `ascii_borderless`
 ~~~~~~~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
       #  |  G     H     R     S   
     ----- ----- ----- ----- ----- 
@@ -44,7 +44,7 @@ Preset styles
 `ascii_box`
 ~~~~~~~~~~~
 
-::
+.. code-block:: none
 
    +-----+-----+-----+-----+-----+
    |  #  |  G  |  H  |  R  |  S  |
@@ -65,7 +65,7 @@ Preset styles
 `ascii_compact`
 ~~~~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
    +-----+-----------------------+
    |  #  |  G     H     R     S  |
@@ -84,7 +84,7 @@ Preset styles
 `ascii_double`
 ~~~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
    +-----+-----------------------+
    |  #  |  G     H     R     S  |
@@ -105,7 +105,7 @@ Preset styles
 `ascii_minimalist`
 ~~~~~~~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
     ----------------------------- 
       #  |  G     H     R     S   
@@ -126,7 +126,7 @@ Preset styles
 `ascii_simple`
 ~~~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
     ===== ===== ===== ===== ===== 
       #  |  G     H     R     S   
@@ -145,7 +145,7 @@ Preset styles
 `borderless`
 ~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
       #  ┃  G     H     R     S   
     ━━━━━ ━━━━━ ━━━━━ ━━━━━ ━━━━━ 
@@ -160,7 +160,7 @@ Preset styles
 `double`
 ~~~~~~~~
 
-::
+.. code-block:: none
 
    ╔═════╦═══════════════════════╗
    ║  #  ║  G     H     R     S  ║
@@ -181,7 +181,7 @@ Preset styles
 `double_box`
 ~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
    ╔═════╦═════╦═════╦═════╦═════╗
    ║  #  ║  G  ║  H  ║  R  ║  S  ║
@@ -202,7 +202,7 @@ Preset styles
 `double_compact`
 ~~~~~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
    ╔═════╦═══════════════════════╗
    ║  #  ║  G     H     R     S  ║
@@ -221,7 +221,7 @@ Preset styles
 `double_thin_compact`
 ~~~~~~~~~~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
    ╔═════╦═══════════════════════╗
    ║  #  ║  G     H     R     S  ║
@@ -240,7 +240,7 @@ Preset styles
 `markdown`
 ~~~~~~~~~~
 
-::
+.. code-block:: none
 
    |  #  |  G  |  H  |  R  |  S  |
    |-----|-----|-----|-----|-----|
@@ -255,7 +255,7 @@ Preset styles
 `minimalist`
 ~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
     ───────────────────────────── 
       #  │  G     H     R     S   
@@ -276,7 +276,7 @@ Preset styles
 `simple`
 ~~~~~~~~
 
-::
+.. code-block:: none
 
     ═════ ═════ ═════ ═════ ═════ 
       #  ║  G     H     R     S   
@@ -295,7 +295,7 @@ Preset styles
 `thick`
 ~~~~~~~
 
-::
+.. code-block:: none
 
    ┏━━━━━┳━━━━━━━━━━━━━━━━━━━━━━━┓
    ┃  #  ┃  G     H     R     S  ┃
@@ -316,7 +316,7 @@ Preset styles
 `thick_box`
 ~~~~~~~~~~~
 
-::
+.. code-block:: none
 
    ┏━━━━━┳━━━━━┳━━━━━┳━━━━━┳━━━━━┓
    ┃  #  ┃  G  ┃  H  ┃  R  ┃  S  ┃
@@ -337,7 +337,7 @@ Preset styles
 `thick_compact`
 ~~~~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
    ┏━━━━━┳━━━━━━━━━━━━━━━━━━━━━━━┓
    ┃  #  ┃  G     H     R     S  ┃
@@ -356,7 +356,7 @@ Preset styles
 `thin`
 ~~~~~~
 
-::
+.. code-block:: none
 
    ┌─────┬───────────────────────┐
    │  #  │  G     H     R     S  │
@@ -377,7 +377,7 @@ Preset styles
 `thin_box`
 ~~~~~~~~~~
 
-::
+.. code-block:: none
 
    ┌─────┬─────┬─────┬─────┬─────┐
    │  #  │  G  │  H  │  R  │  S  │
@@ -398,7 +398,7 @@ Preset styles
 `thin_compact`
 ~~~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
    ┌─────┬───────────────────────┐
    │  #  │  G     H     R     S  │
@@ -417,7 +417,7 @@ Preset styles
 `thin_compact_rounded`
 ~~~~~~~~~~~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
    ╭─────┬───────────────────────╮
    │  #  │  G     H     R     S  │
@@ -436,7 +436,7 @@ Preset styles
 `thin_double`
 ~~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
    ┌─────┬───────────────────────┐
    │  #  │  G     H     R     S  │
@@ -457,7 +457,7 @@ Preset styles
 `thin_double_rounded`
 ~~~~~~~~~~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
    ╭─────┬───────────────────────╮
    │  #  │  G     H     R     S  │
@@ -478,7 +478,7 @@ Preset styles
 `thin_rounded`
 ~~~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
    ╭─────┬───────────────────────╮
    │  #  │  G     H     R     S  │
@@ -499,7 +499,7 @@ Preset styles
 `thin_thick`
 ~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
    ┌─────┬───────────────────────┐
    │  #  │  G     H     R     S  │
@@ -520,7 +520,7 @@ Preset styles
 `thin_thick_rounded`
 ~~~~~~~~~~~~~~~~~~~~
 
-::
+.. code-block:: none
 
    ╭─────┬───────────────────────╮
    │  #  │  G     H     R     S  │