First draft for pictures

renderer/fifty_ohm_html_renderer.py

@@ -2,6 +2,8 @@ import textwrap
 
 from mistletoe import Document, HtmlRenderer
 
+from renderer.picture import Picture
+
 from .comment import BlockComment
 from .dash import Dash
 from .halfwidth_spaces import HalfwidthSpaces
@@ -35,6 +37,7 @@ class FiftyOhmHtmlRenderer(HtmlRenderer):
             NonbreakingSpacesDots,
             References,
             Question,
+            Picture
         )
         self.question_renderer = question_renderer
 
@@ -168,3 +171,15 @@ class FiftyOhmHtmlRenderer(HtmlRenderer):
         # Filter out None values, so block tokens can return None to not be rendered.
         inner = "\n".join(filter(lambda x: x is not None, [self.render(child) for child in token.children]))
         return f"{inner}\n" if inner else ""
+
+    @staticmethod
+    def render_picture_helper(id, ref, text, number):
+        return f"""
+                <figure class="picture" id="ref_{ref}" name="{ref}">
+                    <img src="img/picture_{id}.svg">
+                    <figcaption>Abbildung {number}: {text}</figcaption>
+                </figure>
+            """
+
+    def render_picture(self, token) :
+        self.render_picture_helper(token.id, token.ref, token.text, token.number)

renderer/picture.py

@@ -0,0 +1,19 @@
+import re
+
+from mistletoe.span_token import SpanToken
+
+
+class Picture(SpanToken):
+    """
+    Span token for pictures.
+    Example: [picture:727:amplitude_periode_halbwellen:Positive und negative Halbwellen einer Sinusschwingung]
+    """
+
+    parse_inner = False
+    pattern = re.compile(r"\[picture:(\d+):(.+):(.+)\]")
+
+    def __init__(self, match_object):
+        self.id = match_object.group(1)
+        self.ref = match_object.group(2)
+        self.text = match_object.group(3)
+        self.number = "TODO"