fix: setup prettyprint

Author: mostafaei2002

docs_theme/main.html

@@ -193,6 +193,7 @@ <h3 class="modal-title fs-5" id="search_modal_label">
     </script>
 
     <script src="{{ 'dist/main.js'|url }}"></script>
+    <script src="{{ 'dist/prettify-1.0.js'|url }}"></script>
 
     {% for path in config.extra_javascript %}
     <script src="{{ path|url }}" defer></script>

docs_theme/src/js/main.js

@@ -12,3 +12,8 @@ import "../../node_modules/bootstrap/js/dist/toast";
 import "../../node_modules/bootstrap/js/dist/tooltip";
 
 import "../scss/styles.scss";
+
+const codeBlocks = document.querySelectorAll("pre code");
+codeBlocks.forEach((block) => {
+  block.parentElement.classList.add(["prettyprint", "well"]);
+});

docs_theme/src/scss/styles.scss

@@ -66,6 +66,12 @@ $code-color: #d14;
 a {
   color: #a30000;
   text-decoration: none;
+
+  &:hover,
+  &:active {
+    color: #c20000;
+    text-decoration: underline;
+  }
 }
 
 pre.prettyprint {
@@ -86,6 +92,18 @@ code {
   padding: 2px 4px;
 }
 
+pre {
+  background-color: #f7f7f9;
+}
+
+pre code {
+  border: none;
+}
+
+.nav-link {
+  padding: 2px 15px 3px;
+}
+
 .body-content {
   padding-top: 120px;
   padding-bottom: 70px;
@@ -101,4 +119,55 @@ code {
   color: #333;
 }
 
-// Code Blocks
+// Prettify Code
+.com {
+  color: #93a1a1;
+}
+.lit {
+  color: #195f91;
+}
+.pun,
+.opn,
+.clo {
+  color: #93a1a1;
+}
+.fun {
+  color: #dc322f;
+}
+.str,
+.atv {
+  color: #d14;
+}
+.kwd,
+.prettyprint .tag {
+  color: #1e347b;
+}
+.typ,
+.atn,
+.dec,
+.var {
+  color: teal;
+}
+.pln {
+  color: #48484c;
+}
+
+.prettyprint {
+  padding: 8px;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+}
+.prettyprint.linenums {
+  box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin: 0 0 0 33px; /* IE indents via margin-left */
+}
+ol.linenums li {
+  padding-left: 12px;
+  color: #bebec5;
+  line-height: 20px;
+  text-shadow: 0 1px 0 #fff;
+}