Add Markdown Support to Wagtail

Michael Yin

Last updated on December 10 2021

Table of Contents

Wagtail Tutorial Series:

  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-bootstrap-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:

  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-bootstrap-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


Michael Yin

Michael is a Full Stack Developer from China who loves writing code, tutorials about Django, and modern frontend tech.

He has published some ebooks on leanpub and tech course on testdriven.io.

He is also the founder of the AccordBox which provides the web development services.


Table of Contents

Django SaaS Template

It aims to save your time and money building your product, developed by Michael Yin

Learn More

Build Jamstack web app with Next.js and Wagtail CMS.

Read More

Subscribe

Get notified about new great Web Development Tutorial