Merge pull request #40 from DARC-e-V/feature-render-formulas

Feature render formulas

assets/script.js

@@ -1,4 +1,5 @@
 document.addEventListener("DOMContentLoaded", function() {
+
   var macros = {
     ",": (context) => context.future()?.text === " " ? "{\\char`,}" : "\\char`,",
     "\\qty": "{#1\\,\\mathrm{#2}}",
@@ -8,16 +9,16 @@ document.addEventListener("DOMContentLoaded", function() {
     "\\cubed": "{^{3}}",
     "\\per": "/",
     "\\percent": "\\%",
-    "\\tera": "T",
-    "\\giga": "G",
-    "\\mega": "M",
-    "\\kilo": "k",
-    "\\dezi": "d",
-    "\\centi": "c",
-    "\\milli": "m",
+    "\\tera": "\\text{T}",
+    "\\giga": "\\text{G}",
+    "\\mega": "\\text{M}",
+    "\\kilo": "\\text{k}",
+    "\\dezi": "\\text{d}",
+    "\\centi": "\\text{c}",
+    "\\milli": "\\text{m}",
     "\\micro": "\\text{μ}",
-    "\\nano": "n",
-    "\\pico": "p",
+    "\\nano": "\\text{n}",
+    "\\pico": "\\text{p}",
     "\\kilogram": "\\text{kg}",
     "\\meter": "\\text{m}",
     "\\second": "\\text{s}",
@@ -46,15 +47,17 @@ document.addEventListener("DOMContentLoaded", function() {
     "\\weber": "\\text{Wb}",
     "\\tesla": "\\text{T}",
   };
+
   renderMathInElement(document.body, {
-    delimiters: [{left: '$', right: '$', display: false}],
+    delimiters: [
+        {left: '$$', right: '$$', display: true}, // Note: $$ has to come before $
+        {left: '$', right: '$', display: false},
+        {left: '\\[', right: '\\]', display: true},
+        {left: "\\(", right: "\\)", display: false},
+    ],
     throwOnError : false,
     macros: macros
   });
-  renderMathInElement(document.body, {
-    delimiters: [{left: '\\[', right: '\\]', display: false}],
-    throwOnError : false
-  });
 });
 
 function shuffleChildren(el) {

assets/style-course.css

@@ -246,7 +246,8 @@ span.formula {
   .course ul,
   .course ol,
   .course .question,
-  .course .table {
+  .course .table,
+  .course .katex-display {
     width: 59.3%;
   }
 

renderer/fifty_ohm_html_renderer.py

@@ -3,6 +3,7 @@ from mistletoe import Document, HtmlRenderer
 
 from .comment import BlockComment
 from .dash import Dash
+from .formula import Formula
 from .halfwidth_spaces import HalfwidthSpaces
 from .include import Include
 from .morse import Morse
@@ -62,6 +63,7 @@ class FiftyOhmHtmlRenderer(HtmlRenderer):
             TableBody,
             Qso,
             Include,
+            Formula,
             *extras,
             **kwargs,
         )
@@ -324,3 +326,6 @@ class FiftyOhmHtmlRenderer(HtmlRenderer):
 
     def render_include(self, token):
         return self.include_handler(token.ident)
+
+    def render_formula(self, token):
+        return f"\n$${token.formula}$$\n"

renderer/formula.py

@@ -0,0 +1,27 @@
+import re
+
+from mistletoe.block_token import BlockToken
+
+
+class Formula(BlockToken):
+    r"""
+    Block token ("$ a \cdot b $").
+    Transfroms a line that contains only a formula enclosed in dollar signs into a Formula token.
+    """
+
+    @staticmethod
+    def start(line):
+        return re.match(r"^\s*\$[^$]+\$\s*$", line)
+
+    @classmethod
+    def check_interrupts_paragraph(cls, lines):
+        return cls.start(lines.peek())
+
+    @classmethod
+    def read(cls, lines):
+        line = next(lines)  # Consume the line with the formula
+        formula = re.match(r"^\s*\$([^$]+)\$\s*$", line).group(1)
+        return formula
+
+    def __init__(self, match):
+        self.formula = match

test/test_formula.py

@@ -0,0 +1,19 @@
+import pytest
+from mistletoe import Document
+
+from renderer.fifty_ohm_html_renderer import FiftyOhmHtmlRenderer
+
+
+@pytest.mark.html
+def test_formula_html():
+    assertions = {
+        r"$a \cdot b$": "\n" + r"$$a \cdot b$$" + "\n\n",
+        r" $a \cdot b$ ": "\n" + r"$$a \cdot b$$" + "\n\n",
+        r"$ a \cdot b $": "\n" + r"$$ a \cdot b $$" + "\n\n",
+        r"$a \cdot b$" + "\n" + r"$a \cdot b$": "\n" + r"$$a \cdot b$$" + "\n\n\n" + r"$$a \cdot b$$" + "\n\n",
+        r"Lorem Ipsum" + "\n" + r"$a \cdot b$": "<p>Lorem Ipsum</p>\n\n" + r"$$a \cdot b$$" + "\n\n",
+    }
+
+    with FiftyOhmHtmlRenderer() as renderer:
+        for assertion in assertions:
+            assert renderer.render(Document(assertion)) == assertions[assertion]