From d6a168f9256a38ce9a1367eefcf644cb0a31430b Mon Sep 17 00:00:00 2001
From: HugoGranstrom <5092565+HugoGranstrom@users.noreply.github.com>
Date: Mon, 10 Jul 2023 17:12:41 +0200
Subject: [PATCH 1/6] add styling to code blocks

---
 src/nimib/renders.nim |  2 ++
 src/nimib/themes.nim  | 17 +++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/src/nimib/renders.nim b/src/nimib/renders.nim
index cbcd9b79..e8f1bbe5 100644
--- a/src/nimib/renders.nim
+++ b/src/nimib/renders.nim
@@ -20,6 +20,8 @@ proc useHtmlBackend*(doc: var NbDoc) =
   doc.partials["nbCapture"] = """{{>nbCodeOutput}}"""
   doc.partials["nbCodeSource"] = "<pre><code class=\"nohighlight hljs nim\">{{&codeHighlighted}}</code></pre>"
   doc.partials["nbCodeOutput"] = """{{#output}}<pre class="nb-output">{{output}}</pre>{{/output}}"""
+  doc.partials["nbCodeSource"] = "<pre class=\"nb-code\"><code class=\"nohighlight hljs nim nb-code\">{{&codeHighlighted}}</code></pre>"
+  doc.partials["nbCodeOutput"] = """{{#output}}<pre class="nb-output">{{output}}</pre>{{/output}}"""
   doc.partials["nimibCode"] = doc.partials["nbCode"]
   doc.partials["nbImage"] = """<figure>
 <img src="{{url}}" alt="{{alt_text}}">
diff --git a/src/nimib/themes.nim b/src/nimib/themes.nim
index 94db5670..22d5a019 100644
--- a/src/nimib/themes.nim
+++ b/src/nimib/themes.nim
@@ -76,6 +76,23 @@ pre > code {
 }
 .nb-output {
   line-height: 1.15;
+  padding: 0.5rem;
+  margin-top: 0px;
+  border-color: #E8ECF0;
+  border-radius: 0px 0px 6px 6px;
+  border-width: 1px;
+  border-style: solid;
+  border-top-style: none;
+}
+.nb-code { 
+  background: #F3F6F8;
+  margin-bottom: 0px;
+  border-radius: 6px 6px 0px 0px;
+}
+pre.nb-code {
+  border-color: #E8ECF0;
+  border-width: 1px;
+  border-style: solid;
 }
 figure {
   margin: 2rem 0;

From ed06aa7d176bf6ab935ec382a6a60324cd2b4c96 Mon Sep 17 00:00:00 2001
From: HugoGranstrom <5092565+HugoGranstrom@users.noreply.github.com>
Date: Tue, 11 Jul 2023 15:49:49 +0200
Subject: [PATCH 2/6] don't use hardcoded background color

---
 src/nimib/themes.nim | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/nimib/themes.nim b/src/nimib/themes.nim
index 22d5a019..a3e51dc9 100644
--- a/src/nimib/themes.nim
+++ b/src/nimib/themes.nim
@@ -85,7 +85,6 @@ pre > code {
   border-top-style: none;
 }
 .nb-code { 
-  background: #F3F6F8;
   margin-bottom: 0px;
   border-radius: 6px 6px 0px 0px;
 }

From 18f7f600b9971f002f5bb029ac74d2e8541cbe35 Mon Sep 17 00:00:00 2001
From: HugoGranstrom <5092565+HugoGranstrom@users.noreply.github.com>
Date: Thu, 10 Aug 2023 18:39:04 +0200
Subject: [PATCH 3/6] fix rounded corners

---
 src/nimib/renders.nim |  4 +---
 src/nimib/themes.nim  | 12 +++++++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/nimib/renders.nim b/src/nimib/renders.nim
index e8f1bbe5..29426b41 100644
--- a/src/nimib/renders.nim
+++ b/src/nimib/renders.nim
@@ -18,9 +18,7 @@ proc useHtmlBackend*(doc: var NbDoc) =
 {{>nbCodeOutput}}"""
   doc.partials["nbCodeSkip"] = """{{>nbCodeSource}}"""
   doc.partials["nbCapture"] = """{{>nbCodeOutput}}"""
-  doc.partials["nbCodeSource"] = "<pre><code class=\"nohighlight hljs nim\">{{&codeHighlighted}}</code></pre>"
-  doc.partials["nbCodeOutput"] = """{{#output}}<pre class="nb-output">{{output}}</pre>{{/output}}"""
-  doc.partials["nbCodeSource"] = "<pre class=\"nb-code\"><code class=\"nohighlight hljs nim nb-code\">{{&codeHighlighted}}</code></pre>"
+  doc.partials["nbCodeSource"] = """<pre class="nb-code-pre {{#output}}nb-code-pre-sharp-corner{{/output}}"><code class="nohighlight hljs nim nb-code">{{&codeHighlighted}}</code></pre>"""
   doc.partials["nbCodeOutput"] = """{{#output}}<pre class="nb-output">{{output}}</pre>{{/output}}"""
   doc.partials["nimibCode"] = doc.partials["nbCode"]
   doc.partials["nbImage"] = """<figure>
diff --git a/src/nimib/themes.nim b/src/nimib/themes.nim
index a3e51dc9..274e7629 100644
--- a/src/nimib/themes.nim
+++ b/src/nimib/themes.nim
@@ -85,14 +85,20 @@ pre > code {
   border-top-style: none;
 }
 .nb-code { 
-  margin-bottom: 0px;
-  border-radius: 6px 6px 0px 0px;
+  border-radius: inherit;
 }
-pre.nb-code {
+.nb-code-pre {
   border-color: #E8ECF0;
   border-width: 1px;
   border-style: solid;
+  border-radius: 6px 6px 6px 6px;
+  margin-bottom: 0px;
 }
+
+.nb-code-pre-sharp-corner {
+  border-radius: 6px 6px 0px 0px;
+}
+
 figure {
   margin: 2rem 0;
 }

From b7ba08db5fd951a4111a7be5e548877fdc4e9fbb Mon Sep 17 00:00:00 2001
From: HugoGranstrom <5092565+HugoGranstrom@users.noreply.github.com>
Date: Thu, 10 Aug 2023 18:44:39 +0200
Subject: [PATCH 4/6] fix tests

---
 tests/trenders.nim | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/trenders.nim b/tests/trenders.nim
index 1341b206..13b979df 100644
--- a/tests/trenders.nim
+++ b/tests/trenders.nim
@@ -11,12 +11,12 @@ suite "render (block), html default backend":
 
   test "nbCode without output":
     nbCode: discard
-    check nb.render(nb.blk).strip == """<pre><code class="nohighlight hljs nim"><span class="hljs-keyword">discard</span></code></pre>"""
+    check nb.render(nb.blk).strip == """<pre class="nb-code-pre "><code class="nohighlight hljs nim nb-code"><span class="hljs-keyword">discard</span></code></pre>"""
 
   test "nbCode with output":
     nbCode: echo "hi"
     check nb.render(nb.blk).strip == """
-<pre><code class="nohighlight hljs nim"><span class="hljs-keyword">echo</span> <span class="hljs-string">&quot;hi&quot;</span></code></pre><pre class="nb-output">hi</pre>"""
+<pre class="nb-code-pre nb-code-pre-sharp-corner"><code class="nohighlight hljs nim nb-code"><span class="hljs-keyword">echo</span> <span class="hljs-string">&quot;hi&quot;</span></code></pre><pre class="nb-output">hi</pre>"""
 
 # switch to markdown backend
 useMdBackend nb

From 2eaaf7e474be2822e9e37b8b74345931f9edf432 Mon Sep 17 00:00:00 2001
From: HugoGranstrom <5092565+HugoGranstrom@users.noreply.github.com>
Date: Thu, 10 Aug 2023 19:10:28 +0200
Subject: [PATCH 5/6] half fix for nbCapture

---
 src/nimib/themes.nim | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/nimib/themes.nim b/src/nimib/themes.nim
index 274e7629..dd46ea1f 100644
--- a/src/nimib/themes.nim
+++ b/src/nimib/themes.nim
@@ -79,11 +79,16 @@ pre > code {
   padding: 0.5rem;
   margin-top: 0px;
   border-color: #E8ECF0;
-  border-radius: 0px 0px 6px 6px;
+  border-radius: 6px 6px 6px 6px;
   border-width: 1px;
   border-style: solid;
+}
+.nb-code-pre + .nb-output {
+  border-radius: 0px 0px 6px 6px;
   border-top-style: none;
 }
+
+
 .nb-code { 
   border-radius: inherit;
 }

From c8ca2d62fa794955ee680ec85c88438918bcbf57 Mon Sep 17 00:00:00 2001
From: HugoGranstrom <5092565+HugoGranstrom@users.noreply.github.com>
Date: Thu, 10 Aug 2023 19:11:26 +0200
Subject: [PATCH 6/6] set overflow: auto for nbOutput so the output becomes
 scrollable if it is too long

---
 src/nimib/themes.nim | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/nimib/themes.nim b/src/nimib/themes.nim
index dd46ea1f..052f96ed 100644
--- a/src/nimib/themes.nim
+++ b/src/nimib/themes.nim
@@ -82,6 +82,7 @@ pre > code {
   border-radius: 6px 6px 6px 6px;
   border-width: 1px;
   border-style: solid;
+  overflow-x: auto;
 }
 .nb-code-pre + .nb-output {
   border-radius: 0px 0px 6px 6px;