From 42709197f8a461369435540a3c01facac9a0a5dd Mon Sep 17 00:00:00 2001 From: dvdherron Date: Wed, 8 Feb 2023 14:23:21 -0600 Subject: [PATCH] wip adjust prism theme for syntax highlightling --- source/assets/sass/sass.scss | 6 - .../sass/vendor/_syntax-accessible.scss | 366 +++++------------- .../sass/vendor/typedoc/_highlight.scss | 15 +- source/index.md | 56 +++ 4 files changed, 163 insertions(+), 280 deletions(-) diff --git a/source/assets/sass/sass.scss b/source/assets/sass/sass.scss index 05b5a37..2acb6ef 100755 --- a/source/assets/sass/sass.scss +++ b/source/assets/sass/sass.scss @@ -36,9 +36,3 @@ @use 'components/sass-syntax-switcher'; @use 'components/tables'; @use 'regions/banner'; - -// @@@ Do we want this theme? -// @use 'prismjs/themes/prism.css'; - -// @@@ Or this one? Or neither? -@use 'vendor/prism-ghcolors'; diff --git a/source/assets/sass/vendor/_syntax-accessible.scss b/source/assets/sass/vendor/_syntax-accessible.scss index 7a06bb0..3c7e911 100644 --- a/source/assets/sass/vendor/_syntax-accessible.scss +++ b/source/assets/sass/vendor/_syntax-accessible.scss @@ -2,274 +2,104 @@ @use '../functions'; -// Stylesheet pulled from Rogue stylesheet with colours updated for a11y +/** + * Based on the GHColors theme by Avi Aryan (http://aviaryan.in) + * Inspired by Github syntax coloring + */ -.highlight table td { padding: functions.sl-px-to-rem(5px); } -.highlight table pre { margin: 0; } -.highlight .cm { - color: #656556; - font-style: italic; -} - -.highlight .cp { - color: #999999; - font-weight: bold; -} - -.highlight .c1 { - color: #656556; - font-style: italic; -} - -.highlight .cs { - color: #999999; - font-weight: bold; - font-style: italic; -} - -.highlight .c, .highlight .cd { - color: #006666; - font-style: italic; -} - -.highlight .err { - color: #a61717; - background-color: #e3d2d2; -} - -.highlight .gd { - color: #000000; - background-color: #ffdddd; -} - -.highlight .ge { - color: #000000; - font-style: italic; -} - -.highlight .gr { - color: #aa0000; -} - -.highlight .gh { - color: #999999; -} - -.highlight .gi { - color: #000000; - background-color: #ddffdd; -} - -.highlight .go { - color: #888888; -} - -.highlight .gp { - color: #555555; -} - -.highlight .gs { - font-weight: bold; -} - -.highlight .gu { - color: #aaaaaa; -} - -.highlight .gt { - color: #aa0000; -} - -.highlight .kc { - color: #000000; - font-weight: bold; -} - -.highlight .kd { - color: #000000; - font-weight: bold; -} - -.highlight .kn { - color: #000000; - font-weight: bold; -} - -.highlight .kp { - color: #000000; - font-weight: bold; -} - -.highlight .kr { - color: #000000; - font-weight: bold; -} - -.highlight .kt { - color: #445588; - font-weight: bold; -} - -.highlight .k, .highlight .kv { - color: #000000; - font-weight: bold; -} - -.highlight .mf { - color: #006666; -} - -.highlight .mh { - color: #006666; -} - -.highlight .il { - color: #006666; -} - -.highlight .mi { - color: #006666; -} - -.highlight .mo { - color: #006666; -} - -.highlight .m, .highlight .mb, .highlight .mx { - color: #006666; -} - -.highlight .sb { - color: #d14; -} - -.highlight .sc { - color: #d14; -} - -.highlight .sd { - color: #d14; -} - -.highlight .s2 { - color: #d14; -} - -.highlight .se { - color: #d14; -} - -.highlight .sh { - color: #d14; -} - -.highlight .si { - color: #d14; -} - -.highlight .sx { - color: #d14; -} - -.highlight .sr { - color: #006619; -} - -.highlight .s1 { - color: #d14; -} - -.highlight .ss { - color: #990073; -} - -.highlight .s { - color: #d14; -} - -.highlight .na { - color: #006666; -} - -.highlight .bp { - color: #666666; -} - -.highlight .nb { - color: #006080; -} - -.highlight .nc { - color: #445588; - font-weight: bold; -} - -.highlight .no { - color: #004D4D; -} - -.highlight .nd { - color: #3c5d5d; - font-weight: bold; -} - -.highlight .ni { - color: #800080; -} - -.highlight .ne { - color: #990000; - font-weight: bold; -} - -.highlight .nf { - color: #990000; - font-weight: bold; -} - -.highlight .nl { - color: #990000; - font-weight: bold; -} - -.highlight .nn { - color: #555555; -} - -.highlight .nt { - color: #000080; -} - -.highlight .vc { - color: #004D4D; -} - -.highlight .vg { - color: #004D4D; -} - -.highlight .vi { - color: #004D4D; -} - -.highlight .nv { - color: #006666; -} - -.highlight .ow { - color: #000000; - font-weight: bold; -} - -.highlight .o { - color: #000000; - font-weight: bold; -} - -.highlight .w { - color: #bbbbbb; -} - -.highlight { +code[class*="language-"], +pre[class*="language-"] { background-color: #f8f8f8; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + tab-size: 4; + hyphens: none; +} + +.token table td { padding: functions.sl-px-to-rem(5px); } +.token table pre { margin: 0; } +.token .cm { + color: #656556; + font-style: italic; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #656556; + font-style: italic; +} + +[class*="language-css"] { + & .token.comment { + color: #006666; + } +} + +.token.namespace { + opacity: .7; +} + +.token.string, +.token.attr-value { + color: #d14; +} + +.token.punctuation, +.token.operator { + color: #393A34; /* no highlight */ + font-weight: bold; +} + +.token.entity, +.token.url, +.token.symbol, +.token.number, +.token.boolean, +.token.constant, +.token.property, +.token.regex, +.token.inserted { + color: #990000; + font-weight: bold; +} + +.token.variable { + color: #006666; + font-weight: normal; +} + +.token.atrule, +.token.keyword, +.token.attr-name, +.language-autohotkey .token.selector { + color: #000000; + font-weight: bold; +} + +.token.function, +.token.deleted, +.language-autohotkey .token.tag { + color: #9a050f; +} + +.token.tag, +.token.selector, +.language-autohotkey .token.keyword { + color: #445588; + font-weight: bold; +} + +.token.important, +.token.function, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; } diff --git a/source/assets/sass/vendor/typedoc/_highlight.scss b/source/assets/sass/vendor/typedoc/_highlight.scss index 5951e97..6bbf27c 100644 --- a/source/assets/sass/vendor/typedoc/_highlight.scss +++ b/source/assets/sass/vendor/typedoc/_highlight.scss @@ -3,16 +3,19 @@ @use '../syntax-accessible'; // Colors updated to match the standard Sass styling. -.typedoc pre { @extend .highlight; } +.typedoc pre { @extend .token; } -.hl-0 { @extend .k; } -.hl-1 { @extend .p !optional; } +/* @@@ TODO: match selectors with prism classnames */ + + .hl-0 { @extend .keyword; } +/* .hl-1 { @extend .p !optional; } .hl-2 { @extend .na; } .hl-3 { @extend .nx !optional; } -.hl-4 { @extend .k; } +.hl-4 { @extend .keyword; } .hl-5 { @extend .s2; } -.hl-6 { @extend .k; } -.hl-7 { @extend .c1; } +.hl-6 { @extend .keyword; } +.hl-7 { @extend .comment; } .hl-8 { @extend .na; } .hl-9 { @extend .nx !optional; } .hl-10 { @extend .nb; } + */ diff --git a/source/index.md b/source/index.md index add347f..231073c 100644 --- a/source/index.md +++ b/source/index.md @@ -45,3 +45,59 @@ eleventyComputed: Glasses

+ + + +```scss +// styles.scss +@use 'base'; + +.inverse { + background-color: base.$primary-color; + color: white; +} +``` + +```scss +$font-stack: Helvetica, sans-serif; +$primary-color: #333; + +body { + font: 100% $font-stack; + color: $primary-color; +} + +.info { + @include theme; +} +``` + +```css +/* This CSS will print because %message-shared is extended. */ +.message, +.success, +.error, +.warning { + border: 1px solid #ccc; + padding: 10px; + color: #333; +} +``` + +```scss +@use 'sass:math'; + +.container { + display: flex; +} + +article[role='main'] { + width: math.div(600px, 960px) * 100%; +} +``` + +```scss +@debug math.pow(10, 2); // 100 +@debug math.pow(100, math.div(1, 3)); // 4.6415888336 +@debug math.pow(5, -2); // 0.04 +```