mirror of
https://github.com/google/styleguide.git
synced 2026-10-28 08:25:21 +08:00
Mike Frysinger
4042cd6681
This is a port of the existing styleguide.js auto TOC logic from the
HTML guides to the newer markdown guides. Rather than generate the
entire TOC in JS, rely on GH's generator to create, and then process
it slightly with minimal CSS+JS.
While GH's builtin markdown renderer automatically creates sidepanel
TOCs, the GH pages export does not. Use the `* TOC {:toc}` form so
the export automatically generates for us. The downside is that it
also shows up in GH's builtin markdown renderer, but it's only one
line at the top, so it shouldn't be onerous.
The CSS logic tweaks which levels are displayed in the generated
TOC: we hide the single top-level, and omit levels deeper than 2.
The JS logic puts the TOC into a <details> HTML element (internally
called a zippy) so that it's collapsed by default.
While the old auto TOC codebase supported "horizontal" and "vertical"
formats, the new one only supports "vertical". Most of our guides do
not care and take the default since that's what internal & external
markdown renderers use, but notably some are using horizontal still:
* C++, HTML/CSS, Java, JS, TS: external, but not internal
* shell: internal & external (via manual TOC)
We'll leave the shell guide alone, but the rest will be switched over
in the future as we regenerate things, and discuss with respective
maintainers.
147 lines
3.6 KiB
CSS
147 lines
3.6 KiB
CSS
/**
|
|
* @license
|
|
* Copyright Google Inc.
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
/* Custom styling used in GH pages generated from markdown files. */
|
|
|
|
:root {
|
|
--goodcode-bg-color: #f8fff8;
|
|
--badcode-bg-color: #fff8f8;
|
|
--callout-important-border-color: #ad0303;
|
|
--callout-important-fg-color: #ad0303;
|
|
--callout-important-bg-color: #ffefe1;
|
|
--callout-note-border-color: #1a6ebb;
|
|
--callout-note-fg-color: #1a6ebb;
|
|
--callout-note-bg-color: #e1f5fe;
|
|
--callout-tip-border-color: #267769;
|
|
--callout-tip-fg-color: #267769;
|
|
--callout-tip-bg-color: #e0f2f1;
|
|
--callout-warning-border-color: #a52714;
|
|
--callout-warning-fg-color: #a52714;
|
|
--callout-warning-bg-color: #fbe9e7;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--goodcode-bg-color: #273322;
|
|
--badcode-bg-color: #332822;
|
|
--callout-important-bg-color: #eeded0;
|
|
--callout-note-bg-color: #d0e4ed;
|
|
--callout-tip-bg-color: #cfe1e0;
|
|
--callout-warning-bg-color: #ead8d6;
|
|
}
|
|
}
|
|
|
|
/* Mark "good" snippets in green. */
|
|
div.goodcode + div.highlighter-rouge pre.highlight {
|
|
background-color: var(--goodcode-bg-color) !important;
|
|
border: 1px green solid;
|
|
position: relative;
|
|
}
|
|
div.goodcode + div.highlighter-rouge pre.highlight::before {
|
|
color: green;
|
|
content: '✅';
|
|
position: absolute;
|
|
right: 3px;
|
|
top: 3px;
|
|
}
|
|
|
|
/* Mark "bad" snippets in red. */
|
|
div.badcode + div.highlighter-rouge pre.highlight {
|
|
background-color: var(--badcode-bg-color) !important;
|
|
border: 1px red solid;
|
|
position: relative;
|
|
}
|
|
div.badcode + div.highlighter-rouge pre.highlight::before {
|
|
color: red;
|
|
content: '❌';
|
|
position: absolute;
|
|
right: 3px;
|
|
top: 3px;
|
|
}
|
|
|
|
/*
|
|
* Automatically number section titles.
|
|
* These rules affect all headers if any opt-in to numbering. Ideally we'd use
|
|
* :first-of-type to narrow the selection, but that doesn't seem to play well
|
|
* with the ::before pseudo-element.
|
|
*/
|
|
div.markdown-body div.numbered ~ h1 {
|
|
counter-reset: h2;
|
|
}
|
|
|
|
div.markdown-body div.numbered ~ h2 {
|
|
counter-reset: h3;
|
|
}
|
|
|
|
div.markdown-body div.numbered ~ h3 {
|
|
counter-reset: h4;
|
|
}
|
|
|
|
div.markdown-body div.numbered ~ h2::before {
|
|
content: counter(h2) ' ';
|
|
counter-increment: h2;
|
|
}
|
|
|
|
div.markdown-body div.numbered ~ h3::before {
|
|
content: counter(h2) '.' counter(h3) ' ';
|
|
counter-increment: h3;
|
|
}
|
|
|
|
div.markdown-body div.numbered ~ h4::before {
|
|
content: counter(h2) '.' counter(h3) '.' counter(h4) ' ';
|
|
counter-increment: h4;
|
|
}
|
|
|
|
/**
|
|
* Internal callouts akin to GitHub alerts.
|
|
* devtools/markdown/service/public/styles/markdown/callout.scss
|
|
*/
|
|
|
|
.callout-important {
|
|
background-color: var(--callout-important-bg-color) !important;
|
|
border-left-color: var(--callout-important-border-color) !important;
|
|
color: var(--callout-important-fg-color) !important;
|
|
}
|
|
|
|
.callout-note {
|
|
background-color: var(--callout-note-bg-color) !important;
|
|
border-left-color: var(--callout-note-border-color) !important;
|
|
color: var(--callout-note-fg-color) !important;
|
|
}
|
|
|
|
.callout-tip {
|
|
background-color: var(--callout-tip-bg-color) !important;
|
|
border-left-color: var(--callout-tip-border-color) !important;
|
|
color: var(--callout-tip-fg-color) !important;
|
|
}
|
|
|
|
.callout-warning {
|
|
background-color: var(--callout-warning-bg-color) !important;
|
|
border-left-color: var(--callout-warning-border-color) !important;
|
|
color: var(--callout-warning-fg-color) !important;
|
|
}
|
|
|
|
/* Hide the TOC title entry. */
|
|
#markdown-toc {
|
|
padding-left: 0;
|
|
}
|
|
#markdown-toc > li::marker {
|
|
content: '';
|
|
}
|
|
#markdown-toc > li > a {
|
|
display: none;
|
|
}
|
|
|
|
/* The TOC can be quite long, so shrink it a little. */
|
|
#markdown-toc {
|
|
font-size: smaller;
|
|
}
|
|
|
|
/* Only show TOC entries 2 levels deep. */
|
|
#markdown-toc > li > ul > li > ul > li > ul {
|
|
display: none;
|
|
}
|