Skip to content

Commit

Permalink
docs(style): create sass for highlighting
Browse files Browse the repository at this point in the history
  • Loading branch information
johnstonskj committed Dec 29, 2023
1 parent e4cedf0 commit 9c8ba56
Show file tree
Hide file tree
Showing 9 changed files with 452 additions and 148 deletions.
124 changes: 62 additions & 62 deletions docs/index.html

Large diffs are not rendered by default.

230 changes: 144 additions & 86 deletions docs/sdml-io.css
Original file line number Diff line number Diff line change
Expand Up @@ -209,122 +209,180 @@ footer .content p .hashtag::before {
color: #e68ebc;
}

/* Source Code -- Base https://simonkjohnston.life/solarized.html */
pre.src {
background-color: #fdf6e3;
color: #002b36;
font-family: 'Fira Code', monospace;
font-size: 0.8em;
font-weight: 400;
}
pre.src .linenr {
color: #657b83;
}
pre.src .keyword {
color: #b58900;
/* Source Code -- Generated from ../sass/highlight.scss */
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap");
pre {
background: #fdf6e3;
color: #002b36;
font-family: "Fira Code", monospace;
font-size: 0.8em;
font-weight: 400;
}
pre.src .operator {
color: #b58900;
font-weight: 300;
pre > code {
font-family: "Fira Code", monospace;
}
pre.src .type-definition {
color: #268bd2;
font-weight: 600;
pre > code span.comment {
color: #93a1a1;
font-weight: 300;
}
pre.src .type {
color: #268bd2;
pre > code span.comment-line {
color: #93a1a1;
font-weight: 300;
}
pre.src .type-builtin {
color: #6c71c4;
pre > code span.comment-block {
color: #93a1a1;
font-weight: 300;
}
pre.src .module-definition {
color: #268bd2;
font-weight: 600;
pre > code span.constant {
color: #859900;
font-weight: 600;
}
pre.src .module {
color: #268bd2;
pre > code span.constant-builtin {
color: #859900;
font-weight: 600;
}
pre.src .punctuation {
color: #586e75;
font-weight: 300;
pre > code span.error {
color: #cb4b16;
font-weight: 700;
text-decoration: underline;
}
pre.src .punctuation-separator {
color: #586e75;
font-weight: 300;
pre > code span.function {
color: #2aa198;
}
pre.src .punctuation-bracket {
color: #586e75;
font-weight: 300;
pre > code span.function-call {
color: #2aa198;
}
pre.src .comment { /* plus: comment-line, comment-block */
color: #93a1a1;
font-style: italic;
font-weight: 300;
pre > code span.function-builtin-call {
color: #2aa198;
}
pre.src .variable.definition {
color: #cb4b16;
font-weight: 600;
pre > code span.function-definition {
color: #2aa198;
font-weight: 700;
}
pre.src .variable {
color: #cb4b16;
pre > code span.keyword {
color: #b58900;
}
pre.src .variable-builtin {
color: #cb4b16;
pre > code span.linenr {
color: #657b83;
font-weight: 300;
}
pre.src .function-definition {
color: #2aa198;
font-weight: 600;
pre > code span.literal {
color: #859900;
font-weight: 600;
}
pre.src .function-call {
color: #2aa198;
pre > code span.literal-boolean {
color: #859900;
font-weight: 600;
}
pre.src .function-builtin-call {
color: #2aa198;
pre > code span.literal-number {
color: #859900;
font-weight: 600;
}
pre.src .property {
color: #d33682;
pre > code span.literal-string {
color: #859900;
font-weight: 600;
}
pre.src .literal {
color: #859900;
font-weight: 500;
pre > code span.literal-string-special {
color: #859900;
font-weight: 600;
}
pre.src .constant {
color: #859900;
font-weight: 500;
pre > code span.method {
color: #2aa198;
}

/* Source Code -- SDML */
pre.src-sdml .type-variant {
color: #268bd2;
pre > code span.method-call {
color: #2aa198;
}
pre > code span.method-definition {
color: #2aa198;
font-weight: 700;
}
pre > code span.module {
color: #268bd2;
}
pre > code span.module-builtin {
color: #6c71c4;
}
pre > code span.module-definition {
color: #268bd2;
font-weight: 700;
}
pre > code span.operator {
color: #b58900;
font-weight: 300;
}
pre > code span.property-annotation {
color: #d33682;
}
pre > code span.property-constraint {
color: #d33682;
}
pre.src-sdml .property-annotation {
color: #d33682;
pre > code span.punctuation {
color: #586e75;
font-weight: 300;
}
pre.src-sdml .property-constraint {
color: #d33682;
pre > code span.punctuation-bracket {
color: #586e75;
font-weight: 300;
}
pre.src-sdml .literal-number {
color: #859900;
font-weight: 500;
pre > code span.punctuation-delimiter {
color: #586e75;
font-weight: 300;
}
pre.src-sdml .literal-string {
color: #859900;
font-weight: 500;
pre > code span.punctuation-separator {
color: #586e75;
font-weight: 300;
}
pre.src-sdml .constant-unbounded {
color: #859900;
pre > code span.type {
color: #268bd2;
}
pre > code span.type-builtin {
color: #6c71c4;
}
pre > code span.type-definition {
color: #268bd2;
font-weight: 700;
}
pre > code span.variable {
color: #002b36;
}
pre > code span.variable-builtin {
color: #002b36;
}
pre > code span.variable-definition {
color: #002b36;
font-weight: 700;
}
pre > code span.variable-field {
color: #002b36;
}
pre > code span.variable-parameter {
color: #002b36;
}
pre > code span.warning {
text-decoration: underline;
}

pre.src-repl .prompt {
color: #93a1a1;
pre > code.sdml span.constant-unbounded {
color: #859900;
}
pre.src-repl .command {
font-weight: 500;
pre > code.sdml span.type-variant {
color: #268bd2;
}
pre.src-repl strong {
font-weight: 600;
pre > code.sdml span.value-variant {
color: #859900;
}

pre > code.shell span.prompt {
color: #93a1a1;
}
pre > code.shell span.command {
color: #002b36;
font-weight: 500;
}
pre > code.shell strong {
font-weight: 700;
}
pre.src-repl em {
pre > code.shell em {
font-style: normal;
text-decoration: underline;
}
5 changes: 5 additions & 0 deletions sass/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# -*- mode: gitignore; -*-

### SASS ###

/.sass-cache/
15 changes: 15 additions & 0 deletions sass/fonts/_firacode.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');

$font: (
name: 'Fira Code',
fallback: monospace,
size: 0.8em,

weights: (
light: 300,
normal: 400,
medium: 500,
semi-bold: 600,
bold: 700,
),
)
17 changes: 17 additions & 0 deletions sass/highlight.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
@use "fonts/firacode";
@use "themes/solarized-light/colors";

@use "language/base" with (
$font: firacode.$font,
$color-map: colors.$color,
);

@use "language/sdml" with (
$font: firacode.$font,
$color-map: colors.$color,
);

@use "language/sh" with (
$font: firacode.$font,
$color-map: colors.$color,
);
76 changes: 76 additions & 0 deletions sass/language/_base.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
@use "sass:map";
@use "sass:meta";

$color-map: () !default;
$font: () !default;

@mixin code-span($in-color-map, $in-font, $class, $color: '', $weight: '', $decoration: '') {
span.#{$class} {
@if $color == '' {
color: map.get($in-color-map, $class);
} @else {
color: map.get($in-color-map, $color);
}
@if $weight != '' {
font-weight: map.get($in-font, weights, $weight);
}
@if $decoration != '' {
text-decoration: $decoration;
}
}
}

@mixin base-code-span($class, $color: '', $weight: '', $decoration: '') {
@include code-span($color-map, $font, $class, $color, $weight, $decoration);
}

pre {
$-font-family: map.get($font, name), map.get($font, fallback);
background: map.get($color-map, background);
color: map.get($color-map, default);
font-family: $-font-family;
font-size: map.get($font, size);
font-weight: map.get($font, weights, normal);
> code {
font-family: $-font-family;
@include base-code-span(comment, $weight: light);
@include base-code-span(comment-line, $weight: light);
@include base-code-span(comment-block, $weight: light);
@include base-code-span(constant, $weight: semi-bold);
@include base-code-span(constant-builtin, $weight: semi-bold);
@include base-code-span(error, $weight: bold, $decoration: underline);
@include base-code-span(function);
@include base-code-span(function-call);
@include base-code-span(function-builtin-call);
@include base-code-span(function-definition, $weight: bold);
@include base-code-span(keyword);
@include base-code-span(linenr, $weight: light);
@include base-code-span(literal, $weight: semi-bold);
@include base-code-span(literal-boolean, $weight: semi-bold);
@include base-code-span(literal-number, $weight: semi-bold);
@include base-code-span(literal-string, $weight: semi-bold);
@include base-code-span(literal-string-special, $weight: semi-bold);
@include base-code-span(method);
@include base-code-span(method-call);
@include base-code-span(method-definition, $weight: bold);
@include base-code-span(module);
@include base-code-span(module-builtin);
@include base-code-span(module-definition, $weight: bold);
@include base-code-span(operator, $weight: light);
@include base-code-span(property-annotation);
@include base-code-span(property-constraint);
@include base-code-span(punctuation, $weight: light);
@include base-code-span(punctuation-bracket, $weight: light);
@include base-code-span(punctuation-delimiter, $weight: light);
@include base-code-span(punctuation-separator, $weight: light);
@include base-code-span(type);
@include base-code-span(type-builtin);
@include base-code-span(type-definition, $weight: bold);
@include base-code-span(variable);
@include base-code-span(variable-builtin);
@include base-code-span(variable-definition, $weight: bold);
@include base-code-span(variable-field);
@include base-code-span(variable-parameter);
@include base-code-span(warning, $decoration: underline);
}
}
Loading

0 comments on commit 9c8ba56

Please sign in to comment.