steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-04-22 02:52:23 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix AsciiDoc code block styling (#1168)

Browse Source 
These changes accommodate for some difference in the HTML structure AsciiDoc produces for source code listings:

 * proper padding for source code listings
 * proper vertical margin after source code listings
 * proper placement of the copy button if enabled

Closes #1163
This commit is contained in:
flyx 2023-02-19 02:27:44 +01:00 committed by GitHub
parent f8e93980b4
commit fdf48d2fd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
_sass/code.scss
View File

@ -50,6 +50,11 @@ a:visited code {
// Kramdown line_numbers = true: fences have a wider gutter than with Liquid? // Kramdown line_numbers = true: fences have a wider gutter than with Liquid?
// ```[LANG]...``` // ```[LANG]...```
// or in AsciiDoc:
//
// ----
// ...
// ----
// the code may appear with 3 different types: // the code may appear with 3 different types:
// container \ case: default case, code with line number, code with html rendering // container \ case: default case, code with line number, code with html rendering
@ -59,6 +64,7 @@ a:visited code {
// last level: code, pre, code (optionality) // last level: code, pre, code (optionality)
// highlighter level: span, span, span // highlighter level: span, span, span
// the spacing are only in the second level for case 1, 3 and in the third level for case 2 // the spacing are only in the second level for case 1, 3 and in the third level for case 2
// in AsciiDoc, there is a parent container that contains optionally a title and the content.
// select top level container // select top level container
div.highlighter-rouge, div.highlighter-rouge,
@ -111,17 +117,17 @@ figure.highlight {
} }
// setting the spacing and scrollbar on the second level for the first case // setting the spacing and scrollbar on the second level for the first case
// remove all space on the second and thirt level // remove all space on the second and third level
div.highlighter-rouge, // this is a mixin to accommodate for the slightly different structures generated via Markdown vs AsciiDoc
div.listingblock { @mixin scroll-and-spacing($code-div, $pre-select) {
div.highlight { #{$code-div} {
overflow-x: auto; overflow-x: auto;
padding: $sp-3; padding: $sp-3;
margin: 0; margin: 0;
border: 0; border: 0;
} }
pre.highlight, #{$pre-select},
code { code {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -129,6 +135,19 @@ div.listingblock {
} }
} }
// for Markdown
div.highlighter-rouge {
@include scroll-and-spacing("div.highlight", "pre.highlight");
}
// for AsciiDoc. we also need to fix the margins for its parent container.
div.listingblock {
@include scroll-and-spacing("div.content", "div.content > pre");
margin-top: 0;
margin-bottom: $sp-3;
}
// {% highlight LANG %}...{% endhighlight %}, // {% highlight LANG %}...{% endhighlight %},
// {% highlight LANG linenos %}...{% endhighlight %}: // {% highlight LANG linenos %}...{% endhighlight %}:

2
assets/js/just-the-docs.js
View File

@ -488,7 +488,7 @@ jtd.onReady(function(){
jtd.onReady(function(){ jtd.onReady(function(){
var codeBlocks = document.querySelectorAll('div.highlighter-rouge, div.listingblock, figure.highlight'); var codeBlocks = document.querySelectorAll('div.highlighter-rouge, div.listingblock > div.content, figure.highlight');
// note: the SVG svg-copied and svg-copy is only loaded as a Jekyll include if site.enable_copy_code_button is true; see _includes/icons/icons.html // note: the SVG svg-copied and svg-copy is only loaded as a Jekyll include if site.enable_copy_code_button is true; see _includes/icons/icons.html
var svgCopied = '<svg viewBox="0 0 24 24" class="copy-icon"><use xlink:href="#svg-copied"></use></svg>'; var svgCopied = '<svg viewBox="0 0 24 24" class="copy-icon"><use xlink:href="#svg-copied"></use></svg>';