From b579c4e255e1fe440a7dad13278e83e3e756650d Mon Sep 17 00:00:00 2001 From: Jeff Escalante Date: Tue, 18 Feb 2020 17:27:18 -0500 Subject: [PATCH] initial stab at prism highlighting --- website/pages/style.css | 225 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 225 insertions(+) diff --git a/website/pages/style.css b/website/pages/style.css index 9e1186279..3fe7df7fc 100644 --- a/website/pages/style.css +++ b/website/pages/style.css @@ -198,3 +198,228 @@ font-style: normal; font-weight: 400; } + +/* TEMPORARY - prism stylesheet */ + +pre[class*='language-'], +code[class*='language-'] { + color: #d4d4d4; + font-size: 13px; + text-shadow: none; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*='language-']::selection, +code[class*='language-']::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + pre[class*='language-'], + code[class*='language-'] { + text-shadow: none; + } +} + +pre[class*='language-'] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; + background: #1e1e1e; +} + +:not(pre) > code[class*='language-'] { + padding: 0.1em 0.3em; + border-radius: 0.3em; + color: #db4c69; + background: #f9f2f4; +} +/********************************************************* +* Tokens +*/ +.namespace { + opacity: 0.7; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #6a9955; +} + +.token.punctuation { + color: #d4d4d4; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #b5cea8; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #ce9178; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #d4d4d4; + background: #1e1e1e; +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #c586c0; +} + +.token.function { + color: #dcdcaa; +} + +.token.regex, +.token.important, +.token.variable { + color: #d16969; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.constant { + color: #9cdcfe; +} + +.token.class-name { + color: #4ec9b0; +} + +.token.parameter { + color: #9cdcfe; +} + +.token.interpolation { + color: #9cdcfe; +} + +.token.punctuation.interpolation-punctuation { + color: #569cd6; +} + +.token.boolean { + color: #569cd6; +} + +.token.property { + color: #9cdcfe; +} + +.token.selector { + color: #d7ba7d; +} + +.token.tag { + color: #569cd6; +} + +.token.attr-name { + color: #9cdcfe; +} + +.token.attr-value { + color: #ce9178; +} + +.token.entity { + color: #4ec9b0; + cursor: unset; +} + +.token.namespace { + color: #4ec9b0; +} +/********************************************************* +* Language Specific +*/ +pre[class*='language-javascript'], +code[class*='language-javascript'] { + color: #4ec9b0; +} + +pre[class*='language-css'], +code[class*='language-css'] { + color: #ce9178; +} + +pre[class*='language-html'], +code[class*='language-html'] { + color: #d4d4d4; +} + +.language-html .token.punctuation { + color: #808080; +} +/********************************************************* +* Line highlighting +*/ +pre[data-line] { + position: relative; +} + +pre[class*='language-'] > code[class*='language-'] { + position: relative; + z-index: 1; +} + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; + background: #f7ebc6; + box-shadow: inset 5px 0 0 #f7d87c; + z-index: 0; + pointer-events: none; + line-height: inherit; + white-space: pre; +} + +/* overrides */ + +.g-content pre code { + background: none; +}