feat: Redo code blocks

config.toml

@@ -3,7 +3,6 @@ base_url = "https://duckquill.exozy.me"
 description = "Modern, pretty, and clean theme"
 
 compile_sass = true
-minify_html = true
 generate_feed = true
 feed_filename = "atom.xml"
 build_search_index = false

content/demo/index.md

@@ -47,6 +47,24 @@ GitHubPages::Dependencies.gems.each do |gem, version|
 end
 ```
 
+```scss, linenos, linenostart=10, hl_lines=3-4 8-9, hide_lines=2 7
+pre mark {
+
+  display: block;
+
+  color: currentcolor;
+
+}
+
+pre table td:nth-of-type(1) {
+
+  color: #6b6b6b;
+
+  font-style: italic;
+
+}
+```
+
 #### Header 4
 
 - This is an unordered list following a header.
@@ -163,7 +181,7 @@ Available variables are:
 
 Variables should be comma-separated and be inside the brackets.
 
-```
+```jinja2
 {{/* image(url="image.png", alt="This is an image" no_hover=true) */}}
 ```
 
@@ -173,7 +191,7 @@ Variables should be comma-separated and be inside the brackets.
 
 Same as images, but with a few differences: `no_hover` and `url_min` are not available.
 
-```
+```jinja2
 {{/* video(url="video.webm", alt="This is a video") */}}
 ```
 
@@ -183,7 +201,7 @@ Same as images, but with a few differences: `no_hover` and `url_min` are not ava
 
 Alright, this one doesn't simplify anything, it just adds a CRT-like effect around Markdown code blocks.
 
-```
+```jinja2
 {%/* crt() */%}
 -> Markdown code block <-
 {%/* end */%}
@@ -218,7 +236,7 @@ Alright, this one doesn't simplify anything, it just adds a CRT-like effect arou
 
 Media can have additional text description using the `<figcaption>` HTML tag.
 
-```
+```markdown
 ![Image](image.pmg)
 <figcaption>The image caption</figcaption>
 ```
@@ -247,7 +265,7 @@ The <abbr title="American Standard Code for Information Interchange">ASCII</abbr
 
 ## Keyboard shortcut
 
-```
+```html
 <kbd>⌘ Super</kbd> + <kbd>Space</kbd>
 ```
 
@@ -259,7 +277,7 @@ You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>im
 
 ## Link to page (rightwards arrow)
 
-```
+```html
 <a class="page-link" href="demo/demo-page">Link to page</a>
 ```
 
@@ -267,7 +285,7 @@ You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>im
 
 ## Link to site (up-rightwards arrow)
 
-```
+```html
 <a class="site-link" href="https://example.org">Link to site</a>
 ```
 
@@ -275,7 +293,7 @@ You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>im
 
 ## Buttons
 
-```
+```html.j2
 <p class="dialog-buttons">
   <a class="inline-button" href="#top">Go to top</a>
   <a href="{{site.issuesurl}}">File an issue</a>

sass/_main.scss

@@ -62,7 +62,7 @@ body {
   }
 }
 
-// LAYOUT
+// Layout
 .container {
   width: 80%;
   margin-left: auto;
@@ -71,7 +71,7 @@ body {
 }
 
 @media only screen and (max-device-width: 480px) {
-  // MOBILE
+  // Mobile
   .container {
     width: 90%;
   }
@@ -201,15 +201,13 @@ details {
   }
 }
 
-// TABLES
+// Tables
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
 table {
-  display: block;
-  width: 100%;
   overflow: auto;
   word-break: normal;
   word-break: keep-all;
@@ -230,12 +228,12 @@ th {
   padding: 0;
 }
 
-// MAKE TABLES VERTICALLY ALIGNED TO THE TOP
+// Make tables vertically aligned to the top
 tbody td {
   vertical-align: top;
 }
 
-/* Media */
+// Media
 img,
 video {
   display: block;
@@ -256,7 +254,7 @@ img:not(.no-hover):hover {
 }
 
 @media only screen and (max-device-width: 480px) {
-  // MOBILE
+  // Mobile
   img:not(.no-hover):hover {
     transform: scale(110%);
   }
@@ -267,7 +265,7 @@ img:not(.no-hover):hover {
 }
 
 .pixels {
-  image-rendering: crisp-edges; /* older firefox browsers */
+  image-rendering: crisp-edges; // older firefox browsers
   image-rendering: pixelated;
 }
 
@@ -276,7 +274,7 @@ img:not(.no-hover):hover {
   box-shadow: none;
 }
 
-// NAVBAR
+// Navbar
 .site-nav {
   position: sticky;
   top: 1rem;
@@ -355,7 +353,7 @@ img:not(.no-hover):hover {
   }
 }
 
-/* Footer */
+// Footer
 .site-footer {
   text-align: center;
   padding: 3rem 0 3rem;
@@ -369,7 +367,7 @@ img:not(.no-hover):hover {
   }
 }
 
-// LINK ARROWS
+// Link arrows
 .link-page::after {
   content: " →";
 }
@@ -378,14 +376,14 @@ img:not(.no-hover):hover {
   content: " ↗";
 }
 
-// CENTER LINK ICONS VERTICALLY
+// Center link icons vertically
 .link-icon {
   height: 1rem;
   width: 1rem;
   vertical-align: middle;
 }
 
-// BUTTONS
+// Buttons
 .dialog-buttons {
   display: flex;
   flex-direction: row;
@@ -403,6 +401,70 @@ img:not(.no-hover):hover {
   color: var(--text);
 }
 
+// Code
+code {
+  font-family: "JetBrains Mono", monospace;
+  padding: 2px 6px;
+  border-radius: var(--border-radius-small);
+  background-color: var(--fg-07);
+  color: var(--red-fg);
+}
+
+pre code {
+  background-color: unset;
+  border-radius: unset;
+  color: unset;
+  padding: unset;
+}
+
+pre * {
+  font-family: "JetBrains Mono", monospace;
+}
+
+pre {
+  line-height: normal;
+  padding: 1rem;
+  margin: 1rem 0 1rem;
+  border-radius: var(--border-radius);
+  max-width: 100vw;
+  box-shadow: var(--shadow);
+  overflow: auto;
+}
+
+// The line numbers already provide some kind of left/right padding
+pre[data-linenos] {
+  padding: 1rem 0;
+}
+
+pre table td {
+  padding: 0;
+  border: none;
+}
+
+// The line number cells
+pre table td:nth-of-type(1) {
+  text-align: center;
+  user-select: none;
+}
+
+pre mark {
+  // If you want your highlights to take the full width.
+  display: block;
+  // The default background colour of a mark is bright yellow
+  background-color: var(--fg-07);
+  // Set color from accent color to text color
+  color: var(--text);
+  // Unset code block border radius
+  border-radius: 0;
+  // Unset mark padding
+  padding: 0;
+}
+
+pre table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
 // CRT
 .crt {
   margin: 1rem 0 1rem;
@@ -416,9 +478,6 @@ img:not(.no-hover):hover {
     padding: 1rem 1rem;
     margin: unset;
     background-color: unset;
-    background-image: unset;
-    background-size: unset;
-    background-position: unset;
     box-shadow: unset;
   }
   
@@ -444,42 +503,7 @@ img:not(.no-hover):hover {
   }
 }
 
-// CODE
+// Statements
-pre,
-code {
-  font-family: "JetBrains Mono", monospace;
-}
-
-pre {
-  line-height: normal;
-  margin: 1rem 0 1rem;
-  padding: 1rem 1rem;
-  border-radius: var(--border-radius);
-  max-width: 100vw;
-  overflow-x: auto;
-  box-shadow: var(--shadow);
-  background-image: linear-gradient(var(--fg-03) 1px, transparent 1px),
-    linear-gradient(90deg, var(--fg-03) 1px, transparent 1px);
-  background-size: 10px 10px, 10px 10px;
-  background-position: -1px -1px, -1px -1px;
-}
-
-pre code {
-  background-color: unset;
-  border-radius: unset;
-  color: unset;
-  padding: unset;
-}
-
-code {
-  padding: 2px 6px;
-  border-radius: var(--border-radius-small);
-  background-color: var(--fg-05);
-  color: var(--red-fg);
-  box-shadow: none;
-}
-
-// STATEMENTS
 .statement-container {
   margin: 1rem 0 1rem;
   padding: 1rem 1rem;