notes and abbr

readme.py

@@ -37,7 +37,14 @@ def render():
                     "markdown.extensions.attr_list",
                     "markdown.extensions.codehilite",
                     "markdown.extensions.fenced_code",
-                ],
+                    "markdown.extensions.admonition",
+                    "markdown.extensions.abbr"
+                    ],
+                # extension_configs={
+                #     'markdown.extensions.codehilite': {
+                #         'guess_lang': False,
+                #     }
+                # }
             )
             entries.append(html)
     

requirements.txt

@@ -1,4 +1,5 @@
 Flask==2.2.3
 Markdown==3.4.1
+Pygments==2.14.0
 python-dotenv==1.0.0
 PyYAML==6.0

static/highlight.css

@@ -0,0 +1,77 @@
+.codehilite .hll { background-color: #333333 }
+.codehilite .c { color: #008800; font-style: italic; } /* Comment */
+.codehilite .err { color: #333333 } /* Error */
+.codehilite .esc { color: #333333 } /* Escape */
+.codehilite .g { color: #333333 } /* Generic */
+.codehilite .k { color: #fb660a; font-weight: bold } /* Keyword */
+.codehilite .l { color: #333333 } /* Literal */
+.codehilite .n { color: #333333 } /* Name */
+.codehilite .o { color: #333333 } /* Operator */
+.codehilite .x { color: #333333 } /* Other */
+.codehilite .p { color: #333333 } /* Punctuation */
+.codehilite .ch { color: #008800; font-style: italic; } /* Comment.Hashbang */
+.codehilite .cm { color: #008800; font-style: italic; } /* Comment.Multiline */
+.codehilite .cp { color: #ff0007; font-weight: bold; font-style: italic; } /* Comment.Preproc */
+.codehilite .cpf { color: #008800; font-style: italic; } /* Comment.PreprocFile */
+.codehilite .c1 { color: #008800; font-style: italic; } /* Comment.Single */
+.codehilite .cs { color: #008800; font-style: italic; } /* Comment.Special */
+.codehilite .gd { color: #333333 } /* Generic.Deleted */
+.codehilite .ge { color: #333333 } /* Generic.Emph */
+.codehilite .gr { color: #333333 } /* Generic.Error */
+.codehilite .gh { color: #333333; font-weight: bold } /* Generic.Heading */
+.codehilite .gi { color: #333333 } /* Generic.Inserted */
+.codehilite .go { color: #444444; background-color: #222222 } /* Generic.Output */
+.codehilite .gp { color: #333333 } /* Generic.Prompt */
+.codehilite .gs { color: #333333 } /* Generic.Strong */
+.codehilite .gu { color: #333333; font-weight: bold } /* Generic.Subheading */
+.codehilite .gt { color: #333333 } /* Generic.Traceback */
+.codehilite .kc { color: #fb660a; font-weight: bold } /* Keyword.Constant */
+.codehilite .kd { color: #fb660a; font-weight: bold } /* Keyword.Declaration */
+.codehilite .kn { color: #fb660a; font-weight: bold } /* Keyword.Namespace */
+.codehilite .kp { color: #fb660a } /* Keyword.Pseudo */
+.codehilite .kr { color: #fb660a; font-weight: bold } /* Keyword.Reserved */
+.codehilite .kt { color: #cdcaa9; font-weight: bold } /* Keyword.Type */
+.codehilite .ld { color: #333333 } /* Literal.Date */
+.codehilite .m { color: #0086f7; font-weight: bold } /* Literal.Number */
+.codehilite .s { color: #0086d2 } /* Literal.String */
+.codehilite .na { color: #ff0086; font-weight: bold } /* Name.Attribute */
+.codehilite .nb { color: #333333 } /* Name.Builtin */
+.codehilite .nc { color: #333333 } /* Name.Class */
+.codehilite .no { color: #0086d2 } /* Name.Constant */
+.codehilite .nd { color: #333333 } /* Name.Decorator */
+.codehilite .ni { color: #333333 } /* Name.Entity */
+.codehilite .ne { color: #333333 } /* Name.Exception */
+.codehilite .nf { color: #ff0086; font-weight: bold } /* Name.Function */
+.codehilite .nl { color: #333333 } /* Name.Label */
+.codehilite .nn { color: #333333 } /* Name.Namespace */
+.codehilite .nx { color: #333333 } /* Name.Other */
+.codehilite .py { color: #333333 } /* Name.Property */
+.codehilite .nt { color: #fb660a; font-weight: bold } /* Name.Tag */
+.codehilite .nv { color: #fb660a } /* Name.Variable */
+.codehilite .ow { color: #333333 } /* Operator.Word */
+.codehilite .w { color: #888888 } /* Text.Whitespace */
+.codehilite .mb { color: #0086f7; font-weight: bold } /* Literal.Number.Bin */
+.codehilite .mf { color: #0086f7; font-weight: bold } /* Literal.Number.Float */
+.codehilite .mh { color: #0086f7; font-weight: bold } /* Literal.Number.Hex */
+.codehilite .mi { color: #0086f7; font-weight: bold } /* Literal.Number.Integer */
+.codehilite .mo { color: #0086f7; font-weight: bold } /* Literal.Number.Oct */
+.codehilite .sa { color: #0086d2 } /* Literal.String.Affix */
+.codehilite .sb { color: #0086d2 } /* Literal.String.Backtick */
+.codehilite .sc { color: #0086d2 } /* Literal.String.Char */
+.codehilite .dl { color: #0086d2 } /* Literal.String.Delimiter */
+.codehilite .sd { color: #0086d2 } /* Literal.String.Doc */
+.codehilite .s2 { color: #0086d2 } /* Literal.String.Double */
+.codehilite .se { color: #0086d2 } /* Literal.String.Escape */
+.codehilite .sh { color: #0086d2 } /* Literal.String.Heredoc */
+.codehilite .si { color: #0086d2 } /* Literal.String.Interpol */
+.codehilite .sx { color: #0086d2 } /* Literal.String.Other */
+.codehilite .sr { color: #0086d2 } /* Literal.String.Regex */
+.codehilite .s1 { color: #0086d2 } /* Literal.String.Single */
+.codehilite .ss { color: #0086d2 } /* Literal.String.Symbol */
+.codehilite .bp { color: #333333 } /* Name.Builtin.Pseudo */
+.codehilite .fm { color: #ff0086; font-weight: bold } /* Name.Function.Magic */
+.codehilite .vc { color: #fb660a } /* Name.Variable.Class */
+.codehilite .vg { color: #fb660a } /* Name.Variable.Global */
+.codehilite .vi { color: #fb660a } /* Name.Variable.Instance */
+.codehilite .vm { color: #fb660a } /* Name.Variable.Magic */
+.codehilite .il { color: #0086f7; font-weight: bold } /* Literal.Number.Integer.Long */

static/style.css

@@ -65,21 +65,33 @@ code {
   white-space: pre-wrap;
 }
 
-.language-note,
-.language-todo {
+pre {
+  font-size: 0.85rem;
+  border-left: 10px solid #eee;
+  padding-left: 10px;
+}
+
+.note,
+.todo {
+  border-left: none;
+  padding-left: auto;
+  font-size: 1rem;
   margin: 32px auto;
   font-family: sans-serif;
   display: inline-block;
   width: auto;
   padding: 1ch;
   color: #aaa;
+  border-left: none;
   border: 1px solid #aaa;
   position: relative;
   white-space: pre-wrap;
+  line-height: 0.7;
 }
 
-.language-note:before,
-.language-todo:before {
+.note:before,
+.todo:before {
+  line-height: 1;
   padding: 0.1ch;
   position: absolute;
   top: 0;
@@ -89,15 +101,16 @@ code {
   color: white;
 }
 
-.language-note:before {
+.note:before {
   content: "Note";
 }
 
-.language-todo:before {
+.todo:before {
   content: "TO DO";
 }
 
-.language-placeholder {
+.placeholder {
+  font-size: 1rem;
   position: relative;
   margin: 48px auto;
   display: flex;
@@ -109,9 +122,10 @@ code {
   border-radius: 50%;
   font-family: sans-serif;
   text-align: center;
+  color: currentColor;
 }
 
-.language-placeholder:before {
+.placeholder:before {
   content: "placeholder";
   text-transform: uppercase;
   font-size: 0.8rem;
@@ -119,6 +133,23 @@ code {
   color: #aaa;
 }
 
+.admonition {
+}
+
+.admonition-title {
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.admonition * {
+  margin: 0;
+}
+
+.admonition ul {
+  list-style: none;
+  padding: 0;
+}
+
 @media print {
   body {
     font-size: 14px;

templates/render.html

@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Kamo is writing a thesis about code documentation!</title>
+    <link rel="stylesheet" href="{{url_for('static', filename='highlight.css')}}">
     <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
 </head>
 <body>