From 61bdb663e0818f90714fd59e4980091b283ecd82 Mon Sep 17 00:00:00 2001
From: Thomas Hebb <tch@meta.com>
Date: Wed, 23 Aug 2023 14:51:12 -0400
Subject: [PATCH 1/3] Replace highlight.js with server-side Rouge highlighting

Jekyll 3 and 4 process code blocks by default using Rouge[1], which adds
<span>s of various classes to the code indicating how different parts
should be highlighted. So to highlight code, all a theme needs to do is
include an appropriate stylesheet, which can be easily created for a
variety of color schemes using Rouge's `rougify style` command.

YAT, however, ignores the Rouge highlighting and instead includes
highlight.js, which does its own highlighting client-side. That
increases both bandwidth and client CPU usage for no clear benefit.
Furthermore, it tries to guess a language if none is specified even if
`guess_lang` is turned off in Jekyll's configuration, since `guess_lang`
only affects Rouge.

Let me know if there's a good reason to prefer highlight.js over Rouge,
but to me it it just looks like extra complexity for no gain. As such,
this change removes it and adds a Rouge stylesheet instead.

[1] https://github.com/rouge-ruby/rouge
---
 README.md                                |   4 +-
 _config.yml                              |  16 +++-
 _includes/extensions/code-highlight.html |  14 +--
 _sass/yat/_base.scss                     |   1 -
 _sass/yat/_dark.scss                     |   1 -
 assets/css/code-highlight-rouge.css      | 112 +++++++++++++++++++++++
 6 files changed, 133 insertions(+), 15 deletions(-)
 create mode 100644 assets/css/code-highlight-rouge.css

diff --git a/README.md b/README.md
index 573b8c7e02a..2471415497d 100644
--- a/README.md
+++ b/README.md
@@ -85,7 +85,7 @@ I will respect your crucial support and say THANK YOU!
 - Full layouts `home`, `post`, `tags`, `archive` and `about`.
 - Uses font awesome 5 for icons.
 - Beautiful page banner with image and video.
-- Beautiful Syntax Highlight using [highlight.js][highlight-js].
+- Beautiful Syntax Highlight with overridable [Rouge][rouge] themes.
 - RSS support using [Jekyll Feed][jekyll-feed] gem.
 - Optimized for search engines using [Jekyll Seo Tag][jekyll-seo-tag] gem.
 - Sitemap support using [Jekyll Sitemap][jekyll-sitemap] gem.
@@ -197,4 +197,4 @@ This theme is licensed under the [MIT license](https://opensource.org/licenses/m
 [jekyll-seo-tag]: https://github.com/jekyll/jekyll-seo-tag
 [jekyll-sitemap]: https://github.com/jekyll/jekyll-sitemap
 [jekyll-feed]: https://github.com/jekyll/jekyll-feed
-[highlight-js]: https://github.com/highlightjs/highlight.js
+[rouge]: https://github.com/rouge-ruby/rouge
diff --git a/_config.yml b/_config.yml
index 9724c6b9f5c..e1b138d0cee 100644
--- a/_config.yml
+++ b/_config.yml
@@ -150,6 +150,21 @@ yat:
 #   background_color: "#ff4e00"
 #   text_transform: "uppercase"  # ("uppercase", "lowercase", "capitalize")
 
+# Code highlighting setting
+# This is a Jekyll setting rather than a theme setting, but the theme includes
+# stylesheets to highlight code when the Rouge highlighter (the default) is in
+# use. This setting affects both Markdown code blocks and Liquid `highlight`
+# blocks. You can set it to `none` to disable highlighting.
+#
+# By default, we highlight code with Rouge's "github.light" theme. If you want
+# to change that, you can override `assets/css/code-highlight-rouge.css` with a
+# different stylesheet generated with Rouge's `rougify` command. If you do so,
+# you must set the CSS scope to `.highlight pre` for proper rendering:
+#
+#   $ mkdir -p assets/css
+#   $ bundle exec rougify style --scope '.highlight pre' <THEME> >assets/css/code-highlight-rouge.css
+# highlighter: rouge
+
 # If you want to link only specific pages in your header, uncomment
 # this and add the path to the pages in order as they should show up
 # header_pages:
@@ -233,7 +248,6 @@ yat:
 #   follow_site_theme: true
 
 # Build settings
-# highlighter: none
 markdown: kramdown
 kramdown:
   input: GFM
diff --git a/_includes/extensions/code-highlight.html b/_includes/extensions/code-highlight.html
index b7c6399f15c..f2750d8940c 100644
--- a/_includes/extensions/code-highlight.html
+++ b/_includes/extensions/code-highlight.html
@@ -1,9 +1,4 @@
-<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css">
-<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
-<!-- and it's easy to individually load additional languages -->
-<script charset="UTF-8"
-        src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/languages/go.min.js"
-        async></script>
+<link rel="stylesheet" href="{{ "/assets/css/code-highlight-rouge.css" | relative_url }}">
 
 {%- assign name = 'code_badge.enabled' -%}
 {%- include functions.html func='get_value' default='true' -%}
@@ -21,8 +16,8 @@
 {%- include functions.html func='get_value' default='uppercase' -%}
 {%- assign badge_text_transform = return -%}
 
+{%- if badge_enabled -%}
 <script>
-// Init highlight js
 document.addEventListener('DOMContentLoaded', function(event) {
   var els = document.querySelectorAll('pre code')
 
@@ -38,12 +33,11 @@
     }
     if (!lang) {
       cls = block.getAttribute('class');
-      lang = cls ? cls.replace('hljs ', '') : '';
+      lang = cls ? cls : '';
     }
     if (lang.startsWith('language-')) {
       lang = lang.substr(9);
     }
-    block.setAttribute('class', 'hljs ' + lang);
     block.parentNode.setAttribute('data-lang', lang);
   }
 
@@ -58,7 +52,6 @@
   function handle(block) {
     addLangData(block);
     addBadge(block)
-    hljs.highlightBlock(block);
   }
 
   for (var i = 0; i < els.length; i++) {
@@ -89,3 +82,4 @@
     display: none;
   }
 </style>
+{%- endif -%}
diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss
index cb83d82b81c..be1f842e5e6 100644
--- a/_sass/yat/_base.scss
+++ b/_sass/yat/_base.scss
@@ -146,7 +146,6 @@ blockquote {
 pre,
 code {
   @include relative-font-size(0.9375);
-  color: $text-color;
 }
 
 *:not(pre) > code {
diff --git a/_sass/yat/_dark.scss b/_sass/yat/_dark.scss
index a23896d6160..d9945fed122 100644
--- a/_sass/yat/_dark.scss
+++ b/_sass/yat/_dark.scss
@@ -27,7 +27,6 @@ html[data-theme="dark"]  {
   }
 
   *:not(pre) > code {
-    color: $dark-text-color;
     background-color: #454545;
   }
 
diff --git a/assets/css/code-highlight-rouge.css b/assets/css/code-highlight-rouge.css
new file mode 100644
index 00000000000..000faaa68da
--- /dev/null
+++ b/assets/css/code-highlight-rouge.css
@@ -0,0 +1,112 @@
+.highlight pre table td { padding: 5px; }
+.highlight pre table pre { margin: 0; }
+.highlight pre, .highlight pre .w {
+  color: #24292f;
+  background-color: #f6f8fa;
+}
+.highlight pre .k, .highlight pre .kd, .highlight pre .kn, .highlight pre .kp, .highlight pre .kr, .highlight pre .kt, .highlight pre .kv {
+  color: #cf222e;
+}
+.highlight pre .gr {
+  color: #f6f8fa;
+}
+.highlight pre .gd {
+  color: #82071e;
+  background-color: #ffebe9;
+}
+.highlight pre .nb {
+  color: #953800;
+}
+.highlight pre .nc {
+  color: #953800;
+}
+.highlight pre .no {
+  color: #953800;
+}
+.highlight pre .nn {
+  color: #953800;
+}
+.highlight pre .sr {
+  color: #116329;
+}
+.highlight pre .na {
+  color: #116329;
+}
+.highlight pre .nt {
+  color: #116329;
+}
+.highlight pre .gi {
+  color: #116329;
+  background-color: #dafbe1;
+}
+.highlight pre .kc {
+  color: #0550ae;
+}
+.highlight pre .l, .highlight pre .ld, .highlight pre .m, .highlight pre .mb, .highlight pre .mf, .highlight pre .mh, .highlight pre .mi, .highlight pre .il, .highlight pre .mo, .highlight pre .mx {
+  color: #0550ae;
+}
+.highlight pre .sb {
+  color: #0550ae;
+}
+.highlight pre .bp {
+  color: #0550ae;
+}
+.highlight pre .ne {
+  color: #0550ae;
+}
+.highlight pre .nl {
+  color: #0550ae;
+}
+.highlight pre .py {
+  color: #0550ae;
+}
+.highlight pre .nv, .highlight pre .vc, .highlight pre .vg, .highlight pre .vi, .highlight pre .vm {
+  color: #0550ae;
+}
+.highlight pre .o, .highlight pre .ow {
+  color: #0550ae;
+}
+.highlight pre .gh {
+  color: #0550ae;
+  font-weight: bold;
+}
+.highlight pre .gu {
+  color: #0550ae;
+  font-weight: bold;
+}
+.highlight pre .s, .highlight pre .sa, .highlight pre .sc, .highlight pre .dl, .highlight pre .sd, .highlight pre .s2, .highlight pre .se, .highlight pre .sh, .highlight pre .sx, .highlight pre .s1, .highlight pre .ss {
+  color: #0a3069;
+}
+.highlight pre .nd {
+  color: #8250df;
+}
+.highlight pre .nf, .highlight pre .fm {
+  color: #8250df;
+}
+.highlight pre .err {
+  color: #f6f8fa;
+  background-color: #82071e;
+}
+.highlight pre .c, .highlight pre .ch, .highlight pre .cd, .highlight pre .cm, .highlight pre .cp, .highlight pre .cpf, .highlight pre .c1, .highlight pre .cs {
+  color: #6e7781;
+}
+.highlight pre .gl {
+  color: #6e7781;
+}
+.highlight pre .gt {
+  color: #6e7781;
+}
+.highlight pre .ni {
+  color: #24292f;
+}
+.highlight pre .si {
+  color: #24292f;
+}
+.highlight pre .ge {
+  color: #24292f;
+  font-style: italic;
+}
+.highlight pre .gs {
+  color: #24292f;
+  font-weight: bold;
+}

From 1a91020445cbe380927ca5d91fbdb651cac02172 Mon Sep 17 00:00:00 2001
From: Thomas Hebb <tch@meta.com>
Date: Thu, 24 Aug 2023 09:58:54 -0400
Subject: [PATCH 2/3] Add a dark theme for code blocks

Now that code highlighting is just a normal stylesheet, it's easy to add
a separate set of dark-mode rules. Do so and update the documentation.

Fixes #24
---
 _config.yml                         |  15 +++-
 _sass/yat/_dark.scss                |   4 +
 assets/css/code-highlight-rouge.css | 112 ++++++++++++++++++++++++++++
 3 files changed, 127 insertions(+), 4 deletions(-)

diff --git a/_config.yml b/_config.yml
index e1b138d0cee..42a3d3b1ebe 100644
--- a/_config.yml
+++ b/_config.yml
@@ -156,13 +156,20 @@ yat:
 # use. This setting affects both Markdown code blocks and Liquid `highlight`
 # blocks. You can set it to `none` to disable highlighting.
 #
-# By default, we highlight code with Rouge's "github.light" theme. If you want
-# to change that, you can override `assets/css/code-highlight-rouge.css` with a
-# different stylesheet generated with Rouge's `rougify` command. If you do so,
-# you must set the CSS scope to `.highlight pre` for proper rendering:
+# By default, we highlight code with Rouge's "github.light" and `github.dark`
+# themes for light and dark mode, respectively. If you want to change that, you
+# can override `assets/css/code-highlight-rouge.css` with a different
+# stylesheet generated with Rouge's `rougify` command. If you do so, you must
+# set the CSS scope to `.highlight pre` for your light-mode theme:
 #
 #   $ mkdir -p assets/css
 #   $ bundle exec rougify style --scope '.highlight pre' <THEME> >assets/css/code-highlight-rouge.css
+#
+# ...and to `html[data-theme="dark"] .highlight pre` for your dark-mode theme.
+# A dark-mode theme is optional, but if you want one just append its stylesheet
+# to the same CSS file (note the >>):
+#
+#   $ bundle exec rougify style --scope 'html[data-theme="dark"] .highlight pre' <DARK_THEME> >>assets/css/code-highlight-rouge.css
 # highlighter: rouge
 
 # If you want to link only specific pages in your header, uncomment
diff --git a/_sass/yat/_dark.scss b/_sass/yat/_dark.scss
index d9945fed122..5c388726180 100644
--- a/_sass/yat/_dark.scss
+++ b/_sass/yat/_dark.scss
@@ -30,6 +30,10 @@ html[data-theme="dark"]  {
     background-color: #454545;
   }
 
+  pre {
+    background-color: #222;
+  }
+
   blockquote {
     border-left: 4px solid #484848;
   }
diff --git a/assets/css/code-highlight-rouge.css b/assets/css/code-highlight-rouge.css
index 000faaa68da..e74c4056264 100644
--- a/assets/css/code-highlight-rouge.css
+++ b/assets/css/code-highlight-rouge.css
@@ -110,3 +110,115 @@
   color: #24292f;
   font-weight: bold;
 }
+html[data-theme="dark"] .highlight pre table td { padding: 5px; }
+html[data-theme="dark"] .highlight pre table pre { margin: 0; }
+html[data-theme="dark"] .highlight pre, html[data-theme="dark"] .highlight pre .w {
+  color: #c9d1d9;
+  background-color: #161b22;
+}
+html[data-theme="dark"] .highlight pre .k, html[data-theme="dark"] .highlight pre .kd, html[data-theme="dark"] .highlight pre .kn, html[data-theme="dark"] .highlight pre .kp, html[data-theme="dark"] .highlight pre .kr, html[data-theme="dark"] .highlight pre .kt, html[data-theme="dark"] .highlight pre .kv {
+  color: #ff7b72;
+}
+html[data-theme="dark"] .highlight pre .gr {
+  color: #f0f6fc;
+}
+html[data-theme="dark"] .highlight pre .gd {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+html[data-theme="dark"] .highlight pre .nb {
+  color: #ffa657;
+}
+html[data-theme="dark"] .highlight pre .nc {
+  color: #ffa657;
+}
+html[data-theme="dark"] .highlight pre .no {
+  color: #ffa657;
+}
+html[data-theme="dark"] .highlight pre .nn {
+  color: #ffa657;
+}
+html[data-theme="dark"] .highlight pre .sr {
+  color: #7ee787;
+}
+html[data-theme="dark"] .highlight pre .na {
+  color: #7ee787;
+}
+html[data-theme="dark"] .highlight pre .nt {
+  color: #7ee787;
+}
+html[data-theme="dark"] .highlight pre .gi {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+html[data-theme="dark"] .highlight pre .kc {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .l, html[data-theme="dark"] .highlight pre .ld, html[data-theme="dark"] .highlight pre .m, html[data-theme="dark"] .highlight pre .mb, html[data-theme="dark"] .highlight pre .mf, html[data-theme="dark"] .highlight pre .mh, html[data-theme="dark"] .highlight pre .mi, html[data-theme="dark"] .highlight pre .il, html[data-theme="dark"] .highlight pre .mo, html[data-theme="dark"] .highlight pre .mx {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .sb {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .bp {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .ne {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .nl {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .py {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .nv, html[data-theme="dark"] .highlight pre .vc, html[data-theme="dark"] .highlight pre .vg, html[data-theme="dark"] .highlight pre .vi, html[data-theme="dark"] .highlight pre .vm {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .o, html[data-theme="dark"] .highlight pre .ow {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .gh {
+  color: #1f6feb;
+  font-weight: bold;
+}
+html[data-theme="dark"] .highlight pre .gu {
+  color: #1f6feb;
+  font-weight: bold;
+}
+html[data-theme="dark"] .highlight pre .s, html[data-theme="dark"] .highlight pre .sa, html[data-theme="dark"] .highlight pre .sc, html[data-theme="dark"] .highlight pre .dl, html[data-theme="dark"] .highlight pre .sd, html[data-theme="dark"] .highlight pre .s2, html[data-theme="dark"] .highlight pre .se, html[data-theme="dark"] .highlight pre .sh, html[data-theme="dark"] .highlight pre .sx, html[data-theme="dark"] .highlight pre .s1, html[data-theme="dark"] .highlight pre .ss {
+  color: #a5d6ff;
+}
+html[data-theme="dark"] .highlight pre .nd {
+  color: #d2a8ff;
+}
+html[data-theme="dark"] .highlight pre .nf, html[data-theme="dark"] .highlight pre .fm {
+  color: #d2a8ff;
+}
+html[data-theme="dark"] .highlight pre .err {
+  color: #f0f6fc;
+  background-color: #8e1519;
+}
+html[data-theme="dark"] .highlight pre .c, html[data-theme="dark"] .highlight pre .ch, html[data-theme="dark"] .highlight pre .cd, html[data-theme="dark"] .highlight pre .cm, html[data-theme="dark"] .highlight pre .cp, html[data-theme="dark"] .highlight pre .cpf, html[data-theme="dark"] .highlight pre .c1, html[data-theme="dark"] .highlight pre .cs {
+  color: #8b949e;
+}
+html[data-theme="dark"] .highlight pre .gl {
+  color: #8b949e;
+}
+html[data-theme="dark"] .highlight pre .gt {
+  color: #8b949e;
+}
+html[data-theme="dark"] .highlight pre .ni {
+  color: #c9d1d9;
+}
+html[data-theme="dark"] .highlight pre .si {
+  color: #c9d1d9;
+}
+html[data-theme="dark"] .highlight pre .ge {
+  color: #c9d1d9;
+  font-style: italic;
+}
+html[data-theme="dark"] .highlight pre .gs {
+  color: #c9d1d9;
+  font-weight: bold;
+}

From 994e176b6cccbcab14adfa55d0d9c648d6ac7b3b Mon Sep 17 00:00:00 2001
From: Thomas Hebb <tch@meta.com>
Date: Wed, 23 Aug 2023 18:33:45 -0400
Subject: [PATCH 3/3] Prevent code badges from scrolling along with code

The `::before` trick we've been using to add badges has never interacted
well with the `overflow-x: auto` we set on the parent `<pre>`:
`position: absolute` positions relative to the unscrolled container and
doesn't "stick" when the container is scrolled, resulting in the badge
leaving the right edge of the block when wide code is scrolled.

Until now, that issue has been masked by the fact that highlight.js
gives the `<code>` its own `overflow-x: auto`. Since we've stopped using
highlight.js, we need to fix the issue properly.

The root cause is described well in this article[1]. As it demonstrates,
all solutions not involving an extra wrapper div take a lot of code and
are pretty hacky. In addition, the last example--closest to our case--
requires the badge itself to have nested divs, which can't be done with
`::before`.

As such, just use JS to add a wrapper div, which actually simplifies
both the CSS and the JS significantly.

[1] https://www.horuskol.net/blog/2022-04-13/relative-and-absolute-scrolling-blues/
---
 _includes/extensions/code-highlight.html | 98 +++++++++++++-----------
 _sass/yat/_base.scss                     |  9 +--
 2 files changed, 53 insertions(+), 54 deletions(-)

diff --git a/_includes/extensions/code-highlight.html b/_includes/extensions/code-highlight.html
index f2750d8940c..c5782cc96ab 100644
--- a/_includes/extensions/code-highlight.html
+++ b/_includes/extensions/code-highlight.html
@@ -19,67 +19,73 @@
 {%- if badge_enabled -%}
 <script>
 document.addEventListener('DOMContentLoaded', function(event) {
-  var els = document.querySelectorAll('pre code')
-
-  function addLangData(block) {
-    var outer = block.parentElement.parentElement.parentElement;
-    var lang = block.getAttribute('data-lang');
-    for (var i = 0; i < outer.classList.length; i++) {
-      var cls = outer.classList[i];
+  function getLangFromClass(elem) {
+    for (cls of elem.classList) {
       if (cls.startsWith('language-')) {
-        lang = cls;
-        break;
+        return cls.substr(9);
       }
     }
-    if (!lang) {
-      cls = block.getAttribute('class');
-      lang = cls ? cls : '';
-    }
-    if (lang.startsWith('language-')) {
-      lang = lang.substr(9);
-    }
-    block.parentNode.setAttribute('data-lang', lang);
+    return null;
   }
 
-  function addBadge(block) {
-    var enabled = ('{{ badge_enabled }}' || 'true').toLowerCase();
-    if (enabled == 'true') {
-      var pre = block.parentElement;
-      pre.classList.add('badge');
-    }
-  }
+  function addBadge(preElem, lang) {
+    let badgeWrapper = document.createElement('div');
+    badgeWrapper.classList.add('badge-wrapper')
 
-  function handle(block) {
-    addLangData(block);
-    addBadge(block)
-  }
+    let badge = document.createElement('div');
+    badge.classList.add('badge');
+    badge.append(lang);
 
-  for (var i = 0; i < els.length; i++) {
-    var el = els[i];
-    handle(el);
+    preElem.replaceWith(badgeWrapper);
+    badgeWrapper.append(badge, preElem);
   }
+
+  // Kramdown code blocks (Rouge highlighter):
+  //   div.highlighter_rouge.language-XXX > div.highlight > pre.highlight > code
+  document.querySelectorAll('.highlighter-rouge').forEach((e) => {
+    let pre = e.querySelector('pre');
+    if (pre !== null) {
+      let lang = getLangFromClass(e);
+      if (lang !== null) {
+        addBadge(pre, lang);
+      }
+    }
+  });
+
+  // Liquid code blocks (any highlighter):
+  //   figure.highlight > pre > code.language-XXX[data-lang="XXX"]
+  // Kramdown code blocks (no highlighter):
+  //   pre > code.language-XXX
+  document.querySelectorAll('pre > code').forEach((e) => {
+    let lang = e.hasAttribute('data-lang')
+      ? e.getAttribute('data-lang')   // Liquid
+      : getLangFromClass(e);          // Kramdown
+
+    if (lang !== null) {
+      addBadge(e.parentElement, lang);
+    }
+  });
 });
 </script>
 
 <style>
-  /* code language badge */
-  pre.badge::before {
-    content: attr(data-lang);
-    color: {{badge_color}};
-    background-color: {{badge_background_color}};
-    padding: 0 .5em;
-    border-radius: 0 2px;
-    text-transform: {{badge_text_transform}};
-    text-align: center;
-    min-width: 32px;
-    display: inline-block;
+  .badge-wrapper {
+    position: relative;
+  }
+
+  .badge-wrapper .badge {
     position: absolute;
+    top: 0;
     right: 0;
-  }
 
-  /* fix wrong badge display for firefox browser */
-  code > table pre::before {
-    display: none;
+    min-width: 32px;
+    padding: 0 .5em;
+    border-bottom-left-radius: 2px;
+    text-align: center;
+
+    color: {{badge_color}};
+    background-color: {{badge_background_color}};
+    text-transform: {{badge_text_transform}};
   }
 </style>
 {%- endif -%}
diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss
index be1f842e5e6..e12dc36c171 100644
--- a/_sass/yat/_base.scss
+++ b/_sass/yat/_base.scss
@@ -157,15 +157,8 @@ code {
 
 pre {
   overflow-x: auto;
-  position: relative;
   background-color: #f0f0f0;
-
-  > code {
-    display: inline-block;
-    padding: 20px!important;
-    background-color: transparent;
-    border: 0;
-  }
+  padding: 20px;
 
   table, pre {
     margin-bottom: 0;