How to generate markdown through Jinja2?

Recently, when I build PocketToWordpress. I really need a tool to convert HTML string to Markdown string, however none of them work perfectly, some shortages I found.

• None of them can handle indents well, indents in markdown will be code block, but in html, it does nothing.
• They cannot handle <a> with nofollow or new tab.

The solution I found for solving this problem is using Jinja2. Jinja2 as a powerful rendering engine is usually used to generate HTML content, such as in Flask/Django frameworks, however, we can used it for markdown too.

How to use Jinja2 generate markdown?

The easiest way to generate markdown will be using string formatting, something like in Python.

'''##{} '''.format('h2 header')

If giving up HTML tags, Jinja2 will became a powerful string format-er too.

Jinja2 Templates in HTML and Markdown

The original way when I generate HTML.

<div>
    <small> Continue reading takes about {{ minutes }} minutes </small>

    {% for article in articles %}
        {% if 'resolved_title' in article[1] and article[1].lang == 'en' %}
            <div>
                {{ loop.index }}. <a rel="nofollow"
                                     target="_blank"
                                     href="{{ article[1].resolved_url }}">{{ article[1].resolved_title }}</a>
                <p>
                    {% if 'top_image_url' in article[1] %}
                        <img src={{ article[1].top_image_url }} alt={{ article[1].resolved_title }}/>
                    {% endif %}
                    {{ article[1].excerpt }}
                </p>
                <hr/>
            </div>
        {% endif %}
    {% endfor %}

    <br/>
    <i>
        Thanks for your reading, save as your bookmark if you like my website.
    </i>
</div>

For the HTML string generated from the above template, you cannot render to markdown properly, because of indents and the <a> tags. But if we switch to this, this can work perfectly.

<small> Continue reading takes about {{ minutes }} minutes </small>
    {% for article in articles %}
        {% if 'resolved_title' in article[1] and article[1].lang == 'en' %}
## {{ loop.index }}. <a rel="nofollow" target="_blank" href="{{ article[1].resolved_url }}">{{ article[1].resolved_title }}</a>

                    {% if 'top_image_url' in article[1] %}
![{{ article[1].resolved_title }}]({{ article[1].top_image_url }})
                    {% endif %}
{{ article[1].excerpt }}

---
        {% endif %}
    {% endfor %}

*Thanks for your reading, save as your bookmark if you like my website.*

This markdown template, if you use a HTML styling checker, there will be tons of warnings and errors, even though, it can work to help you to get a proper markdown string. These markdowns can be used in different blog engines, and if you need, you can render markdown to HTML for some blog system which requires HTML string, such as WordPress.

In Sum

This is not technology focused blog post, it is just a reminder for every problem solvers, when you want to solve a problem, try to think out of the box, problems might be easier to be solved.

For this problem, Content => HTML =>Markdown

Originally, I think, I need a way to format HTML tags properly to markdown, but it is hard, because you have indents and different closed tags.

However, Jinja2 can do this without rendering to HTML firstly, the problem can be solved in an easier way.

References

• Jinja2 templates for HTML and Markdown
• Some Python Packages I tried
  • https://pypi.org/project/html2markdown/
  • https://github.com/gaojiuli/tomd
  • https://github.com/matthewwithanm/python-markdownify