Fix the unsupported code snippets in rouge. (cotes2020#101)

Author: cotes2020

_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 }}

assets/css/_addon/syntax.scss

@@ -30,26 +30,30 @@ html[mode=dark] {
 
 /*-- Codes Snippet --*/
 
-%highlight-pre-bg {
+%code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
 %code-snippet-radius {
   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 */
 }
 
 .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;
     }
   }
 }