We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.

This lesson's interactive features are locked, please to keep using them

Block to HTML

I'm going to give you quite a few steps to do with a bit less guidance. I think you're a beautiful peacock and are ready for it.

Assignment

Create a new function called def markdown_to_html_node(markdown): that converts a full markdown document into a single parent HTMLNode. That one parent HTMLNode should (obviously) contain many child HTMLNode objects representing the nested elements.

FYI: I created an additional 8 helper functions to keep my code neat and easy to understand, because there's a lot of logic necessary for markdown_to_html_node. I don't want to give you my exact functions because I want you to do this from scratch. However, I'll give you the basic order of operations:

    1. The Tips below have details for converting blocks to HTML tags.

def test_paragraphs(self):
    md = """
This is **bolded** paragraph
text in a p
tag here

This is another paragraph with _italic_ text and `code` here

"""

    node = markdown_to_html_node(md)
    html = node.to_html()
    self.assertEqual(
        html,
        "<div><p>This is <b>bolded</b> paragraph text in a p tag here</p><p>This is another paragraph with <i>italic</i> text and <code>code</code> here</p></div>",
    )


def test_codeblock(self):
    md = """
```
This is text that _should_ remain
the **same** even with inline stuff
```
"""

    node = markdown_to_html_node(md)
    html = node.to_html()
    self.assertEqual(
        html,
        "<div><pre><code>This is text that _should_ remain\nthe **same** even with inline stuff\n</code></pre></div>",
    )

Run and submit the CLI tests from the root of the project.

Tips

  • Quote blocks should be surrounded by a <blockquote> tag.
  • Unordered list blocks should be surrounded by a <ul> tag, and each list item should be surrounded by a <li> tag.
  • Ordered list blocks should be surrounded by a <ol> tag, and each list item should be surrounded by a <li> tag.
  • Code blocks should be surrounded by a <code> tag nested inside a <pre> tag.
  • Headings should be surrounded by a <h1> to <h6> tag, depending on the number of # characters.
  • Paragraphs should be surrounded by a <p> tag. I removed the newlines and replaced them with spaces.