diff --git a/docs/_static/images/tutorial/tutorial_1.png b/docs/_static/images/tutorial/tutorial_1.png
index 4d92ccd3b..74a1cf6a6 100644
Binary files a/docs/_static/images/tutorial/tutorial_1.png and b/docs/_static/images/tutorial/tutorial_1.png differ
diff --git a/docs/_static/images/tutorial/tutorial_3.png b/docs/_static/images/tutorial/tutorial_3.png
index d76900753..69596c252 100644
Binary files a/docs/_static/images/tutorial/tutorial_3.png and b/docs/_static/images/tutorial/tutorial_3.png differ
diff --git a/docs/getting_started/tutorial.rst b/docs/getting_started/tutorial.rst
index ee9500e9a..45839fa5e 100644
--- a/docs/getting_started/tutorial.rst
+++ b/docs/getting_started/tutorial.rst
@@ -52,7 +52,7 @@ Out of the box, the "home" app defines a blank ``HomePage`` model in ``models.py
Edit ``home/models.py`` as follows, to add a ``body`` field to the model:
-.. code:: python
+.. code-block:: python
from __future__ import unicode_literals
@@ -88,7 +88,7 @@ by separating capital letters with underscores (e.g. HomePage becomes
home\_page.html). Edit
``home/templates/home/home_page.html`` to contain the following:
-.. code:: html+django
+.. code-block:: html+django
{% extends "base.html" %}
@@ -103,6 +103,38 @@ home\_page.html). Edit
.. figure:: ../_static/images/tutorial/tutorial_3.png
:alt: Updated homepage
+
+Wagtail template tags
+~~~~~~~~~~~~~~~~~~~~~
+
+Wagtail provides a number of
+`template tags & filters <../topics/writing_templates#template-tags-filters>`__
+which can be loaded by including ``{% load wagtailcore_tags %}`` at the top of
+your template file.
+
+In this tutorial, we use the `richtext` filter to escape and print the contents
+of a ``RichTextField``:
+
+.. code-block:: html+django
+
+ {% load wagtailcore_tags %}
+ {{ self.body|richtext }}
+
+Produces:
+
+.. code-block:: html
+
+
+
+ Welcome to our new site!
+
+
+
+**Note:** You'll need to include ``{% load wagtailcore_tags %}`` in each
+template that uses Wagtail's tags. Django will throw a ``TemplateSyntaxError``
+if the tags aren't loaded.
+
+
A basic blog
------------
@@ -113,7 +145,7 @@ Add the new ``blog`` app to ``INSTALLED_APPS`` in ``mysite/settings/base.py``.
The following example defines a basic blog post model in ``blog/models.py``:
-.. code:: python
+.. code-block:: python
from django.db import models
@@ -141,7 +173,7 @@ The following example defines a basic blog post model in ``blog/models.py``:
Create a template at ``blog/templates/blog/blog_page.html``:
-.. code:: html+django
+.. code-block:: html+django
{% extends "base.html" %}
@@ -172,7 +204,7 @@ Image support
Wagtail provides support for images out of the box. To add them to your
model:
-.. code:: python
+.. code-block:: python
from django.db import models
@@ -211,7 +243,7 @@ Run ``python manage.py makemigrations`` and ``python manage.py migrate``.
Adjust your blog page template to include the image:
-.. code:: html+django
+.. code-block:: html+django
{% extends "base.html" %}
@@ -243,7 +275,7 @@ Blog Index
Let us extend the Blog app to provide an index.
-.. code:: python
+.. code-block:: python
class BlogIndexPage(Page):
intro = RichTextField(blank=True)
@@ -256,7 +288,7 @@ The above creates an index type to collect all our blog posts.
``blog/templates/blog/blog_index_page.html``
-.. code:: html+django
+.. code-block:: html+django
{% extends "base.html" %}
@@ -276,7 +308,7 @@ Related items
Let's extend the BlogIndexPage to add related links. The related links
can be BlogPages or external links. Change ``blog/models.py`` to
-.. code:: python
+.. code-block:: python
from django.db import models
@@ -349,7 +381,7 @@ can be BlogPages or external links. Change ``blog/models.py`` to
Extend ``blog_index_page.html`` to show related items
-.. code:: html+django
+.. code-block:: html+django
{% extends "base.html" %}