add codeblock line number style

semanticdata · Oct 16, 2024 · 57e5611 · 57e5611
1 parent cc51009
commit 57e5611
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/content/2023-06-06-markdown-showcase.md b/content/2023-06-06-markdown-showcase.md
@@ -85,7 +85,7 @@ Let us use some `inline code` and check out how it `looks`. Here's some `more`.
 
 ### Code Blocks
 
-```html
+```html,linenos
 <html>
   <head>
     <div style="background-color: #333;">

diff --git a/sass/_custom.scss b/sass/_custom.scss
@@ -1 +1,35 @@
 // Write your custom CSS here
+pre {
+    padding: 1rem;
+    overflow: auto;
+}
+/* The line numbers already provide some kind of left/right padding */
+pre[data-linenos] {
+    padding: 1rem 0;
+    padding: 0;
+}
+pre table td {
+    padding: 0 0.25rem;
+    color: white;
+    // border: 0;
+}
+/* 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: rgba(254, 252, 232, 0.9);
+}
+pre table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 0;
+}
+
+pre code {
+    border: 0;
+}
-Original file line number
+Diff line change
@@ Expand Up @@
     ### Code Blocks
-    ```html
+    ```html,linenos
     <html>
       <head>
         <div style="background-color: #333;">
@@ Expand Down @@