Modal

css/config.yml

@@ -5,6 +5,7 @@ title:              'Mellow'
 markup:
   highlight:
     style:          'monokailight'
+    noClasses:      false
   goldmark:
     renderer:
       unsafe:       true

css/hugo/assets/scss/_syntax.scss

@@ -0,0 +1,383 @@
+.chroma {
+  --sh-background-background: #{light-dark(#fafafa, #101010)};
+  --sh-background-color: #{light-dark(#101010, #fafafa)};
+  --sh-comment: #75715e;
+  --sh-error-background: #1e0010;
+  --sh-error-color: #960050;
+  --sh-generic-deleted-color: #{light-dark(inherit, #f92672)};
+  --sh-generic-inserted-color: #{light-dark(inherit, #a6e22e)};
+  --sh-generic-subheading-color: #{light-dark(inherit, #75715e)};
+  --sh-keyword-color: #{light-dark(#00a8c8, #66d9ef)};
+  --sh-keyword-constant-color: var(--sh-keyword-color);
+  --sh-keyword-declaration-color: var(--sh-keyword-color);
+  --sh-keyword-namespace-color: #f92672;
+  --sh-keyword-pseudo-color: var(--sh-keyword-color);
+  --sh-keyword-reserved-color: var(--sh-keyword-color);
+  --sh-keyword-type-color: var(--sh-keyword-color);
+  --sh-line-highlight-background: #ffc;
+  --sh-line-numbers-color: #7f7f7f;
+  --sh-literal-color: #ae81ff;
+  --sh-literal-date-color: #{light-dark(#d88200, #e6db74)};
+  --sh-literal-number-bin-color: var(--sh-literal-color);
+  --sh-literal-number-color: var(--sh-literal-color);
+  --sh-literal-number-float-color: var(--sh-literal-color);
+  --sh-literal-number-hex-color: var(--sh-literal-color);
+  --sh-literal-number-integer-color: var(--sh-literal-color);
+  --sh-literal-number-integer-long-color: var(--sh-literal-color);
+  --sh-literal-number-oct-color: var(--sh-literal-color);
+  --sh-literal-string-affix-color: var(--sh-literal-date-color);
+  --sh-literal-string-backtick-color: var(--sh-literal-date-color);
+  --sh-literal-string-char-color: var(--sh-literal-date-color);
+  --sh-literal-string-color: var(--sh-literal-date-color);
+  --sh-literal-string-delimiter-color: var(--sh-literal-date-color);
+  --sh-literal-string-doc-color: var(--sh-literal-date-color);
+  --sh-literal-string-double-color: var(--sh-literal-date-color);
+  --sh-literal-string-escape-color: var(--sh-literal-color);
+  --sh-literal-string-heredoc-color: var(--sh-literal-date-color);
+  --sh-literal-string-interpol-color: var(--sh-literal-date-color);
+  --sh-literal-string-other-color: var(--sh-literal-date-color);
+  --sh-literal-string-regex-color: var(--sh-literal-date-color);
+  --sh-literal-string-single-color: var(--sh-literal-date-color);
+  --sh-literal-string-symbol-color: var(--sh-literal-date-color);
+  --sh-name-attribute-color: #{light-dark(#75af00, #a6e22e)};
+  --sh-name-builtin-color: var(--sh-name-color);
+  --sh-name-builtin-pseudo-color: var(--sh-name-color);
+  --sh-name-class-color: var(--sh-name-attribute-color);
+  --sh-name-color: #{light-dark(#111, inherit)};
+  --sh-name-constant-color: #{light-dark(#00a8c8, #66d9ef)};
+  --sh-name-decorator-color: var(--sh-name-attribute-color);
+  --sh-name-entity-color: var(--sh-name-color);
+  --sh-name-exception-color: var(--sh-name-attribute-color);
+  --sh-name-function-color: var(--sh-name-attribute-color);
+  --sh-name-function-magic-color: var(--sh-name-color);
+  --sh-name-label-color: var(--sh-name-color);
+  --sh-name-namespace-color: var(--sh-name-color);
+  --sh-name-other-color: var(--sh-name-attribute-color);
+  --sh-name-property-color: var(--sh-name-color);
+  --sh-name-tag-color: var(--sh-keyword-namespace-color);
+  --sh-name-variable-class-color: var(--sh-name-color);
+  --sh-name-variable-color: var(--sh-name-color);
+  --sh-name-variable-global-color: var(--sh-name-color);
+  --sh-name-variable-instance-color: var(--sh-name-color);
+  --sh-name-variable-magic-color: var(--sh-name-color);
+  --sh-operator-color: var(--sh-keyword-namespace-color);
+  --sh-operator-word-color: var(--sh-keyword-namespace-color);
+  --sh-pre-wrapper-background: #{light-dark(#fafafa, #101010)};
+  --sh-pre-wrapper-color: #{light-dark(#101010, #fafafa)};
+  --sh-punctuation-color: var(--sh-name-color);
+
+  color: var(--sh-pre-wrapper-color);
+  background-color: var(--sh-pre-wrapper-background);
+}
+
+.bg {
+  color: var(--sh-background-color);
+  background-color: var(--sh-background-background);
+}
+
+.chroma .bp {
+  color: var(--sh-name-builtin-pseudo-color);
+}
+
+.chroma .c {
+  color: var(--sh-comment);
+}
+
+.chroma .c1 {
+  color: var(--sh-comment);
+}
+
+.chroma .ch {
+  color: var(--sh-comment);
+}
+
+.chroma .cm {
+  color: var(--sh-comment);
+}
+
+.chroma .cp {
+  color: var(--sh-comment);
+}
+
+.chroma .cpf {
+  color: var(--sh-comment);
+}
+
+.chroma .cs {
+  color: var(--sh-comment);
+}
+
+.chroma .dl {
+  color: var(--sh-literal-string-delimiter-colo);
+}
+
+.chroma .err {
+  color: var(--sh-error-color);
+  background-color: var(--sh-error-background);
+}
+
+.chroma .fm {
+  color: var(--sh-name-function-magic-color);
+}
+
+.chroma .gd {
+  color: var(--sh-generic-deleted-color);
+}
+
+.chroma .ge {
+  font-style: italic;
+}
+
+.chroma .gi {
+  color: var(--sh-generic-inserted-color);
+}
+
+.chroma .gs {
+  font-weight: bold;
+}
+
+.chroma .gu {
+  color: var(--sh-generic-subheading-color);
+}
+
+.chroma .hl {
+  background-color: var(--sh-line-highlight-background);
+}
+
+.chroma .il {
+  color: var(--sh-literal-number-integer-long-color);
+}
+
+.chroma .k {
+  color: var(--sh-keyword-color);
+}
+
+.chroma .kc {
+  color: var(--sh-keyword-constant-color);
+}
+
+.chroma .kd {
+  color: var(--sh-keyword-declaration-color);
+}
+
+.chroma .kn {
+  color: var(--sh-keyword-namespace-color);
+}
+
+.chroma .kp {
+  color: var(--sh-keyword-pseudo-color);
+}
+
+.chroma .kr {
+  color: var(--sh-keyword-reserved-color);
+}
+
+.chroma .kt {
+  color: var(--sh-keyword-type-color);
+}
+
+.chroma .l {
+  color: var(--sh-literal-color);
+}
+
+.chroma .ld {
+  color: var(--sh-literal-date-color);
+}
+
+.chroma .line {
+  display: flex;
+}
+
+.chroma .ln {
+  white-space: pre;
+  user-select: none;
+  margin-right: .4em;
+  padding: 0 .4em;
+  color: var(--sh-line-numbers-color);
+}
+
+.chroma .lnt {
+  white-space: pre;
+  user-select: none;
+  margin-right: .4em;
+  padding: 0 .4em;
+  color: var(--sh-line-numbers-color);
+}
+
+.chroma .lntable {
+  border-spacing: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.chroma .lntd {
+  vertical-align: top;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.chroma .m {
+  color: var(--sh-literal-number-color);
+}
+
+.chroma .mb {
+  color: var(--sh-literal-number-bin-color);
+}
+
+.chroma .mf {
+  color: var(--sh-literal-number-float-color);
+}
+
+.chroma .mh {
+  color: var(--sh-literal-number-hex-color);
+}
+
+.chroma .mi {
+  color: var(--sh-literal-number-integer-color);
+}
+
+.chroma .mo {
+  color: var(--sh-literal-number-oct-color);
+}
+
+.chroma .n {
+  color: var(--sh-name-color);
+}
+
+.chroma .na {
+  color: var(--sh-name-attribute-color);
+}
+
+.chroma .nb {
+  color: var(--sh-name-builtin-color);
+}
+
+.chroma .nc {
+  color: var(--sh-name-class-color);
+}
+
+.chroma .nd {
+  color: var(--sh-name-decorator-color);
+}
+
+.chroma .ne {
+  color: var(--sh-name-exception-color);
+}
+
+.chroma .nf {
+  color: var(--sh-name-function-color);
+}
+
+.chroma .ni {
+  color: var(--sh-name-entity-color);
+}
+
+.chroma .nl {
+  color: var(--sh-name-label-color);
+}
+
+.chroma .nn {
+  color: var(--sh-name-namespace-color);
+}
+
+.chroma .no {
+  color: var(--sh-name-constant-color);
+}
+
+.chroma .nt {
+  color: var(--sh-name-tag-color);
+}
+
+.chroma .nv {
+  color: var(--sh-name-variable-color);
+}
+
+.chroma .nx {
+  color: var(--sh-name-other-color);
+}
+
+.chroma .o {
+  color: var(--sh-operator-color);
+}
+
+.chroma .ow {
+  color: var(--sh-operator-word-color);
+}
+
+.chroma .p {
+  color: var(--sh-chroma-p-color);
+}
+
+.chroma .py {
+  color: var(--sh-name-property-color);
+}
+
+.chroma .s {
+  color: var(--sh-literal-string-color);
+}
+
+.chroma .s1 {
+  color: var(--sh-literal-string-single-color);
+}
+
+.chroma .s2 {
+  color: var(--sh-literal-string-double-color);
+}
+
+.chroma .sa {
+  color: var(--sh-literal-string-affix-color);
+}
+
+.chroma .sb {
+  color: var(--sh-literal-string-backtick-color);
+}
+
+.chroma .sc {
+  color: var(--sh-literal-string-char-color);
+}
+
+.chroma .sd {
+  color: var(--sh-literal-string-doc-color);
+}
+
+.chroma .se {
+  color: var(--sh-literal-string-escape-color);
+}
+
+.chroma .sh {
+  color: var(--sh-literal-string-heredoc-color);
+}
+
+.chroma .si {
+  color: var(--sh-literal-string-interpol-color);
+}
+
+.chroma .sr {
+  color: var(--sh-literal-string-regex-color);
+}
+
+.chroma .ss {
+  color: var(--sh-literal-string-symbol-color);
+}
+
+.chroma .sx {
+  color: var(--sh-literal-string-other-color);
+}
+
+.chroma .vc {
+  color: var(--sh-name-variable-class-color);
+}
+
+.chroma .vg {
+  color: var(--sh-name-variable-global-color);
+}
+
+.chroma .vi {
+  color: var(--sh-name-variable-instance-color);
+}
+
+.chroma .vm {
+  color: var(--sh-name-variable-magic-color);
+}