/* PrismJS 1.23.0 prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+python+rust+yaml&plugins=line-highlight+line-numbers+autolinker+file-highlight+toolbar+copy-to-clipboard+download-button */ /**
* prism.js default theme for JavaScript, CSS and HTML * Based on dabblet (http://dabblet.com) * @author Lea Verou */
color: black; font-size: 1em; font-family: $codeFont, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; line-height: 1.5; white-space: pre; text-align: left; text-shadow: 0 1px white; word-wrap: normal; word-break: normal; word-spacing: normal; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; background: none;
}
pre::-moz-selection, pre ::-moz-selection, code::-moz-selection, code ::-moz-selection {
text-shadow: none; background: #b3d4fc;
}
pre::selection, pre ::selection, code::selection, code ::selection {
text-shadow: none; background: #b3d4fc;
}
@media print {
code[class*="language-"], pre[class*="language-"] { text-shadow: none; }
}
/* Code blocks */ pre {
margin: .5em 0; padding: 1em; overflow: auto;
}
background: #f5f2f0;
}
/* Inline code */ :not(pre) > code {
padding: .1em; white-space: normal; border-radius: .3em;
}
.token.comment, .token.prolog, .token.doctype, .token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.token.namespace {
opacity: .7;
}
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted {
color: #905;
}
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
color: #690;
}
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
color: #9a6e3a;
}
.token.atrule, .token.attr-value, .token.keyword {
color: #07a;
}
.token.function, .token.class-name {
color: #DD4A68;
}
.token.regex, .token.important, .token.variable {
color: #e90;
}
.token.important, .token.bold {
font-weight: bold;
} .token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
pre {
position: relative; padding: 1em 0 1em 3em;
}
.line-highlight {
position: absolute; right: 0; left: 0; margin-top: 1em; /* Same as .prism’s padding-top */ padding: inherit 0; line-height: inherit; white-space: pre; background: rgba($black,.09); background: linear-gradient(to right, rgba($black,.09) 70%, rgba($black,0)); pointer-events: none;
}
@media print {
.line-highlight { /* * This will prevent browsers from replacing the background color with white. * It's necessary because the element is layered on top of the displayed code. */ -webkit-print-color-adjust: exact; color-adjust: exact; }
}
.line-highlight:before, .line-highlight:after {
position: absolute; top: .4em; left: .6em; min-width: 1em; padding: 0 .5em; color: hsl(24, 20%, 95%); font: bold 65%/1.5 sans-serif; text-align: center; text-shadow: none; vertical-align: .3em; background-color: hsla(24, 20%, 50%,.4); border-radius: 999px; box-shadow: 0 1px white; content: attr(data-start);
}
.line-highlight:after {
top: auto; bottom: .4em; content: attr(data-end);
}
.line-numbers .line-highlight:before, .line-numbers .line-highlight:after {
content: none;
}
pre.linkable-line-numbers span.line-numbers-rows {
pointer-events: all;
} pre.linkable-line-numbers span.line-numbers-rows > span:before {
cursor: pointer;
} pre.linkable-line-numbers span.line-numbers-rows > span:hover:before {
background-color: rgba(128, 128, 128, .2);
}
pre.line-numbers {
position: relative; padding-left: 3.8em; counter-reset: linenumber;
}
pre.line-numbers > code {
position: relative; white-space: inherit;
}
.line-numbers .line-numbers-rows {
position: absolute; top: 0; left: -3.8em; width: 3em; /* works for line-numbers below 1000 lines */ font-size: 100%; letter-spacing: -1px; border-right: 1px solid #999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none;
}
.line-numbers-rows > span {
display: block; counter-increment: linenumber;
}
.line-numbers-rows > span:before {
display: block; padding-right: 0.8em; color: #999; text-align: right; content: counter(linenumber);
}
.token a {
color: inherit;
} div.code-toolbar {
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute; top: 12px; right: 27px; opacity: 0; transition: opacity 0.25s ease-in-out;
}
div.code-toolbar:hover > .toolbar {
opacity: 1;
}
/* Separate line b/c rules are thrown out if selector is invalid. IE11 and old Edge versions don't support :focus-within. */ div.code-toolbar:focus-within > .toolbar {
opacity: 1;
}
div.code-toolbar > .toolbar .toolbar-item {
display: inline-block;
}
div.code-toolbar > .toolbar a {
cursor: pointer;
}
div.code-toolbar > .toolbar button {
padding: 0; overflow: visible; color: inherit; font: inherit; line-height: normal; background: none; border: 0; -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none;
}
div.code-toolbar > .toolbar a, div.code-toolbar > .toolbar button {
padding: 6px 18px; color: $black; font-weight: 600; font-size: 14px; background: $yellow; border-radius: 36px; box-shadow:0px 1px 3px rgba($black,.24); cursor:pointer;
} div.code-toolbar > .toolbar a:hover, div.code-toolbar > .toolbar a:focus, div.code-toolbar > .toolbar button:hover, div.code-toolbar > .toolbar button:focus{
color: $black; text-decoration: none; outline:none;
}
/** Dark mode styles **/ body.dark-mode{
code[class*="language-"], pre[class*="language-"] { color: #ccc; text-shadow: 0 1px black; } :not(pre) > code[class*="language-"], pre[class*="language-"] { background: #2d2d2d; } .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata { color: #999; } .token.punctuation { color: #ccc; } .token.tag, .token.attr-name, .token.namespace, .token.deleted { color: #e2777a; } .token.function-name { color: #6196cc; } .token.boolean, .token.number, .token.function { color: #f08d49; } .token.property, .token.class-name, .token.constant, .token.symbol { color: #f8c555; } .token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin { color: #cc99cd; } .token.string, .token.char, .token.attr-value, .token.regex, .token.variable { color: #7ec699; } .token.operator, .token.entity, .token.url { color: #67cdcc; } .token.inserted { color: green; } .line-highlight{ background: rgba($white,.09); background: linear-gradient(to right, rgba($white,.09) 70%, rgba($white,0)); }
}