Example

Have you:

If so, you are set for the next step. Here you can find comprehensive examples of how to use different MarkdownX features to your advantage.

Model

This is how you implement a MarkdownX field in your models. In your app/models.py:

1
2
3
4
from markdownx.models import MarkdownxField

class MyModel(models.Model):
    myfield = MarkdownxField()

... and then, include the form media in the relevant template using {{ form.media }}, like so:

<form method="POST" action="">{% csrf_token %}
    {{ form }}
</form>

{{ form.media }}

Note

The field extends Django’s own TextField and is saved in the database accordingly.

Form

You can also implement MarkdownX through the forms. This will be done in your app/forms.py as follows:

1
2
3
4
from markdownx.fields import MarkdownxFormField

class MyForm(forms.Form):
    myfield = MarkdownxFormField()

... and then, include a form’s required media in the template using {{ form.media }}:

<form method="POST" action="">{% csrf_token %}
    {{ form }}
</form>

{{ form.media }}

Django Admin

When using included MarkdowxModel class in your models, just use MarkdownxModelAdmin in your app/admin.py as follows:

1
2
3
4
5
6
from django.contrib import admin
from markdownx.admin import MarkdownxModelAdmin
from .models import MyModel


admin.site.register(MyModel, MarkdownxModelAdmin)

Advanced

Template customization

The default widget is as seen here.

If you would like to customise this; for instance, using Bootstrap to implement side-by-side panes (as seen in preview animation), you should override the default template by creating your own template and saving it under markdownx/widget.html (Django 1.11+) or markdownx/widget2.html (Django 1.10 and below) in your project’s TEMPLATE_DIRS.

Here is an example of the contents:

<div class="markdownx row">
    <div class="col-md-6">
        {{ markdownx_editor }}
    </div>
    <div class="col-md-6">
        <div class="markdownx-preview"></div>
    </div>
</div>

Field customization

We have ensured that MarkdownX is fully extensible and provides a high degree of flexibility in development.

There are times that you may wish to Markdownify a different type of field, or utilize your own customized widget. To accommodate this, we have provided the tools to apply MarkdownX infrastructure to other fields through Widgets.

For instance, to apply MarkdownX to TextField instances in your Django Admins, you can override the default widget in the Admins module in admin.py of your Django App as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
from django.db import models
from django.contrib import admin

from markdownx.widgets import AdminMarkdownxWidget

from .models import MyModel


class MyModelAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.TextField: {'widget': AdminMarkdownxWidget},
    }


admin.site.register(MyModel, MyModelAdmin)

Custom image tags

Markdown uses ![]() tag by default to insert uploaded image file. This generates a simple (X)HTML <image> tag. If you wish to have more control and use your own HTML tags, you may create a custom form_valid() function in ImageUploadView class, as highlighted here.