add code highlighting

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"<code class=\"inline-code\">{children}</code>"
     else:
-        t = children.strip()
-        button = f"<button type=button class=\"copy-code\" value=\"{t}\">Copy</button>"
-        return f"<pre><span class=\"copy-code-container\">{button}</span><code>{t}</code></pre>"
+        input_code = children.strip()
+        button = f"<button type=button class=\"copy-code\" value=\"{input_code}\">Copy</button>"
+        unhighlighted = f"<pre><span class=\"copy-code-container\"><span class=\"code-language-identifier\">code block</span>{button}</span><code>{input_code}</code></pre>"
+        if not attr:
+            return unhighlighted
+        try:
+            lexer = get_lexer_by_name(attr.strip())
+            formatter = HtmlFormatter(nowrap=True)
+            return f"<pre><span class=\"copy-code-container\"><span class=\"code-language-identifier\">{lexer.name}</span>{button}</span><code>{highlight(input_code.unescape(), lexer, formatter)}</code></pre>"
+        except PygmentsClassNotFound:
+            return unhighlighted
 
 def tag_list(children):
     list_body = re.sub(r"  +\n", "<br>", children.strip())

app/templates/babycode.html

@@ -11,6 +11,8 @@
       <section class="babycode-guide-section">
         <h2 id="what-is-babycode">What is babycode?</h2>
         <p>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.</p>
+        <p>A <b>tag</b> is a short name enclosed in square brackets. Tags can be opening tags, like <code class="inline-code">[b]</code> or closing tags, like <code class="inline-code">[/b]</code>. Anything inserted between matching opening and closing tags is known as the tag's content.</p>
+        <p>Some tags can provide more specific instructions using an <b>attribute</b>. An attribute is added to the opening tag with an equals sign (<code class="inline-code">=</code>). This allows you to specify details like a particular color or a link's address.</p>
       </section>
       <section class="babycode-guide-section">
         <h2 id="text-formatting-tags">Text formatting tags</h2>
@@ -135,7 +137,8 @@
         {% set code = 'func _ready() -> void:\n\tprint("hello world!")' %}
         <p>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 class="inline-code">[code]your code here[/code]</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:</p>
         {{ ('[code]%s[/code]' % code) | babycode | safe }}
-        <br>
+        <p>Optionally, you can enable syntax highlighting by specifying the language in the attribute like this: <code class="inline-code">[code=gdscript]</code></p>
+        {{ ('[code=gdscript]%s[/code]' % code) | babycode | safe}}
         <p>Inline code tags look like this: {{ '[code]Inline code[/code]' | babycode | safe }}</p>
         <p>Babycodes are not parsed inside code blocks.</p>
       </section>