From 661d1ee1b16769e26c369f9415ed91e56cf8ec07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lera=20Elvo=C3=A9?= Date: Sun, 12 Oct 2025 23:47:14 +0300 Subject: [PATCH] add code highlighting --- app/lib/babycode.py | 18 +- app/templates/babycode.html | 5 +- data/static/css/style.css | 379 ++++++++++++++++++++++++++-- data/static/css/theme-otomotone.css | 379 ++++++++++++++++++++++++++-- data/static/css/theme-peachy.css | 379 ++++++++++++++++++++++++++-- sass/_default.scss | 95 ++++++- 6 files changed, 1197 insertions(+), 58 deletions(-) diff --git a/app/lib/babycode.py b/app/lib/babycode.py index 680c1ca..234ef82 100644 --- a/app/lib/babycode.py +++ b/app/lib/babycode.py @@ -1,5 +1,9 @@ from .babycode_parser import Parser from markupsafe import Markup, escape +from pygments import highlight +from pygments.formatters import HtmlFormatter +from pygments.lexers import get_lexer_by_name +from pygments.util import ClassNotFound as PygmentsClassNotFound import re BABYCODE_VERSION = 4 @@ -56,9 +60,17 @@ def tag_code(children, attr, surrounding): if is_inline: return f"{children}" else: - t = children.strip() - button = f"" - return f"
{button}{t}
" + input_code = children.strip() + button = f"" + unhighlighted = f"
code block{button}{input_code}
" + if not attr: + return unhighlighted + try: + lexer = get_lexer_by_name(attr.strip()) + formatter = HtmlFormatter(nowrap=True) + return f"
{lexer.name}{button}{highlight(input_code.unescape(), lexer, formatter)}
" + except PygmentsClassNotFound: + return unhighlighted def tag_list(children): list_body = re.sub(r" +\n", "
", children.strip()) diff --git a/app/templates/babycode.html b/app/templates/babycode.html index 5775b43..ac5c173 100644 --- a/app/templates/babycode.html +++ b/app/templates/babycode.html @@ -11,6 +11,8 @@

What is babycode?

You may be familiar with BBCode, a loosely related family of markup languages popular on forums. Babycode is another, simplified, dialect of those languages. It is a way of formatting text by enclosing parts of it in special tags.

+

A tag is a short name enclosed in square brackets. Tags can be opening tags, like [b] or closing tags, like [/b]. Anything inserted between matching opening and closing tags is known as the tag's content.

+

Some tags can provide more specific instructions using an attribute. An attribute is added to the opening tag with an equals sign (=). This allows you to specify details like a particular color or a link's address.

Text formatting tags

@@ -135,7 +137,8 @@ {% set code = 'func _ready() -> void:\n\tprint("hello world!")' %}

There are two kinds of code blocks recognized by babycode: inline and block. Inline code blocks do not break a paragraph. They can be added with [code]your code here[/code]. As long as there are no line breaks inside the code block, it is considered inline. If there are any, it will produce this:

{{ ('[code]%s[/code]' % code) | babycode | safe }} -
+

Optionally, you can enable syntax highlighting by specifying the language in the attribute like this: [code=gdscript]

+ {{ ('[code=gdscript]%s[/code]' % code) | babycode | safe}}

Inline code tags look like this: {{ '[code]Inline code[/code]' | babycode | safe }}

Babycodes are not parsed inside code blocks.

diff --git a/data/static/css/style.css b/data/static/css/style.css index 9be3a50..8046d47 100644 --- a/data/static/css/style.css +++ b/data/static/css/style.css @@ -194,13 +194,356 @@ pre code { overflow: scroll; tab-size: 4; } +pre code .hll { + background-color: #6e7681; +} +pre code .c { + color: #8B949E; + font-style: italic; +} +pre code { /* Comment */ } +pre code .err { + color: #F85149; +} +pre code { /* Error */ } +pre code .esc { + color: #E6EDF3; +} +pre code { /* Escape */ } +pre code .g { + color: #E6EDF3; +} +pre code { /* Generic */ } +pre code .k { + color: #FF7B72; +} +pre code { /* Keyword */ } +pre code .l { + color: #A5D6FF; +} +pre code { /* Literal */ } +pre code .n { + color: #E6EDF3; +} +pre code { /* Name */ } +pre code .o { + color: #FF7B72; + font-weight: bold; +} +pre code { /* Operator */ } +pre code .x { + color: #E6EDF3; +} +pre code { /* Other */ } +pre code .p { + color: #E6EDF3; +} +pre code { /* Punctuation */ } +pre code .ch { + color: #8B949E; + font-style: italic; +} +pre code { /* Comment.Hashbang */ } +pre code .cm { + color: #8B949E; + font-style: italic; +} +pre code { /* Comment.Multiline */ } +pre code .cp { + color: #8B949E; + font-weight: bold; + font-style: italic; +} +pre code { /* Comment.Preproc */ } +pre code .cpf { + color: #8B949E; + font-style: italic; +} +pre code { /* Comment.PreprocFile */ } +pre code .c1 { + color: #8B949E; + font-style: italic; +} +pre code { /* Comment.Single */ } +pre code .cs { + color: #8B949E; + font-weight: bold; + font-style: italic; +} +pre code { /* Comment.Special */ } +pre code .gd { + color: #FFA198; + background-color: #490202; +} +pre code { /* Generic.Deleted */ } +pre code .ge { + color: #E6EDF3; + font-style: italic; +} +pre code { /* Generic.Emph */ } +pre code .ges { + color: #E6EDF3; + font-weight: bold; + font-style: italic; +} +pre code { /* Generic.EmphStrong */ } +pre code .gr { + color: #FFA198; +} +pre code { /* Generic.Error */ } +pre code .gh { + color: #79C0FF; + font-weight: bold; +} +pre code { /* Generic.Heading */ } +pre code .gi { + color: #56D364; + background-color: #0F5323; +} +pre code { /* Generic.Inserted */ } +pre code .go { + color: #8B949E; +} +pre code { /* Generic.Output */ } +pre code .gp { + color: #8B949E; +} +pre code { /* Generic.Prompt */ } +pre code .gs { + color: #E6EDF3; + font-weight: bold; +} +pre code { /* Generic.Strong */ } +pre code .gu { + color: #79C0FF; +} +pre code { /* Generic.Subheading */ } +pre code .gt { + color: #FF7B72; +} +pre code { /* Generic.Traceback */ } +pre code .g-Underline { + color: #E6EDF3; + text-decoration: underline; +} +pre code { /* Generic.Underline */ } +pre code .kc { + color: #79C0FF; +} +pre code { /* Keyword.Constant */ } +pre code .kd { + color: #FF7B72; +} +pre code { /* Keyword.Declaration */ } +pre code .kn { + color: #FF7B72; +} +pre code { /* Keyword.Namespace */ } +pre code .kp { + color: #79C0FF; +} +pre code { /* Keyword.Pseudo */ } +pre code .kr { + color: #FF7B72; +} +pre code { /* Keyword.Reserved */ } +pre code .kt { + color: #FF7B72; +} +pre code { /* Keyword.Type */ } +pre code .ld { + color: #79C0FF; +} +pre code { /* Literal.Date */ } +pre code .m { + color: #A5D6FF; +} +pre code { /* Literal.Number */ } +pre code .s { + color: #A5D6FF; +} +pre code { /* Literal.String */ } +pre code .na { + color: #E6EDF3; +} +pre code { /* Name.Attribute */ } +pre code .nb { + color: #E6EDF3; +} +pre code { /* Name.Builtin */ } +pre code .nc { + color: #F0883E; + font-weight: bold; +} +pre code { /* Name.Class */ } +pre code .no { + color: #79C0FF; + font-weight: bold; +} +pre code { /* Name.Constant */ } +pre code .nd { + color: #D2A8FF; + font-weight: bold; +} +pre code { /* Name.Decorator */ } +pre code .ni { + color: #FFA657; +} +pre code { /* Name.Entity */ } +pre code .ne { + color: #F0883E; + font-weight: bold; +} +pre code { /* Name.Exception */ } +pre code .nf { + color: #D2A8FF; + font-weight: bold; +} +pre code { /* Name.Function */ } +pre code .nl { + color: #79C0FF; + font-weight: bold; +} +pre code { /* Name.Label */ } +pre code .nn { + color: #FF7B72; +} +pre code { /* Name.Namespace */ } +pre code .nx { + color: #E6EDF3; +} +pre code { /* Name.Other */ } +pre code .py { + color: #79C0FF; +} +pre code { /* Name.Property */ } +pre code .nt { + color: #7EE787; +} +pre code { /* Name.Tag */ } +pre code .nv { + color: #79C0FF; +} +pre code { /* Name.Variable */ } +pre code .ow { + color: #FF7B72; + font-weight: bold; +} +pre code { /* Operator.Word */ } +pre code .pm { + color: #E6EDF3; +} +pre code { /* Punctuation.Marker */ } +pre code .w { + color: #6E7681; +} +pre code { /* Text.Whitespace */ } +pre code .mb { + color: #A5D6FF; +} +pre code { /* Literal.Number.Bin */ } +pre code .mf { + color: #A5D6FF; +} +pre code { /* Literal.Number.Float */ } +pre code .mh { + color: #A5D6FF; +} +pre code { /* Literal.Number.Hex */ } +pre code .mi { + color: #A5D6FF; +} +pre code { /* Literal.Number.Integer */ } +pre code .mo { + color: #A5D6FF; +} +pre code { /* Literal.Number.Oct */ } +pre code .sa { + color: #79C0FF; +} +pre code { /* Literal.String.Affix */ } +pre code .sb { + color: #A5D6FF; +} +pre code { /* Literal.String.Backtick */ } +pre code .sc { + color: #A5D6FF; +} +pre code { /* Literal.String.Char */ } +pre code .dl { + color: #79C0FF; +} +pre code { /* Literal.String.Delimiter */ } +pre code .sd { + color: #A5D6FF; +} +pre code { /* Literal.String.Doc */ } +pre code .s2 { + color: #A5D6FF; +} +pre code { /* Literal.String.Double */ } +pre code .se { + color: #79C0FF; +} +pre code { /* Literal.String.Escape */ } +pre code .sh { + color: #79C0FF; +} +pre code { /* Literal.String.Heredoc */ } +pre code .si { + color: #A5D6FF; +} +pre code { /* Literal.String.Interpol */ } +pre code .sx { + color: #A5D6FF; +} +pre code { /* Literal.String.Other */ } +pre code .sr { + color: #79C0FF; +} +pre code { /* Literal.String.Regex */ } +pre code .s1 { + color: #A5D6FF; +} +pre code { /* Literal.String.Single */ } +pre code .ss { + color: #A5D6FF; +} +pre code { /* Literal.String.Symbol */ } +pre code .bp { + color: #E6EDF3; +} +pre code { /* Name.Builtin.Pseudo */ } +pre code .fm { + color: #D2A8FF; + font-weight: bold; +} +pre code { /* Name.Function.Magic */ } +pre code .vc { + color: #79C0FF; +} +pre code { /* Name.Variable.Class */ } +pre code .vg { + color: #79C0FF; +} +pre code { /* Name.Variable.Global */ } +pre code .vi { + color: #79C0FF; +} +pre code { /* Name.Variable.Instance */ } +pre code .vm { + color: #79C0FF; +} +pre code { /* Name.Variable.Magic */ } +pre code .il { + color: #A5D6FF; +} +pre code { /* Literal.Number.Integer.Long */ } .copy-code-container { - position: sticky; - width: calc(100% - 4px); display: flex; justify-content: space-between; - align-items: last baseline; + align-items: baseline; font-family: "Cadman"; border-top-right-radius: 8px; border-top-left-radius: 8px; @@ -209,8 +552,8 @@ pre code { border-right: 2px solid black; border-top: 2px solid black; } -.copy-code-container::before { - content: "code block"; + +.code-language-identifier { font-style: italic; margin-left: 10px; } @@ -384,7 +727,6 @@ button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced { input[type=file]::file-selector-button { background-color: rgb(177, 206, 204.5); color: black !important; - margin: 10px; } input[type=file]::file-selector-button:hover { background-color: rgb(192.6, 215.8, 214.6); @@ -399,6 +741,9 @@ input[type=file]::file-selector-button.reduced { margin: 0; padding: 5px; } +input[type=file]::file-selector-button { + margin: 10px; +} p { margin: 15px 0; @@ -407,11 +752,6 @@ p { .pagebutton { background-color: rgb(177, 206, 204.5); color: black !important; - padding: 5px 5px; - margin: 0; - display: inline-block; - min-width: 20px; - text-align: center; } .pagebutton:hover { background-color: rgb(192.6, 215.8, 214.6); @@ -426,6 +766,13 @@ p { margin: 0; padding: 5px; } +.pagebutton { + padding: 5px 5px; + margin: 0; + display: inline-block; + min-width: 20px; + text-align: center; +} .currentpage { border: none; @@ -714,10 +1061,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus .tab-button { background-color: rgb(177, 206, 204.5); color: black !important; - border-bottom: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - margin-bottom: 0; } .tab-button:hover { background-color: rgb(192.6, 215.8, 214.6); @@ -732,6 +1075,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus margin: 0; padding: 5px; } +.tab-button { + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + margin-bottom: 0; +} .tab-button.active { background-color: #beb1ce; padding-top: 8px; diff --git a/data/static/css/theme-otomotone.css b/data/static/css/theme-otomotone.css index a2f43e2..07a2272 100644 --- a/data/static/css/theme-otomotone.css +++ b/data/static/css/theme-otomotone.css @@ -194,13 +194,356 @@ pre code { overflow: scroll; tab-size: 4; } +pre code .hll { + background-color: #6e7681; +} +pre code .c { + color: #8B949E; + font-style: italic; +} +pre code { /* Comment */ } +pre code .err { + color: #F85149; +} +pre code { /* Error */ } +pre code .esc { + color: #E6EDF3; +} +pre code { /* Escape */ } +pre code .g { + color: #E6EDF3; +} +pre code { /* Generic */ } +pre code .k { + color: #FF7B72; +} +pre code { /* Keyword */ } +pre code .l { + color: #A5D6FF; +} +pre code { /* Literal */ } +pre code .n { + color: #E6EDF3; +} +pre code { /* Name */ } +pre code .o { + color: #FF7B72; + font-weight: bold; +} +pre code { /* Operator */ } +pre code .x { + color: #E6EDF3; +} +pre code { /* Other */ } +pre code .p { + color: #E6EDF3; +} +pre code { /* Punctuation */ } +pre code .ch { + color: #8B949E; + font-style: italic; +} +pre code { /* Comment.Hashbang */ } +pre code .cm { + color: #8B949E; + font-style: italic; +} +pre code { /* Comment.Multiline */ } +pre code .cp { + color: #8B949E; + font-weight: bold; + font-style: italic; +} +pre code { /* Comment.Preproc */ } +pre code .cpf { + color: #8B949E; + font-style: italic; +} +pre code { /* Comment.PreprocFile */ } +pre code .c1 { + color: #8B949E; + font-style: italic; +} +pre code { /* Comment.Single */ } +pre code .cs { + color: #8B949E; + font-weight: bold; + font-style: italic; +} +pre code { /* Comment.Special */ } +pre code .gd { + color: #FFA198; + background-color: #490202; +} +pre code { /* Generic.Deleted */ } +pre code .ge { + color: #E6EDF3; + font-style: italic; +} +pre code { /* Generic.Emph */ } +pre code .ges { + color: #E6EDF3; + font-weight: bold; + font-style: italic; +} +pre code { /* Generic.EmphStrong */ } +pre code .gr { + color: #FFA198; +} +pre code { /* Generic.Error */ } +pre code .gh { + color: #79C0FF; + font-weight: bold; +} +pre code { /* Generic.Heading */ } +pre code .gi { + color: #56D364; + background-color: #0F5323; +} +pre code { /* Generic.Inserted */ } +pre code .go { + color: #8B949E; +} +pre code { /* Generic.Output */ } +pre code .gp { + color: #8B949E; +} +pre code { /* Generic.Prompt */ } +pre code .gs { + color: #E6EDF3; + font-weight: bold; +} +pre code { /* Generic.Strong */ } +pre code .gu { + color: #79C0FF; +} +pre code { /* Generic.Subheading */ } +pre code .gt { + color: #FF7B72; +} +pre code { /* Generic.Traceback */ } +pre code .g-Underline { + color: #E6EDF3; + text-decoration: underline; +} +pre code { /* Generic.Underline */ } +pre code .kc { + color: #79C0FF; +} +pre code { /* Keyword.Constant */ } +pre code .kd { + color: #FF7B72; +} +pre code { /* Keyword.Declaration */ } +pre code .kn { + color: #FF7B72; +} +pre code { /* Keyword.Namespace */ } +pre code .kp { + color: #79C0FF; +} +pre code { /* Keyword.Pseudo */ } +pre code .kr { + color: #FF7B72; +} +pre code { /* Keyword.Reserved */ } +pre code .kt { + color: #FF7B72; +} +pre code { /* Keyword.Type */ } +pre code .ld { + color: #79C0FF; +} +pre code { /* Literal.Date */ } +pre code .m { + color: #A5D6FF; +} +pre code { /* Literal.Number */ } +pre code .s { + color: #A5D6FF; +} +pre code { /* Literal.String */ } +pre code .na { + color: #E6EDF3; +} +pre code { /* Name.Attribute */ } +pre code .nb { + color: #E6EDF3; +} +pre code { /* Name.Builtin */ } +pre code .nc { + color: #F0883E; + font-weight: bold; +} +pre code { /* Name.Class */ } +pre code .no { + color: #79C0FF; + font-weight: bold; +} +pre code { /* Name.Constant */ } +pre code .nd { + color: #D2A8FF; + font-weight: bold; +} +pre code { /* Name.Decorator */ } +pre code .ni { + color: #FFA657; +} +pre code { /* Name.Entity */ } +pre code .ne { + color: #F0883E; + font-weight: bold; +} +pre code { /* Name.Exception */ } +pre code .nf { + color: #D2A8FF; + font-weight: bold; +} +pre code { /* Name.Function */ } +pre code .nl { + color: #79C0FF; + font-weight: bold; +} +pre code { /* Name.Label */ } +pre code .nn { + color: #FF7B72; +} +pre code { /* Name.Namespace */ } +pre code .nx { + color: #E6EDF3; +} +pre code { /* Name.Other */ } +pre code .py { + color: #79C0FF; +} +pre code { /* Name.Property */ } +pre code .nt { + color: #7EE787; +} +pre code { /* Name.Tag */ } +pre code .nv { + color: #79C0FF; +} +pre code { /* Name.Variable */ } +pre code .ow { + color: #FF7B72; + font-weight: bold; +} +pre code { /* Operator.Word */ } +pre code .pm { + color: #E6EDF3; +} +pre code { /* Punctuation.Marker */ } +pre code .w { + color: #6E7681; +} +pre code { /* Text.Whitespace */ } +pre code .mb { + color: #A5D6FF; +} +pre code { /* Literal.Number.Bin */ } +pre code .mf { + color: #A5D6FF; +} +pre code { /* Literal.Number.Float */ } +pre code .mh { + color: #A5D6FF; +} +pre code { /* Literal.Number.Hex */ } +pre code .mi { + color: #A5D6FF; +} +pre code { /* Literal.Number.Integer */ } +pre code .mo { + color: #A5D6FF; +} +pre code { /* Literal.Number.Oct */ } +pre code .sa { + color: #79C0FF; +} +pre code { /* Literal.String.Affix */ } +pre code .sb { + color: #A5D6FF; +} +pre code { /* Literal.String.Backtick */ } +pre code .sc { + color: #A5D6FF; +} +pre code { /* Literal.String.Char */ } +pre code .dl { + color: #79C0FF; +} +pre code { /* Literal.String.Delimiter */ } +pre code .sd { + color: #A5D6FF; +} +pre code { /* Literal.String.Doc */ } +pre code .s2 { + color: #A5D6FF; +} +pre code { /* Literal.String.Double */ } +pre code .se { + color: #79C0FF; +} +pre code { /* Literal.String.Escape */ } +pre code .sh { + color: #79C0FF; +} +pre code { /* Literal.String.Heredoc */ } +pre code .si { + color: #A5D6FF; +} +pre code { /* Literal.String.Interpol */ } +pre code .sx { + color: #A5D6FF; +} +pre code { /* Literal.String.Other */ } +pre code .sr { + color: #79C0FF; +} +pre code { /* Literal.String.Regex */ } +pre code .s1 { + color: #A5D6FF; +} +pre code { /* Literal.String.Single */ } +pre code .ss { + color: #A5D6FF; +} +pre code { /* Literal.String.Symbol */ } +pre code .bp { + color: #E6EDF3; +} +pre code { /* Name.Builtin.Pseudo */ } +pre code .fm { + color: #D2A8FF; + font-weight: bold; +} +pre code { /* Name.Function.Magic */ } +pre code .vc { + color: #79C0FF; +} +pre code { /* Name.Variable.Class */ } +pre code .vg { + color: #79C0FF; +} +pre code { /* Name.Variable.Global */ } +pre code .vi { + color: #79C0FF; +} +pre code { /* Name.Variable.Instance */ } +pre code .vm { + color: #79C0FF; +} +pre code { /* Name.Variable.Magic */ } +pre code .il { + color: #A5D6FF; +} +pre code { /* Literal.Number.Integer.Long */ } .copy-code-container { - position: sticky; - width: calc(100% - 4px); display: flex; justify-content: space-between; - align-items: last baseline; + align-items: baseline; font-family: "Cadman"; border-top-right-radius: 8px; border-top-left-radius: 8px; @@ -209,8 +552,8 @@ pre code { border-right: 2px solid black; border-top: 2px solid black; } -.copy-code-container::before { - content: "code block"; + +.code-language-identifier { font-style: italic; margin-left: 10px; } @@ -384,7 +727,6 @@ button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced { input[type=file]::file-selector-button { background-color: #3c283c; color: #e6e6e6 !important; - margin: 10px; } input[type=file]::file-selector-button:hover { background-color: rgb(109.2, 72.8, 109.2); @@ -399,6 +741,9 @@ input[type=file]::file-selector-button.reduced { margin: 0; padding: 5px; } +input[type=file]::file-selector-button { + margin: 10px; +} p { margin: 15px 0; @@ -407,11 +752,6 @@ p { .pagebutton { background-color: #3c283c; color: #e6e6e6 !important; - padding: 5px 5px; - margin: 0; - display: inline-block; - min-width: 20px; - text-align: center; } .pagebutton:hover { background-color: rgb(109.2, 72.8, 109.2); @@ -426,6 +766,13 @@ p { margin: 0; padding: 5px; } +.pagebutton { + padding: 5px 5px; + margin: 0; + display: inline-block; + min-width: 20px; + text-align: center; +} .currentpage { border: none; @@ -714,10 +1061,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus .tab-button { background-color: #3c283c; color: #e6e6e6 !important; - border-bottom: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - margin-bottom: 0; } .tab-button:hover { background-color: rgb(109.2, 72.8, 109.2); @@ -732,6 +1075,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus margin: 0; padding: 5px; } +.tab-button { + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + margin-bottom: 0; +} .tab-button.active { background-color: #8a5584; padding-top: 8px; diff --git a/data/static/css/theme-peachy.css b/data/static/css/theme-peachy.css index 46c76cb..ce64dde 100644 --- a/data/static/css/theme-peachy.css +++ b/data/static/css/theme-peachy.css @@ -194,13 +194,356 @@ pre code { overflow: scroll; tab-size: 4; } +pre code .hll { + background-color: #6e7681; +} +pre code .c { + color: #8B949E; + font-style: italic; +} +pre code { /* Comment */ } +pre code .err { + color: #F85149; +} +pre code { /* Error */ } +pre code .esc { + color: #E6EDF3; +} +pre code { /* Escape */ } +pre code .g { + color: #E6EDF3; +} +pre code { /* Generic */ } +pre code .k { + color: #FF7B72; +} +pre code { /* Keyword */ } +pre code .l { + color: #A5D6FF; +} +pre code { /* Literal */ } +pre code .n { + color: #E6EDF3; +} +pre code { /* Name */ } +pre code .o { + color: #FF7B72; + font-weight: bold; +} +pre code { /* Operator */ } +pre code .x { + color: #E6EDF3; +} +pre code { /* Other */ } +pre code .p { + color: #E6EDF3; +} +pre code { /* Punctuation */ } +pre code .ch { + color: #8B949E; + font-style: italic; +} +pre code { /* Comment.Hashbang */ } +pre code .cm { + color: #8B949E; + font-style: italic; +} +pre code { /* Comment.Multiline */ } +pre code .cp { + color: #8B949E; + font-weight: bold; + font-style: italic; +} +pre code { /* Comment.Preproc */ } +pre code .cpf { + color: #8B949E; + font-style: italic; +} +pre code { /* Comment.PreprocFile */ } +pre code .c1 { + color: #8B949E; + font-style: italic; +} +pre code { /* Comment.Single */ } +pre code .cs { + color: #8B949E; + font-weight: bold; + font-style: italic; +} +pre code { /* Comment.Special */ } +pre code .gd { + color: #FFA198; + background-color: #490202; +} +pre code { /* Generic.Deleted */ } +pre code .ge { + color: #E6EDF3; + font-style: italic; +} +pre code { /* Generic.Emph */ } +pre code .ges { + color: #E6EDF3; + font-weight: bold; + font-style: italic; +} +pre code { /* Generic.EmphStrong */ } +pre code .gr { + color: #FFA198; +} +pre code { /* Generic.Error */ } +pre code .gh { + color: #79C0FF; + font-weight: bold; +} +pre code { /* Generic.Heading */ } +pre code .gi { + color: #56D364; + background-color: #0F5323; +} +pre code { /* Generic.Inserted */ } +pre code .go { + color: #8B949E; +} +pre code { /* Generic.Output */ } +pre code .gp { + color: #8B949E; +} +pre code { /* Generic.Prompt */ } +pre code .gs { + color: #E6EDF3; + font-weight: bold; +} +pre code { /* Generic.Strong */ } +pre code .gu { + color: #79C0FF; +} +pre code { /* Generic.Subheading */ } +pre code .gt { + color: #FF7B72; +} +pre code { /* Generic.Traceback */ } +pre code .g-Underline { + color: #E6EDF3; + text-decoration: underline; +} +pre code { /* Generic.Underline */ } +pre code .kc { + color: #79C0FF; +} +pre code { /* Keyword.Constant */ } +pre code .kd { + color: #FF7B72; +} +pre code { /* Keyword.Declaration */ } +pre code .kn { + color: #FF7B72; +} +pre code { /* Keyword.Namespace */ } +pre code .kp { + color: #79C0FF; +} +pre code { /* Keyword.Pseudo */ } +pre code .kr { + color: #FF7B72; +} +pre code { /* Keyword.Reserved */ } +pre code .kt { + color: #FF7B72; +} +pre code { /* Keyword.Type */ } +pre code .ld { + color: #79C0FF; +} +pre code { /* Literal.Date */ } +pre code .m { + color: #A5D6FF; +} +pre code { /* Literal.Number */ } +pre code .s { + color: #A5D6FF; +} +pre code { /* Literal.String */ } +pre code .na { + color: #E6EDF3; +} +pre code { /* Name.Attribute */ } +pre code .nb { + color: #E6EDF3; +} +pre code { /* Name.Builtin */ } +pre code .nc { + color: #F0883E; + font-weight: bold; +} +pre code { /* Name.Class */ } +pre code .no { + color: #79C0FF; + font-weight: bold; +} +pre code { /* Name.Constant */ } +pre code .nd { + color: #D2A8FF; + font-weight: bold; +} +pre code { /* Name.Decorator */ } +pre code .ni { + color: #FFA657; +} +pre code { /* Name.Entity */ } +pre code .ne { + color: #F0883E; + font-weight: bold; +} +pre code { /* Name.Exception */ } +pre code .nf { + color: #D2A8FF; + font-weight: bold; +} +pre code { /* Name.Function */ } +pre code .nl { + color: #79C0FF; + font-weight: bold; +} +pre code { /* Name.Label */ } +pre code .nn { + color: #FF7B72; +} +pre code { /* Name.Namespace */ } +pre code .nx { + color: #E6EDF3; +} +pre code { /* Name.Other */ } +pre code .py { + color: #79C0FF; +} +pre code { /* Name.Property */ } +pre code .nt { + color: #7EE787; +} +pre code { /* Name.Tag */ } +pre code .nv { + color: #79C0FF; +} +pre code { /* Name.Variable */ } +pre code .ow { + color: #FF7B72; + font-weight: bold; +} +pre code { /* Operator.Word */ } +pre code .pm { + color: #E6EDF3; +} +pre code { /* Punctuation.Marker */ } +pre code .w { + color: #6E7681; +} +pre code { /* Text.Whitespace */ } +pre code .mb { + color: #A5D6FF; +} +pre code { /* Literal.Number.Bin */ } +pre code .mf { + color: #A5D6FF; +} +pre code { /* Literal.Number.Float */ } +pre code .mh { + color: #A5D6FF; +} +pre code { /* Literal.Number.Hex */ } +pre code .mi { + color: #A5D6FF; +} +pre code { /* Literal.Number.Integer */ } +pre code .mo { + color: #A5D6FF; +} +pre code { /* Literal.Number.Oct */ } +pre code .sa { + color: #79C0FF; +} +pre code { /* Literal.String.Affix */ } +pre code .sb { + color: #A5D6FF; +} +pre code { /* Literal.String.Backtick */ } +pre code .sc { + color: #A5D6FF; +} +pre code { /* Literal.String.Char */ } +pre code .dl { + color: #79C0FF; +} +pre code { /* Literal.String.Delimiter */ } +pre code .sd { + color: #A5D6FF; +} +pre code { /* Literal.String.Doc */ } +pre code .s2 { + color: #A5D6FF; +} +pre code { /* Literal.String.Double */ } +pre code .se { + color: #79C0FF; +} +pre code { /* Literal.String.Escape */ } +pre code .sh { + color: #79C0FF; +} +pre code { /* Literal.String.Heredoc */ } +pre code .si { + color: #A5D6FF; +} +pre code { /* Literal.String.Interpol */ } +pre code .sx { + color: #A5D6FF; +} +pre code { /* Literal.String.Other */ } +pre code .sr { + color: #79C0FF; +} +pre code { /* Literal.String.Regex */ } +pre code .s1 { + color: #A5D6FF; +} +pre code { /* Literal.String.Single */ } +pre code .ss { + color: #A5D6FF; +} +pre code { /* Literal.String.Symbol */ } +pre code .bp { + color: #E6EDF3; +} +pre code { /* Name.Builtin.Pseudo */ } +pre code .fm { + color: #D2A8FF; + font-weight: bold; +} +pre code { /* Name.Function.Magic */ } +pre code .vc { + color: #79C0FF; +} +pre code { /* Name.Variable.Class */ } +pre code .vg { + color: #79C0FF; +} +pre code { /* Name.Variable.Global */ } +pre code .vi { + color: #79C0FF; +} +pre code { /* Name.Variable.Instance */ } +pre code .vm { + color: #79C0FF; +} +pre code { /* Name.Variable.Magic */ } +pre code .il { + color: #A5D6FF; +} +pre code { /* Literal.Number.Integer.Long */ } .copy-code-container { - position: sticky; - width: calc(100% - 4px); display: flex; justify-content: space-between; - align-items: last baseline; + align-items: baseline; font-family: "Cadman"; border-top-right-radius: 16px; border-top-left-radius: 16px; @@ -209,8 +552,8 @@ pre code { border-right: 2px solid black; border-top: 2px solid black; } -.copy-code-container::before { - content: "code block"; + +.code-language-identifier { font-style: italic; margin-left: 6px; } @@ -384,7 +727,6 @@ button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced { input[type=file]::file-selector-button { background-color: #f27a5a; color: black !important; - margin: 6px; } input[type=file]::file-selector-button:hover { background-color: rgb(244.6, 148.6, 123); @@ -399,6 +741,9 @@ input[type=file]::file-selector-button.reduced { margin: 0; padding: 6px; } +input[type=file]::file-selector-button { + margin: 6px; +} p { margin: 8px 0; @@ -407,11 +752,6 @@ p { .pagebutton { background-color: #f27a5a; color: black !important; - padding: 3px 3px; - margin: 0; - display: inline-block; - min-width: 36px; - text-align: center; } .pagebutton:hover { background-color: rgb(244.6, 148.6, 123); @@ -426,6 +766,13 @@ p { margin: 0; padding: 6px; } +.pagebutton { + padding: 3px 3px; + margin: 0; + display: inline-block; + min-width: 36px; + text-align: center; +} .currentpage { border: none; @@ -714,10 +1061,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus .tab-button { background-color: #f27a5a; color: black !important; - border-bottom: none; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - margin-bottom: 0; } .tab-button:hover { background-color: rgb(244.6, 148.6, 123); @@ -732,6 +1075,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus margin: 0; padding: 6px; } +.tab-button { + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + margin-bottom: 0; +} .tab-button.active { background-color: #b54444; padding-top: 8px; diff --git a/sass/_default.scss b/sass/_default.scss index 0f78a58..2463725 100644 --- a/sass/_default.scss +++ b/sass/_default.scss @@ -333,17 +333,95 @@ pre code { padding: $BIG_PADDING; overflow: scroll; tab-size: 4; + + .hll { background-color: #6e7681 } + .c { color: #8B949E; font-style: italic } /* Comment */ + .err { color: #F85149 } /* Error */ + .esc { color: #E6EDF3 } /* Escape */ + .g { color: #E6EDF3 } /* Generic */ + .k { color: #FF7B72 } /* Keyword */ + .l { color: #A5D6FF } /* Literal */ + .n { color: #E6EDF3 } /* Name */ + .o { color: #FF7B72; font-weight: bold } /* Operator */ + .x { color: #E6EDF3 } /* Other */ + .p { color: #E6EDF3 } /* Punctuation */ + .ch { color: #8B949E; font-style: italic } /* Comment.Hashbang */ + .cm { color: #8B949E; font-style: italic } /* Comment.Multiline */ + .cp { color: #8B949E; font-weight: bold; font-style: italic } /* Comment.Preproc */ + .cpf { color: #8B949E; font-style: italic } /* Comment.PreprocFile */ + .c1 { color: #8B949E; font-style: italic } /* Comment.Single */ + .cs { color: #8B949E; font-weight: bold; font-style: italic } /* Comment.Special */ + .gd { color: #FFA198; background-color: #490202 } /* Generic.Deleted */ + .ge { color: #E6EDF3; font-style: italic } /* Generic.Emph */ + .ges { color: #E6EDF3; font-weight: bold; font-style: italic } /* Generic.EmphStrong */ + .gr { color: #FFA198 } /* Generic.Error */ + .gh { color: #79C0FF; font-weight: bold } /* Generic.Heading */ + .gi { color: #56D364; background-color: #0F5323 } /* Generic.Inserted */ + .go { color: #8B949E } /* Generic.Output */ + .gp { color: #8B949E } /* Generic.Prompt */ + .gs { color: #E6EDF3; font-weight: bold } /* Generic.Strong */ + .gu { color: #79C0FF } /* Generic.Subheading */ + .gt { color: #FF7B72 } /* Generic.Traceback */ + .g-Underline { color: #E6EDF3; text-decoration: underline } /* Generic.Underline */ + .kc { color: #79C0FF } /* Keyword.Constant */ + .kd { color: #FF7B72 } /* Keyword.Declaration */ + .kn { color: #FF7B72 } /* Keyword.Namespace */ + .kp { color: #79C0FF } /* Keyword.Pseudo */ + .kr { color: #FF7B72 } /* Keyword.Reserved */ + .kt { color: #FF7B72 } /* Keyword.Type */ + .ld { color: #79C0FF } /* Literal.Date */ + .m { color: #A5D6FF } /* Literal.Number */ + .s { color: #A5D6FF } /* Literal.String */ + .na { color: #E6EDF3 } /* Name.Attribute */ + .nb { color: #E6EDF3 } /* Name.Builtin */ + .nc { color: #F0883E; font-weight: bold } /* Name.Class */ + .no { color: #79C0FF; font-weight: bold } /* Name.Constant */ + .nd { color: #D2A8FF; font-weight: bold } /* Name.Decorator */ + .ni { color: #FFA657 } /* Name.Entity */ + .ne { color: #F0883E; font-weight: bold } /* Name.Exception */ + .nf { color: #D2A8FF; font-weight: bold } /* Name.Function */ + .nl { color: #79C0FF; font-weight: bold } /* Name.Label */ + .nn { color: #FF7B72 } /* Name.Namespace */ + .nx { color: #E6EDF3 } /* Name.Other */ + .py { color: #79C0FF } /* Name.Property */ + .nt { color: #7EE787 } /* Name.Tag */ + .nv { color: #79C0FF } /* Name.Variable */ + .ow { color: #FF7B72; font-weight: bold } /* Operator.Word */ + .pm { color: #E6EDF3 } /* Punctuation.Marker */ + .w { color: #6E7681 } /* Text.Whitespace */ + .mb { color: #A5D6FF } /* Literal.Number.Bin */ + .mf { color: #A5D6FF } /* Literal.Number.Float */ + .mh { color: #A5D6FF } /* Literal.Number.Hex */ + .mi { color: #A5D6FF } /* Literal.Number.Integer */ + .mo { color: #A5D6FF } /* Literal.Number.Oct */ + .sa { color: #79C0FF } /* Literal.String.Affix */ + .sb { color: #A5D6FF } /* Literal.String.Backtick */ + .sc { color: #A5D6FF } /* Literal.String.Char */ + .dl { color: #79C0FF } /* Literal.String.Delimiter */ + .sd { color: #A5D6FF } /* Literal.String.Doc */ + .s2 { color: #A5D6FF } /* Literal.String.Double */ + .se { color: #79C0FF } /* Literal.String.Escape */ + .sh { color: #79C0FF } /* Literal.String.Heredoc */ + .si { color: #A5D6FF } /* Literal.String.Interpol */ + .sx { color: #A5D6FF } /* Literal.String.Other */ + .sr { color: #79C0FF } /* Literal.String.Regex */ + .s1 { color: #A5D6FF } /* Literal.String.Single */ + .ss { color: #A5D6FF } /* Literal.String.Symbol */ + .bp { color: #E6EDF3 } /* Name.Builtin.Pseudo */ + .fm { color: #D2A8FF; font-weight: bold } /* Name.Function.Magic */ + .vc { color: #79C0FF } /* Name.Variable.Class */ + .vg { color: #79C0FF } /* Name.Variable.Global */ + .vi { color: #79C0FF } /* Name.Variable.Instance */ + .vm { color: #79C0FF } /* Name.Variable.Magic */ + .il { color: #A5D6FF } /* Literal.Number.Integer.Long */ } $copy_code_header_background: $ACCENT_COLOR !default; $copy_code_border: 2px solid black !default; .copy-code-container { - position: sticky; - // width: 100%; - width: calc(100% - 4px); display: flex; justify-content: space-between; - align-items: last baseline; + align-items: baseline; font-family: "Cadman"; border-top-right-radius: $code_border_radius; border-top-left-radius: $code_border_radius; @@ -351,12 +429,11 @@ $copy_code_border: 2px solid black !default; border-left: $copy_code_border; border-right: $copy_code_border; border-top: $copy_code_border; +} - &::before { - content: "code block"; - font-style: italic; - margin-left: $MEDIUM_PADDING; - } +.code-language-identifier { + font-style: italic; + margin-left: $MEDIUM_PADDING; } .copy-code {