Add Markdown Support to Wagtail

Wagtail Tutorial Series:

To get the latest learning resource for Wagtail 4, please check Build Blog With Wagtail CMS (4.0.0)

1. Create Wagtail Project
2. Dockerizing Wagtail App
3. Add Blog Models to Wagtail
4. How to write Wagtail page template
5. Add Bootstrap Theme to Wagtail
6. How to use StreamField in Wagtail
7. Wagtail Routable Page
8. Add pagination component to Wagtail
9. Customize Wagtail Page URL
10. Add Full Text Search to Wagtail
11. Add Markdown Support to Wagtail
12. Add LaTeX Support & Code Highlight In Wagtail
13. How to Build Form Page in Wagtail
14. How to Create and Manage Menus in Wagtail
15. Wagtail SEO Guide
16. 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 

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

Django>=3.1,<3.2
wagtail>=2.11,<2.12
psycopg2-binary
django-extensions==3.1.0

wagtail-markdown==0.6
Pygments

Notes:

1. We added wagtail-markdown==0.6
2. We added Pygments (we need it to make Syntax highlighting work)

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

Add wagtailmarkdown to INSTALLED_APPS in wagtail_bootstrap_blog/settings/base.py

INSTALLED_APPS = [
    # code omitted for brevity

    'modelcluster',
    'taggit',
    'django_extensions',
    'wagtailmarkdown',

    # code omitted for brevity
]

Model

Update blog/blocks.py

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

    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 simplemde
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.

Template

Go to pygments-css, pick one theme and download the css file to wagtail_bootstrap_blog/static/css

Here we save the file as code_theme.css

└── wagtail_bootstrap_blog
    ├── static
    │   ├── css
    │   │   ├── code_theme.css
    │   │   └── wagtail_bootstrap_blog.css
    │   └── js
    │       └── wagtail_bootstrap_blog.js

Now please replace .highlight in wagtail_bootstrap_blog/static/css/code_theme.css to .codehilite

Update wagtail_bootstrap_blog/templates/blog/post_page.html

{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags blogapp_tags static %}

{% block extra_css %}
  <link rel="stylesheet" href="{% static "css/code_theme.css" %}" />
{% endblock %}

{% block content %}
    {% image page.header_image original as header_image %}
    <img src="{{ header_image.url }}" class="img-fluid">

    <h1>{{ page.title }}</h1>

    <p>
      {% post_categories_list %}
    </p>

    {# body #}
    {% include "blog/components/streamfield.html" %}

    <hr>

    {% post_tags_list %}
    <hr>

{% endblock %}

Notes:

1. We added the code_theme.css link by overriding the extra_css block

Wagtail Tutorial Series:

To get the latest learning resource for Wagtail 4, please check Build Blog With Wagtail CMS (4.0.0)

1. Create Wagtail Project
2. Dockerizing Wagtail App
3. Add Blog Models to Wagtail
4. How to write Wagtail page template
5. Add Bootstrap Theme to Wagtail
6. How to use StreamField in Wagtail
7. Wagtail Routable Page
8. Add pagination component to Wagtail
9. Customize Wagtail Page URL
10. Add Full Text Search to Wagtail
11. Add Markdown Support to Wagtail
12. Add LaTeX Support & Code Highlight In Wagtail
13. How to Build Form Page in Wagtail
14. How to Create and Manage Menus in Wagtail
15. Wagtail SEO Guide
16. 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 

More Wagtail articles and eBooks written by me