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 '
' %}
-  {% assign _content = _content | replace: '
', '' %} + {% assign _content = _content | replace: '
', '' %} {% 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; } } }