From 5c7aaea10093505a903a3fd49d247f2545e96b04 Mon Sep 17 00:00:00 2001
From: Fabien CASTERS <fabien@vaga.io>
Date: Tue, 5 Jan 2021 14:50:39 +0100
Subject: improve preformatted text with or without line numbers

---
 assets/css/_base.scss               |  6 +++++-
 assets/css/components/_post.scss    | 12 ++++++++++--
 exampleSite/content/posts/test-1.md | 24 ++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/assets/css/_base.scss b/assets/css/_base.scss
index 9848303..d0a3f3f 100644
--- a/assets/css/_base.scss
+++ b/assets/css/_base.scss
@@ -38,13 +38,17 @@ code {
 }
 
 pre {
+  font-size: 1rem;
+  line-height: 1.2em;
+  margin: 0;
+  overflow: auto;
+
   // A larger monospaced block of text (that isn't mixed with normal text)
   // generally looks heavier than normal text with the same font size. For this
   // reason using a smaller monospaced font size makes sense in this situation.
   code {
     font-size: .8em;
   }
-  overflow: auto;
 }
 
 ::selection {
diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index b8265a7..afecccd 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -3,10 +3,18 @@
 }
 
 .post-content {
-  pre {
+  & > pre,
+  .highlight {
+    margin: 1em 0;
+  }
+
+  & > pre,
+  .highlight > pre,
+  .highlight > div {
     border-left: 0.4em solid rgba($primary-color, .8);
-    padding-left: 1em;
+    padding: .5em 1em;
   }
+
   img {
     max-width: 100%;
   }
diff --git a/exampleSite/content/posts/test-1.md b/exampleSite/content/posts/test-1.md
index 2b2d622..8675550 100644
--- a/exampleSite/content/posts/test-1.md
+++ b/exampleSite/content/posts/test-1.md
@@ -7,5 +7,29 @@ date = "1012-01-01"
 Test 1
 I am referencing a footnote[^1]
 
+```go {linenos=inline}
+package main
+
+import "fmt"
+
+func main() {
+  fmt.Println("{linenos=inline}")
+}
+```
+
+```go {linenos=table}
+package main
+
+import "fmt"
+
+func main() {
+  fmt.Println("{linenos=table}")
+}
+```
+
+```
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in dictum tortor.
+Morbi laoreet enim id sem euismod lobortis. Donec quam libero, bibendum non cursus vitae, dictum vel eros.
+```
 
 [^1]: I am the footnote
-- 
cgit v1.2.3