From a8f8bbaa1c4f8c8eaae8db351d093d86b7f0e236 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 15 Aug 2020 21:05:48 +0800
Subject: [PATCH] Fix the unsupported code snippets in rouge. (#101)

---
 _includes/refactor-content.html |  4 ++--
 assets/css/_addon/syntax.scss   | 20 +++++++++++++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index 605d24a..876d66e 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -20,8 +20,8 @@
   https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
 -->
 {% if _content contains '<pre class="highlight">' %}
-  {% assign _content = _content | replace: '<pre class="highlight"><code', '<code' %}
-  {% assign _content = _content | replace: '</code></pre>', '</code>' %}
+  {% assign _content = _content | replace: '<div class="highlight"><pre class="highlight"><code', '<div class="highlight"><code' %}
+  {% assign _content = _content | replace: '</code></pre></div>', '</code></div>' %}
 {% endif %}
 
 {{ _content }}
diff --git a/assets/css/_addon/syntax.scss b/assets/css/_addon/syntax.scss
index 538c262..bafcf81 100644
--- a/assets/css/_addon/syntax.scss
+++ b/assets/css/_addon/syntax.scss
@@ -30,7 +30,7 @@ html[mode=dark] {
 
 /*-- Codes Snippet --*/
 
-%highlight-pre-bg {
+%code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
@@ -38,8 +38,12 @@ html[mode=dark] {
   border-radius: 5px;
 }
 
+%code-snippet-padding {
+  padding: .8rem 1rem;
+}
+
 .highlighter-rouge {
-  background-color: var(--highlight-bg-color);
+  @extend %code-snippet-bg;
   @extend %code-snippet-radius;
   color: var(--highlighter-rouge-color);
   margin-bottom: 1.2em; /* Override BS Inline-code style */
@@ -47,9 +51,9 @@ html[mode=dark] {
 
 .highlight {
   @extend %code-snippet-radius;
-  background: var(--highlight-bg-color);
+  @extend %code-snippet-bg;
   @at-root figure#{&} {
-    background: var(--highlight-bg-color);
+    @extend %code-snippet-bg;
   }
   overflow: auto;
   .lineno {
@@ -116,6 +120,12 @@ td.rouge-code {
   padding-right: 1rem;
 }
 
+div>pre {
+  @extend %code-snippet-bg;
+  @extend %code-snippet-radius;
+  @extend %code-snippet-padding;
+}
+
 /* Hide line numbers for default, console, and terminal code snippets */
 div {
   &[class^='highlighter-rouge'],
@@ -126,7 +136,7 @@ div {
       display: none;
     }
     td.rouge-code {
-      padding: .8rem 1rem;
+      @extend %code-snippet-padding;
     }
   }
 }