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"Copy "
- return f"
{button} {t}
"
+ input_code = children.strip()
+ button = f"Copy "
+ 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 {