add syntax highlighting to code blocks

2 files changed, 196 insertions, 21 deletions

diff --git a/docs/style.css b/docs/style.css
index 379e56f..fb0ecde 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -1,15 +1,20 @@
 @import url('https://rsms.me/inter/inter.css');
 
-.feed-button {
+.hot-links {
   float: right;
-  text-decoration: none;
+  padding: 0.3rem 0rem;
+  margin: -0.5rem 0;
+}
+
+.feed-button, .donate-button {
+  background-color: var(--dark-white);
+  border-radius: 0.2rem;
+  border: 0px solid var(--dark-white);
   color: var(--black) !important;
-  background-color: var(--cyan);
   font-size: 0.8rem;
-  padding: 0.3rem 0.5rem;
   margin: -0.5rem 0;
-  border: 0px solid var(--dark-white);
-  border-radius: 0.2rem;
+  padding: 0.3rem 0.5rem;
+  text-decoration: none;
 }
 
 ::-moz-selection, ::selection {
@@ -17,12 +22,15 @@
 }
 
 :root {
-  --cyan: #79ffe1;
+  --cyan: #00cece;
   --pink: #d344e2;
   --black: #212121;
   --light-black: #666666;
   --white: #ffffff;
   --dark-white: #eeeeee;
+
+  --light-yellow: #F7B955;
+  --dark-yellow: #F49B0B;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -34,10 +42,6 @@
   --white: #000;
   --dark-white: #323232;
   }
-  .feed-button {
-    color: var(--white) !important;
-    background: var(--cyan);
-  }
   ::-moz-selection, ::selection {
     color: var(--white);
     background: var(--cyan);
@@ -62,6 +66,7 @@ body {
 }
 
 html {
+  padding: 0;
   line-height: 1.5;
   font-size: 18px;
 }
@@ -119,26 +124,28 @@ td {
 }
 
 .posts {
-  width: 97%;
+  width: 95%;
   max-width: 650px;
 }
 
-pre, code {
-  font-family: monospace;
-}
-
-pre {
-  overflow: auto;
-  padding: 1rem;
+pre:not(.sourceCode),div.sourceCode {
+  overflow: auto !important;
+  padding: 1.3rem;
+  margin: 1rem -1.3rem !important;
   border: 2px solid var(--dark-white);
   border-radius: 0.4rem;
 }
 
+pre, code {
+  font-family: monospace;
+}
+
 code {
   color: var(--pink);
 }
 
 pre > code {
+  white-space: pre !important;
   border: none;
   color: var(--black);
 }
@@ -162,7 +169,7 @@ pre > code {
 
 
 .post {
-  margin: 1rem;
+  margin: 0.5rem;
 }
 
 img {
@@ -196,9 +203,10 @@ hr {
   font-size: 0.8rem;
   overflow: auto;
   padding: 1.3rem;
+  padding-right: 0.6rem;
   border: 2px solid var(--dark-white);
   border-radius: 0.4rem;
-  margin: 1rem -1.3rem;
+  margin: 2rem -1.3rem;
   font-family: 'Inter', sans-serif;
 }
 
diff --git a/docs/syntax.css b/docs/syntax.css
new file mode 100644
index 0000000..fbfb6fe
--- /dev/null
+++ b/docs/syntax.css
@@ -0,0 +1,167 @@
+code {
+  white-space: pre-wrap;
+}
+
+span.smallcaps {
+  font-variant: small-caps;
+}
+
+span.underline {
+  text-decoration: underline;
+}
+
+div.column {
+  display: inline-block;
+  vertical-align: top;
+  width: 50%;
+}
+
+div.hanging-indent {
+  margin-left: 1.5em;
+  text-indent: -1.5em;
+}
+
+ul.task-list {
+  list-style: none;
+}
+
+pre > code.sourceCode {
+  white-space: pre;
+  position: relative;
+}
+
+pre > code.sourceCode > span {
+  display: inline-block;
+  line-height: 1.25;
+}
+
+pre > code.sourceCode > span:empty {
+  height: 1.2em;
+}
+
+code.sourceCode > span {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+div.sourceCode {
+  margin: 1em 0;
+}
+
+pre.sourceCode {
+  margin: 0;
+}
+
+@media screen {
+  div.sourceCode {
+    overflow: auto;
+  }
+}
+
+@media print {
+  pre > code.sourceCode {
+    white-space: pre-wrap;
+  }
+  pre > code.sourceCode > span {
+    text-indent: -5em;
+    padding-left: 5em;
+  }
+}
+
+pre.numberSource code {
+  counter-reset: source-line 0;
+}
+
+pre.numberSource code > span {
+  position: relative;
+  left: -4em;
+  counter-increment: source-line;
+}
+
+pre.numberSource code > span > a:first-child::before {
+  content: counter(source-line);
+  position: relative;
+  left: -1em;
+  text-align: right;
+  vertical-align: baseline;
+  border: none;
+  display: inline-block;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding: 0 4px;
+  width: 4em;
+}
+
+pre.numberSource {
+  margin-left: 3em;
+  padding-left: 4px;
+}
+
+div.sourceCode {
+}
+
+@media screen {
+  pre > code.sourceCode > span > a:first-child::before {
+    text-decoration: underline;
+  }
+}
+
+code span.al {
+  font-weight: bold;
+}
+
+code span.an {
+  font-style: italic;
+}
+
+code span.cf {
+  font-weight: bold;
+}
+
+code span.co {
+  font-style: italic;
+}
+
+code span.cv {
+  font-style: italic;
+}
+
+code span.do {
+  font-style: italic;
+}
+
+code span.dt {
+  text-decoration: underline;
+}
+
+code span.er {
+  font-weight: bold;
+}
+
+code span.in {
+  font-style: italic;
+}
+
+code span.kw {
+  font-weight: bold;
+}
+
+code span.pp {
+  font-weight: bold;
+}
+
+code span.wa {
+  font-style: italic;
+}
+
+code span.st {
+  color: var(--cyan);
+}
+
+code span.at {
+  color: var(--pink);
+}