Something went wrong. Try again.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317code { font-family: "TX-02", monospace; font-size: var(--medium-size);
padding: 3px 8px; overflow-wrap: anywhere;
background-color: var(--palette0); border-radius: 5px;}
pre:has(code) { font-family: "TX-02", monospace; line-height: 1.4;
background-color: var(--palette0); border-radius: 5px;
padding: 10px 15px; overflow-y: auto;
code { padding: unset; border-radius: unset; }}
.block:has(pre > code) { pre { margin: 0 16px; }}
figure:has(pre > code) { margin: auto;
figcaption { text-align: center; }}
@mixin style($color: --none, $font-weight: 400, $font-style: normal) { color: var($color); font-weight: $font-weight; font-style: $font-style;
&::selection { background-color: var($color); color: var(--selection-foreground); }
&::-moz-selection { background-color: var($color); color: var(--selection-foreground); }}
// Syntax
code > .variable { // color: var(--fg); @include style($color: --fg);}
code > .variable_builtin { // color: var(--syn-special2); // font-style: italic; @include style($color: --syn-special2, $font-style: bold);}
code > .comment { // color: var(--syn-comment); @include style($color: --syn-comment, $font-style: italic);}
code > .constant,code > .markup_math,code > .attribute { // color: var(--syn-constant); @include style($color: --syn-constant);}
code > .string,code > .character,code > .markup_raw { // color: var(--syn-string); @include style($color: --syn-string);}
code > .number,code > .float { // color: var(--syn-number); @include style($color: --syn-number);}
code > .boolean { // color: var(--syn-constant); // font-weight: bold; @include style($color: --syn-constant, $font-weight: bold);}
code > .identifier { // color: var(--syn-identifier); @include style($color: --syn-identifier);}
code > .function,code > .function_call,code > .markup_heading { // color: var(--syn-fun); @include style($color: --syn-fun);}
code > .statement,code > .module { // color: var(--syn-statement); @include style($color: --syn-statement);}
code > .operator { // color: var(--syn-operator); @include style($color: --syn-operator);}
code > .keyword,code > .markup_environment { // color: var(--syn-keyword); @include style($color: --syn-keyword);}
code > .preproc,code > .keyword_import { // color: var(--syn-preproc); @include style($color: --syn-preproc);}
code > .type,code > .constructor.constant { // color: var(--syn-type); @include style($color: --syn-type);}
code > .type_builtin,code > .function_builtin { @include style($color: --syn-keyword);}
code > .special { // color: var(--syn-special1); @include style($color: --syn-special1);}
code > .delimiter { // color: var(--syn-punct); @include style($color: --syn-punct);}
code > .underlined { // color: var(--syn-special1); text-decoration: underline; @include style($color: --syn-special1);}
code > .bold { // font-weight: bold; @include style($font-weight: bold);}
code > .italic { // font-style: italic; @include style($font-style: italic);}
code > .error { // color: var(--diag-error); @include style($color: --diag-error);}
code > .todo { // color: var(--fg-reverse); background-color: var(--diag-info); // font-weight: bold; @include style($color: --fg-reverse, $font-weight: bold);}
// Treesitter
code > .variable_parameter { // color: var(--syn-parameter); @include style($color: --syn-parameter);}
code > .variable_member,code > .property,code > .tag_attribute { // color: var(--syn-identifier); @include style($color: --syn-identifier);}
code > .string_regexp { // color: var(--syn-regex); @include style($color: --syn-regex);}
code > .string_escape { // color: var(--syn-regex); // font-weight: bold; @include style($color: --syn-regex, $font-weight: bold);}
code > .string_special_symbol { // color: var(--syn-identifier); @include style($color: --syn-identifier);}
code > .string_special_url,code > .markup_link_url { // color: var(--syn-special1); text-decoration: wavy; @include style($color: --syn-special1);}
code > .constructor { // color: var(--syn-special1); @include style($color: --syn-special1);}
code > .keyword_operator { // color: var(--syn-operator); // font-weight: bold; @include style($color: --syn-operator, $font-weight: bold);}
code > .keyword_modifier,code > .keyword_function,code > .keyword_type { @include style($color: --syn-keyword);}
code > .keyword_return { @include style($color: --syn-special3);}
code > .keyword_conditional { @include style($color: --syn-keyword);}
code > .keyword_exception { @include style($color: --syn-special3, $font-weight: bold);}
code > .punctuation_delimiter,code > .punctuation_bracket,code > .tag_delimiter { @include style($color: --syn-punct);}
code > .punctuation_special { @include style($color: --syn-special1);}
code > .comment_error { background-color: var(--diag-error); @include style($color: --fg, $font-weight: bold);}
code > .comment_warning { background-color: var(--diag-warning); @include style($color: --fg, $font-weight: bold);}
code > .comment_note { color: var(--fg); background-color: var(--diag-hint); font-weight: bold; @include style($color: --syn-constant);}
code > .markup_strong { @include style($font-weight: bold);}
code > .markup_italic { @include style($font-style: italic);
&::selection { background-color: var(--selection-background); color: var(--selection-foreground); }
&::-moz-selection { background-color: var(--selection-background); color: var(--selection-foreground); }}
code > .markup_strikethrough { text-decoration: line-through;}
code > .markup_quote { @include style($color: --syn-parameter);}
code > .diff_plus { // color: var(--vcs-added); @include style($color: --syn-added);}
code > .diff_minus { @include style($color: --syn-removed);}
code > .diff_delta { @include style($color: --syn-changed);}