Implement HTMLRenderer methods

Implement basic render methods for all MyST syntax

myst_parser/block_tokens.py

@@ -57,7 +57,7 @@ def __init__(self, lines):
         if end_line is None:
             end_line = len(lines)
         self.range = (0, end_line)
-        self.content = "\n".join(lines[1 : end_line - 1])
+        self.content = "".join(lines[1 : end_line - 1])
         self.children = []
 
     @classmethod

myst_parser/html_renderer.py

@@ -13,7 +13,9 @@ class HTMLRenderer(html_renderer.HTMLRenderer):
     def __init__(self, add_mathjax=False):
         """This HTML render uses the same block/span tokens as the docutils renderer.
 
-        It is used to test compliance with the commonmark spec.
+        It is used to test compliance with the commonmark spec,
+        and can be used for basic previews,
+        but does not run roles/directives, resolve cross-references etc...
         """
         self._suppress_ptag_stack = [False]
 
@@ -50,19 +52,40 @@ def render_document(self, token):
         return super().render_document(token) + self.mathjax_src
 
     def render_code_fence(self, token):
+        if token.language and token.language.startswith("{"):
+            return self.render_directive(token)
         return self.render_block_code(token)
 
+    def render_directive(self, token):
+        return (
+            '<div class="myst-directive">\n'
+            "<pre><code>{name} {args}\n{content}</code></pre></span>\n"
+            "</div>"
+        ).format(
+            name=self.escape_html(token.language),
+            args=self.escape_html(token.arguments),
+            content=self.escape_html(token.children[0].content),
+        )
+
     def render_front_matter(self, token):
-        raise NotImplementedError
+        return (
+            '<div class="myst-front-matter">'
+            '<pre><code class="language-yaml">{}</code></pre>'
+            "</div>"
+        ).format(self.escape_html(token.content))
 
     def render_line_comment(self, token):
-        return "<p>{}</p>".format(token.raw)
+        return "<!-- {} -->".format(self.escape_html(token.content))
 
     def render_block_break(self, token):
-        return "<p>{}</p>".format(token.raw)
+        return '<!-- myst-block-data {} -->\n<hr class="myst-block-break" />'.format(
+            self.escape_html(token.content)
+        )
 
     def render_target(self, token):
-        raise NotImplementedError
+        return (
+            '<a class="myst-target" href="#{0}" title="Permalink to here">({0})=</a>'
+        ).format(self.escape_html(token.target))
 
     def render_role(self, token):
         return '<span class="role" name="{}">{}</span>'.format(

tests/test_commonmark/test_commonmark.py

@@ -15,8 +15,12 @@
 
 @pytest.mark.parametrize("entry", tests)
 def test_commonmark(entry):
+    if entry["example"] == 14:
+        # This is just a test that +++ are not parsed as thematic breaks
+        pytest.skip("Expects '+++' to be unconverted (not block break).")
     if entry["example"] in [65, 67]:
-        # This is supported by numerous Markdown flavours, but not strictly CommonMark
+        # Front matter is supported by numerous Markdown flavours,
+        # but not strictly CommonMark,
         # see: https://talk.commonmark.org/t/metadata-in-documents/721/86
         pytest.skip(
             "Thematic breaks on the first line conflict with front matter syntax"

tests/test_renderers/test_html.py

@@ -2,7 +2,7 @@
 
 import pytest
 
-from myst_parser import text_to_tokens, render_tokens
+from myst_parser import text_to_tokens, render_tokens, parse_text
 from mistletoe.block_token import tokenize
 
 from myst_parser.html_renderer import HTMLRenderer
@@ -34,6 +34,39 @@ def test_directive(renderer):
     output = renderer.render(tokenize(["```{name} arg\n", "foo\n", "```\n"])[0])
     assert output == dedent(
         """\
-    <pre><code class="language-{name}">foo
-    </code></pre>"""
+        <div class="myst-directive">
+        <pre><code>{name} arg
+        foo
+        </code></pre></span>
+        </div>"""
     )
+
+
+def test_block_break(renderer):
+    output = renderer.render(text_to_tokens("+++ abc"))
+    assert output.splitlines() == [
+        "<!-- myst-block-data abc -->",
+        '<hr class="myst-block-break" />',
+    ]
+
+
+def test_line_comment(renderer):
+    output = renderer.render(tokenize([r"% abc"])[0])
+    assert output == "<!-- abc -->"
+
+
+def test_target():
+    output = parse_text("(a)=", "html")
+    assert output == (
+        '<p><a class="myst-target" href="#a" title="Permalink to here">(a)=</a></p>\n'
+    )
+
+
+def test_front_matter(renderer):
+    output = renderer.render(text_to_tokens("---\na: 1\nb: 2\nc: 3\n---"))
+    assert output.splitlines() == [
+        '<div class="myst-front-matter"><pre><code class="language-yaml">a: 1',
+        "b: 2",
+        "c: 3",
+        "</code></pre></div>",
+    ]