thang/notes
1
0
Fork 0
mirror of https://github.com/thangisme/notes.git synced 2024-12-22 02:48:58 -05:00
Code Issues Projects Releases Wiki Activity

Update code.scss

Browse Source 
Produces sensible (but not perfect) results from different kinds of highlight markup.
The CSS code needs a major refactoring to eliminate duplication and superflous lines.
This commit is contained in:
PLanCompS 2020-07-06 15:10:35 +02:00
parent b73300595b
commit b5cd532435
1 changed files with 45 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
_sass/code.scss
View File

@ -11,6 +11,34 @@ code {
border-radius: $border-radius; border-radius: $border-radius;
} }
// Content structure for highlighted code blocks using fences or Liquid
//
// ```[LANG]...```, no kramdown line_numbers:
// div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
//
// ```[LANG]...```, kramdown line_numbers = true:
// div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
// > div.table-wrapper > table.rouge-table > tbody > tr
// > td.rouge-gutter.gl > pre.lineno
// | td.rouge-code > pre
//
// {% highlight LANG %}...{% endhighlight %}:
// figure.highlight > pre > code.language-LANG
//
// {% highlight LANG linenos %}...{% endhighlight %}:
// figure.highlight > pre > code.language-LANG
// > div.table-wrapper > table.rouge-table > tbody > tr
// > td.gutter.gl > pre.lineno
// | td.code > pre
//
// fix_linenos removes the outermost pre when it encloses table.rouge-table
//
// See docs/index-test.md for some tests.
//
// No kramdown line_numbers: fences and Liquid highlighting look the same.
// Kramdown line_numbers = true: fences have a wider gutter than with Liquid?
pre.highlight, pre.highlight,
figure.highlight { figure.highlight {
padding: $sp-3; padding: $sp-3;
@ -27,12 +55,11 @@ figure.highlight {
} }
// Using Liquid tags for highlighting, optionally with linenos // Using Liquid tags for highlighting, optionally with linenos
//
// See docs/index-test.md for tests
// Without linenos: figure.highlight > pre > code > div > span* // Without linenos: figure.highlight > pre > code > div > span*
figure.highlight { figure.highlight,
div.highlight {
padding: 0; padding: 0;
margin-top: 0; margin-top: 0;
margin-bottom: $sp-3; margin-bottom: $sp-3;
@ -47,11 +74,12 @@ figure.highlight {
} }
} }
// With linenos: // With linenos or kramdown line_numbers option:
figure.highlight > pre > code,
figure.highlight > code {
figure.highlight > pre > code, // {% highlight linenos %}
figure.highlight > code, // with fix_linenos
div.highlight > pre > code, // ```...```
div.highlight > code { // with fix_linenos
td, td,
td > pre { td > pre {
@include fs-2; @include fs-2;
@ -62,8 +90,8 @@ figure.highlight > code {
border-left: 0; border-left: 0;
} }
td.gutter { td.gl {
padding-right: 1rem; padding-right: $sp-3;
} }
pre { pre {
@ -79,7 +107,9 @@ figure.highlight > code {
// Jekyll 4.1.1: figure.highlight > pre > code > div > table > ... // Jekyll 4.1.1: figure.highlight > pre > code > div > table > ...
figure.highlight > pre > code .table-wrapper { figure.highlight > pre > code .table-wrapper,
div.highlight > pre > code .table-wrapper,
{
padding: 0; padding: 0;
margin-bottom: 0; margin-bottom: 0;
border: 0; border: 0;
@ -88,8 +118,12 @@ figure.highlight > pre > code .table-wrapper {
// Using fix_linenos: figure.highlight > code > div > table > ... // Using fix_linenos: figure.highlight > code > div > table > ...
figure.highlight > code .table-wrapper { figure.highlight > code .table-wrapper,
div.highlight > code .table-wrapper {
padding: $sp-3; padding: $sp-3;
margin-bottom: 0;
border: 0;
box-shadow: none;
} }
.highlighter-rouge { .highlighter-rouge {