Add Markdown Support to Wagtail

Wagtail Tutorial Series:

To learn more about Wagtail CMS, please check Build Blog With Wagtail CMS (4.0.0)

1. Create Wagtail Project
2. Modern Frontend Techs for Wagtail
3. Dockerizing Wagtail App
4. Add Blog Models to Wagtail
5. How to write Wagtail page template
6. Create Stylish Wagtail Pages with Tailwind CSS
7. How to use StreamField in Wagtail
8. Wagtail Routable Page
9. Add Pagination Component to Wagtail
10. Customize Wagtail Page URL
11. Add Full Text Search to Wagtail
12. Add Markdown Support to Wagtail
13. Add LaTeX Support & Code Highlight In Wagtail
14. How to Build Form Page in Wagtail
15. How to Create and Manage Menus in Wagtail
16. Wagtail SEO Guide
17. Online Demo http://wagtail-blog.accordbox.com/
18. Source code: https://github.com/AccordBox/wagtail-tailwind-blog

Wagtail Tips:

1. Wagtail Tip #1: How to replace ParentalManyToManyField with InlinePanel
2. Wagtail Tip #2: How to Export & Restore Wagtail Site

Write style in Wagtail:

1. How to use SCSS/SASS in your Django project (Python Way)
2. How to use SCSS/SASS in your Django project (NPM Way)

Other Wagtail Topics:

1. How to make Wagtail project have good coding style
2. How to do A/B Testing in Wagtail CMS 
3. How to build a landing page using Wagtail CMS 
4. How to support multi-language in Wagtail CMS 
5. Add Bootstrap Theme to Wagtail

More Wagtail articles and eBooks written by me

Objective

By the end of this chapter, you should be able to:

1. Add Markdown support to our Wagtail project.

Setup wagtail-markdown

We will use wagtail-markdown to help us.

Update requirements.txt

wagtail-markdown==0.10.0

$ docker-compose build
$ docker-compose up -d
$ docker-compose logs -f

Add wagtailmarkdown to INSTALLED_APPS in wagtail_app/settings.py

INSTALLED_APPS = [
    # code omitted for brevity

    'wagtailmarkdown',            # new

    # code omitted for brevity
]

Model

Update wagtail_app/blog/blocks.py

from wagtailmarkdown.blocks import MarkdownBlock


class BodyBlock(StreamBlock):
    h1 = CharBlock()
    h2 = CharBlock()
    paragraph = RichTextBlock()
    markdown = MarkdownBlock(icon="code")        # new

    image_text = ImageText()
    image_carousel = ListBlock(ImageChooserBlock())
    thumbnail_gallery = ListBlock(ImageChooserBlock())

Notes:

1. We add markdown = MarkdownBlock(icon="code") to the BodyBlock

Migrate the db

$ docker-compose run --rm web python manage.py makemigrations
$ docker-compose run --rm web python manage.py migrate

Next, let's try to add some example markdown content to the post page.

Notes:

1. We can notice the markdown editor has good style and toolbar, which built on easy-markdown
2. If you are interested how it is implemented (with custom Widget), you can check source code here

The Markdown content can be rendered successfully.

But the code block have no theme, let's fix it.

1. We will use highlightjs since it looks better than Pygments

Template

Update wagtail_app/templates/blog/post_page.html

{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags %}

{% block extra_css %}
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/monokai-sublime.min.css"
        integrity="sha512-ade8vHOXH67Cm9z/U2vBpckPD1Enhdxl3N05ChXyFx5xikfqggrK4RrEele+VWY/iaZyfk7Bhk6CyZvlh7+5JQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"/>
{% endblock %}

{% block content %}

  <div class="prose max-w-full">
    {% image page.header_image original as header_image %}
    <img src="{{ header_image.url }}" alt="{{ header_image.alt }}">
    <h1>{{ page.title }}</h1>
    <hr/>
    <div></div>
  </div>

  <div class="prose max-w-full">
    {% include "blog/components/streamfield.html" %}
  </div>

{% endblock %}

{% block extra_js %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"
          integrity="sha512-gU7kztaQEl7SHJyraPfZLQCNnrKdaQi5ndOyt4L4UPL/FHDd/uB9Je6KDARIqwnNNE27hnqoWLBq+Kpe4iHfeQ=="
          crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>hljs.highlightAll();</script>
{% endblock %}

Notes:

1. In extra_css, we import a highlightjs theme monokai css file.
2. In extra_js block, we import highlightjs and call hljs.highlightAll() to highlight all pre code element.

Let's take a look at final result

Wagtail Tutorial Series:

To learn more about Wagtail CMS, please check Build Blog With Wagtail CMS (4.0.0)

1. Create Wagtail Project
2. Modern Frontend Techs for Wagtail
3. Dockerizing Wagtail App
4. Add Blog Models to Wagtail
5. How to write Wagtail page template
6. Create Stylish Wagtail Pages with Tailwind CSS
7. How to use StreamField in Wagtail
8. Wagtail Routable Page
9. Add Pagination Component to Wagtail
10. Customize Wagtail Page URL
11. Add Full Text Search to Wagtail
12. Add Markdown Support to Wagtail
13. Add LaTeX Support & Code Highlight In Wagtail
14. How to Build Form Page in Wagtail
15. How to Create and Manage Menus in Wagtail
16. Wagtail SEO Guide
17. Online Demo http://wagtail-blog.accordbox.com/
18. Source code: https://github.com/AccordBox/wagtail-tailwind-blog

Wagtail Tips:

1. Wagtail Tip #1: How to replace ParentalManyToManyField with InlinePanel
2. Wagtail Tip #2: How to Export & Restore Wagtail Site

Write style in Wagtail:

1. How to use SCSS/SASS in your Django project (Python Way)
2. How to use SCSS/SASS in your Django project (NPM Way)

Other Wagtail Topics:

1. How to make Wagtail project have good coding style
2. How to do A/B Testing in Wagtail CMS 
3. How to build a landing page using Wagtail CMS 
4. How to support multi-language in Wagtail CMS 
5. Add Bootstrap Theme to Wagtail

More Wagtail articles and eBooks written by me