fleet/website/assets/styles/pages/docs/code-blocks.less
eashaw 93b50c3787
Add support for mermaid diagrams to fleetdm.com/docs (#4288)
* Add mermaid.js, remove mermaid codeblocks from <pre> tags, styles

* add custom codeblock renderer, remove jquery unwrapping, hide mermaid blocks until fully rendered

* update comment

* layout update

* Add section to the handbook about mermaid code blocks, add mermaid styles to handbook

* Update handbook/community.md

* Update handbook/community.md

Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
2022-02-22 21:49:34 +09:00

127 lines
2 KiB
Text
Vendored

// lesshint-disable spaceAroundComma, trailingWhitespace
code:not(.hljs):not(.nohighlight):not(.mermaid) {
background-color: @ui-off-white;
border: 1px solid @border-lt-gray;
color: @core-fleet-black-75;
font-size: 13px;
padding: 4px 8px;
line-height: 16px;
}
code {
font-family: @code-font;
display: inline-block;
border-radius: 6px;
}
code.mermaid:not([data-processed='true']) {
opacity: 0;
}
pre:not(.algolia-autocomplete):not(.ds-dropdown-menu):not(.json) {
padding: 24px;
border: 1px solid @border-lt-gray;
border-radius: 6px;
margin: 0px 0px 40px;
font-family: @code-font;
background: #282C40;
&.muted {
color: @core-fleet-black-75;
background: @ui-off-white;
}
}
li {
pre:not(.algolia-autocomplete):not(.ds-dropdown-menu):not(.json) {
margin: 0px 0px 16px;
}
}
.hljs {
background: #282C40;
}
/*
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
.hljs,
.hljs-tag,
.hljs-built_in,
.hljs-subst {
color: #f8f8f2;
}
.hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
}
.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
color: #ae81ff;
}
.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
color: #a6e22e;
}
.hljs-strong {
font-weight: bold;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-name {
color: #f92672;
}
.hljs-symbol,
.hljs-attribute,
.hljs-function-keyword {
color: #66d9ef;
}
.hljs-attr,
.hljs-class .hljs-title {
color: #f8f8f2;
}
.hljs-params {
color: #fd9720;
}
.hljs-string,
.hljs-type,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
color: #e6db74;
}
.hljs-comment,
.hljs-deletion,
.hljs-meta {
color: #75715e;
}