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

This commit is contained in:
Cotes Chung 2020-08-15 21:05:48 +08:00
parent 188d8ffc69
commit a8f8bbaa1c
2 changed files with 17 additions and 7 deletions

View file

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

View file

@ -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;
}
}
}