Fix the unsupported code snippets in rouge. (#101)
This commit is contained in:
parent
188d8ffc69
commit
a8f8bbaa1c
2 changed files with 17 additions and 7 deletions
|
@ -20,8 +20,8 @@
|
||||||
https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
|
https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
|
||||||
-->
|
-->
|
||||||
{% if _content contains '<pre class="highlight">' %}
|
{% if _content contains '<pre class="highlight">' %}
|
||||||
{% assign _content = _content | replace: '<pre class="highlight"><code', '<code' %}
|
{% assign _content = _content | replace: '<div class="highlight"><pre class="highlight"><code', '<div class="highlight"><code' %}
|
||||||
{% assign _content = _content | replace: '</code></pre>', '</code>' %}
|
{% assign _content = _content | replace: '</code></pre></div>', '</code></div>' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{{ _content }}
|
{{ _content }}
|
||||||
|
|
|
@ -30,7 +30,7 @@ html[mode=dark] {
|
||||||
|
|
||||||
/*-- Codes Snippet --*/
|
/*-- Codes Snippet --*/
|
||||||
|
|
||||||
%highlight-pre-bg {
|
%code-snippet-bg {
|
||||||
background: var(--highlight-bg-color);
|
background: var(--highlight-bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -38,8 +38,12 @@ html[mode=dark] {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
%code-snippet-padding {
|
||||||
|
padding: .8rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.highlighter-rouge {
|
.highlighter-rouge {
|
||||||
background-color: var(--highlight-bg-color);
|
@extend %code-snippet-bg;
|
||||||
@extend %code-snippet-radius;
|
@extend %code-snippet-radius;
|
||||||
color: var(--highlighter-rouge-color);
|
color: var(--highlighter-rouge-color);
|
||||||
margin-bottom: 1.2em; /* Override BS Inline-code style */
|
margin-bottom: 1.2em; /* Override BS Inline-code style */
|
||||||
|
@ -47,9 +51,9 @@ html[mode=dark] {
|
||||||
|
|
||||||
.highlight {
|
.highlight {
|
||||||
@extend %code-snippet-radius;
|
@extend %code-snippet-radius;
|
||||||
background: var(--highlight-bg-color);
|
@extend %code-snippet-bg;
|
||||||
@at-root figure#{&} {
|
@at-root figure#{&} {
|
||||||
background: var(--highlight-bg-color);
|
@extend %code-snippet-bg;
|
||||||
}
|
}
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
.lineno {
|
.lineno {
|
||||||
|
@ -116,6 +120,12 @@ td.rouge-code {
|
||||||
padding-right: 1rem;
|
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 */
|
/* Hide line numbers for default, console, and terminal code snippets */
|
||||||
div {
|
div {
|
||||||
&[class^='highlighter-rouge'],
|
&[class^='highlighter-rouge'],
|
||||||
|
@ -126,7 +136,7 @@ div {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
td.rouge-code {
|
td.rouge-code {
|
||||||
padding: .8rem 1rem;
|
@extend %code-snippet-padding;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue