Skip to content
Snippets Groups Projects
Commit 8897b066 authored by Séamus O'Sullivan's avatar Séamus O'Sullivan
Browse files

Add just-the-docs Gem.

Remove all the old just-the-docs components, and replace with a
dependency on the just-the-docs Ruby Gem (v0.10).
There is an outstanding issue with the flip cards on the home page, due
to modifications to JTD's scss which enabled this.
parent 1ed64bec
No related branches found
No related tags found
1 merge request!28Update Jekyll setup
Showing
with 0 additions and 1769 deletions
---
layout: table_wrappers
---
<!DOCTYPE html>
<html lang="{{ site.lang | default: 'en-US' }}">
{% include head.html %}
<body>
<a class="skip-to-main" href="#main-content">Skip to main content</a>
{% include icons/icons.html %}
{% include components/sidebar.html %}
<div class="main" id="top">
{% include components/header.html %}
<div id="main-content-wrap" class="main-content-wrap">
{% include components/breadcrumbs.html %}
<div id="main-content" class="main-content" role="main">
{% if site.heading_anchors != false %}
{% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
{% else %}
{{ content }}
{% endif %}
{% if page.has_children == true and page.has_toc != false %}
{% include components/children_nav.html toc_list=toc_list %}
{% endif %}
{% include components/footer.html %}
</div>
</div>
{% if site.search_enabled != false %}
{% include components/search_footer.html %}
{% endif %}
</div>
{% if site.mermaid %}
{% include components/mermaid.html %}
{% endif %}
</body>
</html>
---
layout: default
---
{{ content }}
---
layout: table_wrappers
---
<!DOCTYPE html>
<html lang="{{ site.lang | default: 'en-US' }}">
{% include head.html %}
<body>
<a class="skip-to-main" href="#main-content">Skip to main content</a>
{% include icons/icons.html %}
{% comment %}
This is a bandaid fix to properly render breadcrumbs; as of now, there is some variable leakage between the sidebar component (which computes parents, grandparents) and the breadcrumbs component. We plan to remove this in a future release to deduplicate code.
For more context, see https://github.com/just-the-docs/just-the-docs/pull/1058#discussion_r1057014053
{% endcomment %}
{% capture nav %}
{% assign pages_top_size = site.html_pages
| where_exp:"item", "item.title != nil"
| where_exp:"item", "item.parent == nil"
| where_exp:"item", "item.nav_exclude != true"
| size %}
{% if pages_top_size > 0 %}
{% include nav.html pages=site.html_pages key=nil %}
{% endif %}
{% if site.just_the_docs.collections %}
{% assign collections_size = site.just_the_docs.collections | size %}
{% for collection_entry in site.just_the_docs.collections %}
{% assign collection_key = collection_entry[0] %}
{% assign collection_value = collection_entry[1] %}
{% assign collection = site[collection_key] %}
{% if collection_value.nav_exclude != true %}
{% include nav.html pages=collection key=collection_key %}
{% endif %}
{% endfor %}
{% endif %}
{% endcapture %}
<div id="main-content-wrap" class="main-content-wrap" id="top">
{% include components/breadcrumbs.html %}
<div id="main-content" class="main-content" role="main">
{% if site.heading_anchors != false %}
{% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
{% else %}
{{ content }}
{% endif %}
{% if page.has_children == true and page.has_toc != false %}
{% include components/children_nav.html toc_list=toc_list %}
{% endif %}
{% include components/footer.html %}
</div>
</div>
{% if site.mermaid %}
{% include components/mermaid.html %}
{% endif %}
</body>
</html>
---
layout: default
---
{{ content }}
---
layout: default
---
{{ content }}
---
layout: default
---
{{ content }}
---
layout: vendor/compress
---
{% assign content_ = content | replace: '<table', '<div class="table-wrapper"><table' %}
{% assign content_ = content_ | replace: '</table>', '</table></div>' %}
{{ content_ }}
---
layout: vendor/compress
---
{% assign content_ = content | replace: '<table', '<div class="table-wrapper"><table' %}
{% assign content_ = content_ | replace: '</table>', '</table></div>' %}
{{ content_ }}
---
# Jekyll layout that compresses HTML
# v3.1.0
# http://jch.penibelst.de/
# © 2014–2015 Anatol Broder
# MIT License
---
{% capture _LINE_FEED %}
{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}
// Base element style overrides
// stylelint-disable selector-no-type, selector-max-type, selector-max-specificity, selector-max-id
* {
box-sizing: border-box;
}
::selection {
color: $white;
background: $link-color;
}
html {
@include fs-4;
scroll-behavior: smooth;
}
body {
font-family: $body-font-family;
font-size: inherit;
line-height: $body-line-height;
color: $body-text-color;
background-color: $body-background-color;
overflow-wrap: break-word;
}
ol,
ul,
dl,
pre,
address,
blockquote,
table,
div,
hr,
form,
fieldset,
noscript .table-wrapper {
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
#toctitle {
margin-top: 0;
margin-bottom: 1em;
font-weight: 500;
line-height: $body-heading-line-height;
color: $body-heading-color;
}
p {
margin-top: 1em;
margin-bottom: 1em;
}
a {
color: $link-color;
text-decoration: none;
}
a:not([class]) {
text-decoration: underline;
text-decoration-color: $border-color;
text-underline-offset: 2px;
&:hover {
text-decoration-color: rgba($link-color, 0.45);
}
}
code {
font-family: $mono-font-family;
font-size: 0.75em;
line-height: $body-line-height;
}
figure,
pre {
margin: 0;
}
li {
margin: 0.25em 0;
}
img {
max-width: 100%;
height: auto;
}
hr {
height: 1px;
padding: 0;
margin: $sp-6 0;
background-color: $border-color;
border: 0;
}
// adds a GitHub-style sidebar to blockquotes
blockquote {
margin: 10px 0;
// resets user-agent stylesheets for blockquotes
margin-block-start: 0;
margin-inline-start: 0;
padding-left: 15px;
border-left: 3px solid $border-color;
}
//
// Buttons and things that look like buttons
//
// stylelint-disable color-named
.btn {
display: inline-block;
box-sizing: border-box;
padding-top: 0.3em;
padding-right: 1em;
padding-bottom: 0.3em;
padding-left: 1em;
margin: 0;
font-family: inherit;
font-size: inherit;
font-weight: 500;
line-height: 1.5;
color: $link-color;
text-decoration: none;
vertical-align: baseline;
cursor: pointer;
background-color: $base-button-color;
border-width: 0;
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
appearance: none;
&:focus {
text-decoration: none;
outline: none;
box-shadow: 0 0 0 3px rgba(blue, 0.25);
}
&:focus:hover,
&.selected:focus {
box-shadow: 0 0 0 3px rgba(blue, 0.25);
}
&:hover,
&.zeroclipboard-is-hover {
color: darken($link-color, 2%);
}
&:hover,
&:active,
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
text-decoration: none;
background-color: darken($base-button-color, 1%);
}
&:active,
&.selected,
&.zeroclipboard-is-active {
background-color: darken($base-button-color, 3%);
background-image: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
&.selected:hover {
background-color: darken(#dcdcdc, 5%);
}
&:disabled,
&.disabled {
&,
&:hover {
color: rgba(102, 102, 102, 0.5);
cursor: default;
background-color: rgba(229, 229, 229, 0.5);
background-image: none;
box-shadow: none;
}
}
}
.btn-outline {
color: $link-color;
background: transparent;
box-shadow: inset 0 0 0 2px $grey-lt-300;
&:hover,
&:active,
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
color: darken($link-color, 4%);
text-decoration: none;
background-color: transparent;
box-shadow: inset 0 0 0 3px $grey-lt-300;
}
&:focus {
text-decoration: none;
outline: none;
box-shadow: inset 0 0 0 2px $grey-dk-100, 0 0 0 3px rgba(blue, 0.25);
}
&:focus:hover,
&.selected:focus {
box-shadow: inset 0 0 0 2px $grey-dk-100;
}
}
.btn-primary {
@include btn-color($white, $btn-primary-color);
}
.btn-purple {
@include btn-color($white, $purple-100);
}
.btn-blue {
@include btn-color($white, $blue-000);
}
.btn-green {
@include btn-color($white, $green-100);
}
// Buttons and things that look like buttons
// stylelint-disable color-named
.btn {
display: inline-block;
box-sizing: border-box;
padding: 0.3em 1em;
margin: 0;
font-family: inherit;
font-size: inherit;
font-weight: 500;
line-height: 1.5;
color: $link-color;
text-decoration: none;
vertical-align: baseline;
cursor: pointer;
background-color: $base-button-color;
border-width: 0;
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
appearance: none;
&:focus {
text-decoration: none;
outline: none;
box-shadow: 0 0 0 3px rgba(blue, 0.25);
}
&:focus:hover,
&.selected:focus {
box-shadow: 0 0 0 3px rgba(blue, 0.25);
}
&:hover,
&.zeroclipboard-is-hover {
color: darken($link-color, 2%);
}
&:hover,
&:active,
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
text-decoration: none;
background-color: darken($base-button-color, 1%);
}
&:active,
&.selected,
&.zeroclipboard-is-active {
background-color: darken($base-button-color, 3%);
background-image: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
&.selected:hover {
background-color: darken(#dcdcdc, 5%);
}
&:disabled,
&.disabled {
&,
&:hover {
color: rgba(102, 102, 102, 0.5);
cursor: default;
background-color: rgba(229, 229, 229, 0.5);
background-image: none;
box-shadow: none;
}
}
}
.btn-outline {
color: $link-color;
background: transparent;
box-shadow: inset 0 0 0 2px $grey-lt-300;
&:hover,
&:active,
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
color: darken($link-color, 4%);
text-decoration: none;
background-color: transparent;
box-shadow: inset 0 0 0 3px $grey-lt-300;
}
&:focus {
text-decoration: none;
outline: none;
box-shadow: inset 0 0 0 2px $grey-dk-100, 0 0 0 3px rgba(blue, 0.25);
}
&:focus:hover,
&.selected:focus {
box-shadow: inset 0 0 0 2px $grey-dk-100;
}
}
.btn-primary {
@include btn-color($white, $btn-primary-color);
}
.btn-purple {
@include btn-color($white, $purple-100);
}
.btn-blue {
@include btn-color($white, $blue-000);
}
.btn-green {
@include btn-color($white, $green-100);
}
//
// Code and syntax highlighting
//
// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type
code {
padding: 0.2em 0.15em;
font-weight: 400;
background-color: $code-background-color;
border: $border $border-color;
border-radius: $border-radius;
}
// Avoid appearance of dark border around visited code links in Safari
a:visited code {
border-color: $border-color;
}
// 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?
// ```[LANG]...```
div.highlighter-rouge {
padding: $sp-3;
margin-top: 0;
margin-bottom: $sp-3;
overflow-x: auto;
background-color: $code-background-color;
border-radius: $border-radius;
box-shadow: none;
-webkit-overflow-scrolling: touch;
div.highlight,
pre.highlight,
code {
padding: 0;
margin: 0;
border: 0;
}
}
// {% highlight LANG %}...{% endhighlight %},
// {% highlight LANG linenos %}...{% endhighlight %}:
figure.highlight {
padding: $sp-3;
margin-top: 0;
margin-bottom: $sp-3;
background-color: $code-background-color;
border-radius: $border-radius;
box-shadow: none;
-webkit-overflow-scrolling: touch;
pre,
code {
padding: 0;
margin: 0;
border: 0;
}
}
// ```[LANG]...```, kramdown line_numbers = true,
// {% highlight LANG linenos %}...{% endhighlight %}:
.highlight .table-wrapper {
padding: 0;
margin: 0;
border: 0;
box-shadow: none;
td,
pre {
@include fs-2;
min-width: 0;
padding: 0;
background-color: $code-background-color;
border: 0;
}
td.gl {
padding-right: $sp-3;
}
pre {
margin: 0;
line-height: 2;
}
}
.highlight .c {
color: #586e75;
} // comment //
.highlight .err {
color: #93a1a1;
} // error //
.highlight .g {
color: #93a1a1;
} // generic //
.highlight .k {
color: #859900;
} // keyword //
.highlight .l {
color: #93a1a1;
} // literal //
.highlight .n {
color: #93a1a1;
} // name //
.highlight .o {
color: #859900;
} // operator //
.highlight .x {
color: #cb4b16;
} // other //
.highlight .p {
color: #93a1a1;
} // punctuation //
.highlight .cm {
color: #586e75;
} // comment.multiline //
.highlight .cp {
color: #859900;
} // comment.preproc //
.highlight .c1 {
color: #586e75;
} // comment.single //
.highlight .cs {
color: #859900;
} // comment.special //
.highlight .gd {
color: #2aa198;
} // generic.deleted //
.highlight .ge {
font-style: italic;
color: #93a1a1;
} // generic.emph //
.highlight .gr {
color: #dc322f;
} // generic.error //
.highlight .gh {
color: #cb4b16;
} // generic.heading //
.highlight .gi {
color: #859900;
} // generic.inserted //
.highlight .go {
color: #93a1a1;
} // generic.output //
.highlight .gp {
color: #93a1a1;
} // generic.prompt //
.highlight .gs {
font-weight: bold;
color: #93a1a1;
} // generic.strong //
.highlight .gu {
color: #cb4b16;
} // generic.subheading //
.highlight .gt {
color: #93a1a1;
} // generic.traceback //
.highlight .kc {
color: #cb4b16;
} // keyword.constant //
.highlight .kd {
color: #268bd2;
} // keyword.declaration //
.highlight .kn {
color: #859900;
} // keyword.namespace //
.highlight .kp {
color: #859900;
} // keyword.pseudo //
.highlight .kr {
color: #268bd2;
} // keyword.reserved //
.highlight .kt {
color: #dc322f;
} // keyword.type //
.highlight .ld {
color: #93a1a1;
} // literal.date //
.highlight .m {
color: #2aa198;
} // literal.number //
.highlight .s {
color: #2aa198;
} // literal.string //
.highlight .na {
color: #555;
} // name.attribute //
.highlight .nb {
color: #b58900;
} // name.builtin //
.highlight .nc {
color: #268bd2;
} // name.class //
.highlight .no {
color: #cb4b16;
} // name.constant //
.highlight .nd {
color: #268bd2;
} // name.decorator //
.highlight .ni {
color: #cb4b16;
} // name.entity //
.highlight .ne {
color: #cb4b16;
} // name.exception //
.highlight .nf {
color: #268bd2;
} // name.function //
.highlight .nl {
color: #555;
} // name.label //
.highlight .nn {
color: #93a1a1;
} // name.namespace //
.highlight .nx {
color: #555;
} // name.other //
.highlight .py {
color: #93a1a1;
} // name.property //
.highlight .nt {
color: #268bd2;
} // name.tag //
.highlight .nv {
color: #268bd2;
} // name.variable //
.highlight .ow {
color: #859900;
} // operator.word //
.highlight .w {
color: #93a1a1;
} // text.whitespace //
.highlight .mf {
color: #2aa198;
} // literal.number.float //
.highlight .mh {
color: #2aa198;
} // literal.number.hex //
.highlight .mi {
color: #2aa198;
} // literal.number.integer //
.highlight .mo {
color: #2aa198;
} // literal.number.oct //
.highlight .sb {
color: #586e75;
} // literal.string.backtick //
.highlight .sc {
color: #2aa198;
} // literal.string.char //
.highlight .sd {
color: #93a1a1;
} // literal.string.doc //
.highlight .s2 {
color: #2aa198;
} // literal.string.double //
.highlight .se {
color: #cb4b16;
} // literal.string.escape //
.highlight .sh {
color: #93a1a1;
} // literal.string.heredoc //
.highlight .si {
color: #2aa198;
} // literal.string.interpol //
.highlight .sx {
color: #2aa198;
} // literal.string.other //
.highlight .sr {
color: #dc322f;
} // literal.string.regex //
.highlight .s1 {
color: #2aa198;
} // literal.string.single //
.highlight .ss {
color: #2aa198;
} // literal.string.symbol //
.highlight .bp {
color: #268bd2;
} // name.builtin.pseudo //
.highlight .vc {
color: #268bd2;
} // name.variable.class //
.highlight .vg {
color: #268bd2;
} // name.variable.global //
.highlight .vi {
color: #268bd2;
} // name.variable.instance //
.highlight .il {
color: #2aa198;
} // literal.number.integer.long //
//
// Code examples (rendered)
//
.code-example {
padding: $sp-3;
margin-bottom: $sp-3;
overflow: auto;
border: 1px solid $border-color;
border-radius: $border-radius;
+ .highlighter-rouge,
+ figure.highlight {
position: relative;
margin-top: -$sp-4;
border-right: 1px solid $border-color;
border-bottom: 1px solid $border-color;
border-left: 1px solid $border-color;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
// Code and syntax highlighting
// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type, scss/comment-no-empty
// {% raw %}
// This instruction applies to all queues not within 'pre' or 'figure', avoiding 'code' generated by the highlight.
:not(pre, figure) {
& > code {
padding: 0.2em 0.15em;
font-weight: 400;
background-color: $code-background-color;
border: $border $border-color;
border-radius: $border-radius;
}
}
// Avoid appearance of dark border around visited code links in Safari
a:visited code {
border-color: $border-color;
}
// 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
//
// ----...---- (AsciiDoc)
// div.listingblock > div.content > pre.rouge.highlight
//
// 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?
// ```[LANG]...```
// the code may appear with 3 different types:
// container \ case: default case, code with line number, code with html rendering
// top level: div.highlighter-rouge, figure.highlight, figure.highlight
// second level: div.highlight, div.table-wrapper, pre.highlight
// third level: pre.highlight, td.code, absent
// last level: code, pre, code (optionality)
// 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
// select top level container
div.highlighter-rouge,
div.listingblock > div.content,
figure.highlight {
margin-top: 0;
margin-bottom: $sp-3;
background-color: $code-background-color;
border-radius: $border-radius;
box-shadow: none;
-webkit-overflow-scrolling: touch;
position: relative;
padding: 0;
// copy button (or other button)
// the button appear only when there is a hover on the code or focus on button
> button {
width: $sp-3;
opacity: 0;
position: absolute;
top: 0;
right: 0;
border: $sp-3 solid $code-background-color;
background-color: $code-background-color;
color: $body-text-color;
box-sizing: content-box;
svg {
fill: $body-text-color;
}
&:active {
text-decoration: none;
outline: none;
opacity: 1;
}
&:focus {
opacity: 1;
}
}
// the button can be seen by doing a simple hover in the code, there is no need to go over the location of the button
&:hover {
> button {
cursor: copy;
opacity: 1;
}
}
}
// setting the spacing and scrollbar on the second level for the first case
// remove all space on the second and thirt level
div.highlighter-rouge,
div.listingblock {
div.highlight {
overflow-x: auto;
padding: $sp-3;
margin: 0;
border: 0;
}
pre.highlight,
code {
padding: 0;
margin: 0;
border: 0;
}
}
// {% highlight LANG %}...{% endhighlight %},
// {% highlight LANG linenos %}...{% endhighlight %}:
// setting the spacing and scrollbar on the second level for the thirt case
// the css rule are apply only to the last code enviroment
// setting the scroolbar
figure.highlight {
pre,
:not(pre) > code {
overflow-x: auto;
padding: $sp-3;
margin: 0;
border: 0;
}
}
// ```[LANG]...```, kramdown line_numbers = true,
// {% highlight LANG linenos %}...{% endhighlight %}:
// setting the spacing and scrollbar on the thirt level for the second case
.highlight .table-wrapper {
padding: $sp-3 0;
margin: 0;
border: 0;
box-shadow: none;
td,
pre {
@include fs-2;
min-width: 0;
padding: 0;
background-color: $code-background-color;
border: 0;
}
td.gl {
width: 1em;
padding-right: $sp-3;
padding-left: $sp-3;
}
pre {
margin: 0;
line-height: 2;
}
}
// Code examples: html render of a code
.code-example,
.listingblock > .title {
padding: $sp-3;
margin-bottom: $sp-3;
overflow: auto;
border: 1px solid $border-color;
border-radius: $border-radius;
+ .highlighter-rouge,
+ .sectionbody .listingblock,
+ .content,
+ figure.highlight {
position: relative;
margin-top: -$sp-4;
border-right: 1px solid $border-color;
border-bottom: 1px solid $border-color;
border-left: 1px solid $border-color;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
// Mermaid diagram code blocks should be left unstyled.
code.language-mermaid {
padding: 0;
background-color: inherit;
border: 0;
}
// Override OneDarkJekyll Colors for Code Blocks
.highlight,
pre.highlight {
background: $code-background-color; // Code Background
// For Backwards Compatibility Before $code-linenumber-color was added
@if variable-exists(code-linenumber-color) {
color: $code-linenumber-color; // Code Line Numbers
} @else {
color: $body-text-color; // Code Line Numbers
}
}
// Override OneDarkJekyll Colors for Code Blocks
.highlight pre {
background: $code-background-color; // Code Background
}
// {% endraw %}
$body-background-color: $grey-dk-300;
$sidebar-color: $grey-dk-300;
$border-color: $grey-dk-200;
$body-text-color: $grey-lt-300;
$body-heading-color: $grey-lt-000;
$nav-child-link-color: $grey-dk-000;
$search-result-preview-color: $grey-dk-000;
$link-color: $blue-000;
$btn-primary-color: $blue-200;
$base-button-color: $grey-dk-250;
$search-background-color: $grey-dk-250;
$table-background-color: $grey-dk-250;
$feedback-color: darken($sidebar-color, 3%);
// The following highlight theme is more legible than that used for the light color scheme
// @import "./vendor/OneDarkJekyll/syntax-one-dark";
// $code-background-color: #282c34; // OneDarkJekyll default for syntax-one-dark
// $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-one-dark
@import "./vendor/OneDarkJekyll/syntax-one-dark-vivid";
$code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid
$code-linenumber-color: #dee2f7; // OneDarkJekyll .nf for syntax-one-dark-vivid
// @import "./vendor/OneDarkJekyll/syntax-firewatch";
// $code-background-color: #282c34; // OneDarkJekyll default for syntax-firewatch
// $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-firewatch
// @import "./vendor/OneDarkJekyll/syntax-firewatch-green";
// $code-background-color: #282c34; // OneDarkJekyll default for syntax-firewatch-green
// $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-firewatch-green
// Moved from _sass/code.scss
.highlight .c {
color: #586e75;
} // comment //
.highlight .err {
color: #93a1a1;
} // error //
.highlight .g {
color: #93a1a1;
} // generic //
.highlight .k {
color: #859900;
} // keyword //
.highlight .l {
color: #93a1a1;
} // literal //
.highlight .n {
color: #93a1a1;
} // name //
.highlight .o {
color: #859900;
} // operator //
.highlight .x {
color: #cb4b16;
} // other //
.highlight .p {
color: #93a1a1;
} // punctuation //
.highlight .cm {
color: #586e75;
} // comment.multiline //
.highlight .cp {
color: #859900;
} // comment.preproc //
.highlight .c1 {
color: #586e75;
} // comment.single //
.highlight .cs {
color: #859900;
} // comment.special //
.highlight .gd {
color: #2aa198;
} // generic.deleted //
.highlight .ge {
font-style: italic;
color: #93a1a1;
} // generic.emph //
.highlight .gr {
color: #dc322f;
} // generic.error //
.highlight .gh {
color: #cb4b16;
} // generic.heading //
.highlight .gi {
color: #859900;
} // generic.inserted //
.highlight .go {
color: #93a1a1;
} // generic.output //
.highlight .gp {
color: #93a1a1;
} // generic.prompt //
.highlight .gs {
font-weight: bold;
color: #93a1a1;
} // generic.strong //
.highlight .gu {
color: #cb4b16;
} // generic.subheading //
.highlight .gt {
color: #93a1a1;
} // generic.traceback //
.highlight .kc {
color: #cb4b16;
} // keyword.constant //
.highlight .kd {
color: #268bd2;
} // keyword.declaration //
.highlight .kn {
color: #859900;
} // keyword.namespace //
.highlight .kp {
color: #859900;
} // keyword.pseudo //
.highlight .kr {
color: #268bd2;
} // keyword.reserved //
.highlight .kt {
color: #dc322f;
} // keyword.type //
.highlight .ld {
color: #93a1a1;
} // literal.date //
.highlight .m {
color: #2aa198;
} // literal.number //
.highlight .s {
color: #2aa198;
} // literal.string //
.highlight .na {
color: #555;
} // name.attribute //
.highlight .nb {
color: #b58900;
} // name.builtin //
.highlight .nc {
color: #268bd2;
} // name.class //
.highlight .no {
color: #cb4b16;
} // name.constant //
.highlight .nd {
color: #268bd2;
} // name.decorator //
.highlight .ni {
color: #cb4b16;
} // name.entity //
.highlight .ne {
color: #cb4b16;
} // name.exception //
.highlight .nf {
color: #268bd2;
} // name.function //
.highlight .nl {
color: #555;
} // name.label //
.highlight .nn {
color: #93a1a1;
} // name.namespace //
.highlight .nx {
color: #555;
} // name.other //
.highlight .py {
color: #93a1a1;
} // name.property //
.highlight .nt {
color: #268bd2;
} // name.tag //
.highlight .nv {
color: #268bd2;
} // name.variable //
.highlight .ow {
color: #859900;
} // operator.word //
.highlight .w {
color: #93a1a1;
} // text.whitespace //
.highlight .mf {
color: #2aa198;
} // literal.number.float //
.highlight .mh {
color: #2aa198;
} // literal.number.hex //
.highlight .mi {
color: #2aa198;
} // literal.number.integer //
.highlight .mo {
color: #2aa198;
} // literal.number.oct //
.highlight .sb {
color: #586e75;
} // literal.string.backtick //
.highlight .sc {
color: #2aa198;
} // literal.string.char //
.highlight .sd {
color: #93a1a1;
} // literal.string.doc //
.highlight .s2 {
color: #2aa198;
} // literal.string.double //
.highlight .se {
color: #cb4b16;
} // literal.string.escape //
.highlight .sh {
color: #93a1a1;
} // literal.string.heredoc //
.highlight .si {
color: #2aa198;
} // literal.string.interpol //
.highlight .sx {
color: #2aa198;
} // literal.string.other //
.highlight .sr {
color: #dc322f;
} // literal.string.regex //
.highlight .s1 {
color: #2aa198;
} // literal.string.single //
.highlight .ss {
color: #2aa198;
} // literal.string.symbol //
.highlight .bp {
color: #268bd2;
} // name.builtin.pseudo //
.highlight .vc {
color: #268bd2;
} // name.variable.class //
.highlight .vg {
color: #268bd2;
} // name.variable.global //
.highlight .vi {
color: #268bd2;
} // name.variable.instance //
.highlight .il {
color: #2aa198;
} // literal.number.integer.long //
@charset "UTF-8";
//
// Styles for rendered markdown in the .main-content container
//
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
.main-content {
line-height: $content-line-height;
ol,
ul,
dl,
pre,
address,
blockquote,
.table-wrapper {
margin-top: 0.5em;
}
a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ul,
ol {
padding-left: 1.5em;
}
li {
.highlight {
margin-top: $sp-1;
}
}
ol {
list-style-type: none;
counter-reset: step-counter;
> li {
position: relative;
&::before {
position: absolute;
top: 0.2em;
left: -1.6em;
color: $grey-dk-000;
content: counter(step-counter);
counter-increment: step-counter;
@include fs-3;
@include mq(sm) {
top: 0.11em;
}
}
ol {
counter-reset: sub-counter;
li {
&::before {
content: counter(sub-counter, lower-alpha);
counter-increment: sub-counter;
}
}
}
}
}
ul {
list-style: none;
> li {
&::before {
position: absolute;
margin-left: -1.4em;
color: $grey-dk-000;
content: "•";
}
}
}
.task-list {
padding-left: 0;
}
.task-list-item {
display: flex;
align-items: center;
&::before {
content: "";
}
}
.task-list-item-checkbox {
margin-right: 0.6em;
}
hr + * {
margin-top: 0;
}
h1:first-of-type {
margin-top: 0.5em;
}
dl {
display: grid;
grid-template: auto / 10em 1fr;
}
dt,
dd {
margin: 0.25em 0;
}
dt {
grid-column: 1;
font-weight: 500;
text-align: right;
&::after {
content: ":";
}
}
dd {
grid-column: 2;
margin-bottom: 0;
margin-left: 1em;
blockquote,
div,
dl,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
li,
ol,
p,
pre,
table,
ul,
.table-wrapper {
&:first-child {
margin-top: 0;
}
}
}
dd,
ol,
ul {
dl:first-child {
dt:first-child,
dd:nth-child(2) {
margin-top: 0;
}
}
}
.anchor-heading {
position: absolute;
right: -$sp-4;
width: $sp-5;
height: 100%;
padding-right: $sp-1;
padding-left: $sp-1;
overflow: visible;
@include mq(md) {
right: auto;
left: -$sp-5;
}
svg {
display: inline-block;
width: 100%;
height: 100%;
color: $link-color;
visibility: hidden;
}
}
.anchor-heading:hover,
h1:hover > .anchor-heading,
h2:hover > .anchor-heading,
h3:hover > .anchor-heading,
h4:hover > .anchor-heading,
h5:hover > .anchor-heading,
h6:hover > .anchor-heading {
svg {
visibility: visible;
}
}
summary {
cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6 {
position: relative;
margin-top: 1.5em;
margin-bottom: 0.25em;
&:first-child {
margin-top: $sp-2;
}
+ table,
+ .table-wrapper,
+ .code-example,
+ .highlighter-rouge {
margin-top: 1em;
}
+ p {
margin-top: 0;
}
}
}
@charset "UTF-8";
// Styles for rendered markdown in the .main-content container
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity, selector-max-id
.main-content {
line-height: $content-line-height;
ol,
ul,
dl,
pre,
address,
blockquote,
.table-wrapper {
margin-top: 0.5em;
}
a {
overflow: hidden;
text-overflow: ellipsis;
}
ul,
ol {
padding-left: 1.5em;
}
li {
.highlight {
margin-top: $sp-1;
}
}
ol {
list-style-type: none;
counter-reset: step-counter;
> li {
position: relative;
&::before {
position: absolute;
top: 0.2em;
left: -1.6em;
color: $grey-dk-000;
content: counter(step-counter);
counter-increment: step-counter;
@include fs-3;
@include mq(sm) {
top: 0.11em;
}
}
ol {
counter-reset: sub-counter;
> li {
&::before {
content: counter(sub-counter, lower-alpha);
counter-increment: sub-counter;
}
}
}
}
}
ul {
list-style: none;
> li {
&::before {
position: absolute;
margin-left: -1.4em;
color: $grey-dk-000;
content: "•";
}
}
}
.task-list-item {
&::before {
content: "";
}
}
.task-list-item-checkbox {
margin-right: 0.6em;
margin-left: -1.4em;
// The same margin-left is used above for ul > li::before
}
hr + * {
margin-top: 0;
}
h1:first-of-type {
margin-top: 0.5em;
}
dl {
display: grid;
grid-template: auto / 10em 1fr;
}
dt,
dd {
margin: 0.25em 0;
}
dt {
grid-column: 1;
font-weight: 500;
text-align: right;
&::after {
content: ":";
}
}
dd {
grid-column: 2;
margin-bottom: 0;
margin-left: 1em;
blockquote,
div,
dl,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
li,
ol,
p,
pre,
table,
ul,
.table-wrapper {
&:first-child {
margin-top: 0;
}
}
}
dd,
ol,
ul {
dl:first-child {
dt:first-child,
dd:nth-child(2) {
margin-top: 0;
}
}
}
.anchor-heading {
position: absolute;
right: -$sp-4;
width: $sp-5;
height: 100%;
padding-right: $sp-1;
padding-left: $sp-1;
overflow: visible;
@include mq(md) {
right: auto;
left: -$sp-5;
}
svg {
display: inline-block;
width: 100%;
height: 100%;
color: $link-color;
visibility: hidden;
}
}
.anchor-heading:hover,
.anchor-heading:focus,
h1:hover > .anchor-heading,
h2:hover > .anchor-heading,
h3:hover > .anchor-heading,
h4:hover > .anchor-heading,
h5:hover > .anchor-heading,
h6:hover > .anchor-heading {
svg {
visibility: visible;
}
}
summary {
cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
#toctitle {
position: relative;
margin-top: 1.5em;
margin-bottom: 0.25em;
+ table,
+ .table-wrapper,
+ .code-example,
+ .highlighter-rouge,
+ .sectionbody .listingblock {
margin-top: 1em;
}
+ p:not(.label) {
margin-top: 0;
}
}
> h1:first-child,
> h2:first-child,
> h3:first-child,
> h4:first-child,
> h5:first-child,
> h6:first-child,
> .sect1:first-child > h2,
> .sect2:first-child > h3,
> .sect3:first-child > h4,
> .sect4:first-child > h5,
> .sect5:first-child > h6 {
margin-top: $sp-2;
}
}
// custom SCSS (or CSS) goes here
// custom setup code goes here
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment