The solutions of markdown, highlight and pagedown in Django 1.8

Time:2020-6-29

Writing instructions:

After reading the basics and methods of Python 3, I used Django 1.8 to write a small program of personal blog in order to consolidate my mastery of the language. There are several problems in markdown processing of blog articles. I hope this article can help others.

markdown

Markdown is a markup language that many programmers like, and it is supported by many well-known blogs and websites.
For example: segment fault, short book, and, of course, notes for hammers. In order to mark down one’s own articles in Django 1.8
, you can use the following steps:

#Install markdown2 first
pip3 install markdown2

Next, we create a new folder templatetags under the application folder, and then create two files under templatetags
Wei init___ .py、custom_ markdown.py Two files. In custom_ markdown.py Add the following code:

import markdown2

from django import template
from django.template.defaultfilters import stringfilter
from django.utils.encoding import force_text
from django.utils.safestring import mark_safe

register = template.Library()

@register.filter(is_safe=True)
@stringfilter
def custom_markdown(value):
return mark_safe(markdown2.markdown(force_text(value),
        extras=["fenced-code-blocks", "cuddled-lists", "metadata", "tables", "spoiler"]))

Now the templatetags folder is your own package. It’s very simple to use and introduce custom into the web pages you need_ Mark down, and then perform the
Mark down is the place to mark down, as follows:


{% extends "base.html" %}
{% load custom_markdown %}

{% block content %}
<div class="posts">
        <section class="post">
            <header class="post-header">
                <h2 class="post-title">{{ post.title }}</h2>

                    <p class="post-meta">
                        Time:  <a class="post-author" href="#">{{ post.date_time|date:'Y /m /d'}}</a> <a class="post-category post-category-js" href="{% url 'search_tag' tag=post.category %}">{{ post.category }}</a>
                    </p>
            </header>

                <div class="post-description">
                    <p>
                        {{ post.content|custom_markdown }}
                    </p>
                </div>
        </section>
        {% include "duoshuo.html" %}
</div> <!-- /.blog-post -->
{% endblock %}

highlight.js Highlight code

After the above content markdown, it can not achieve the expected effect of most people, because the fast part of the code is not highlighted. Let’s deal with the code block next.
highlight.js It supports highlighting in many languages, and the style of highlighting is also very rich. We first go to the official website and download it according to the language of our choice, and then put it into the static folder
Next, we can use the following in the base template to highlight:

<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %}</title>
     <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.5/css/bootstrap.css' %}" >
    <link rel="stylesheet" href="{% static 'blog_css/my_blog.css' %}">

    <script></script>
    <script></script>

    <!-- jqcloud -->
    <script></script>
    <link rel="stylesheet" type="text/css" href="{% static 'jqcloud/jqcloud.css' %}">

    <script></script>
    <link rel="stylesheet" type="text/css" href="{% static 'highlight/styles/monokai.css' %}">
    <! -- back to top -- >
    <script></script>

</head>
<script>hljs.initHighlightingOnLoad();</script>
......

The final display effect is as follows:
The solutions of markdown, highlight and pagedown in Django 1.8

Pagedown editor

After completing the first two steps, we may also need to use the markdown editor in the background article editing section. Here I use the Django pagedown editor
。 Django pagedown perfectly supports markdown syntax and can preview while writing. If you think the original interface is ugly, you can rewrite CSS yourself.

#Install Django pagedown
pip3 install django-pagedown

After installation, we need to settings.py You can only use it by adding an application in the


INSTALLED_APPS = (
'bootstrap_admin',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'Article',
'pagedown',

)

The next step is admin.py Add the following code (the official steps do not apply to django1.8 and an error will be reported)

from django.contrib import admin
from .models import Author,Tag,Classification,Article
from pagedown.widgets import AdminPagedownWidget
from django import forms

# Register your models here.
#Define your own form
class ArticleForm(forms.ModelForm):
    content = forms.CharField(widget=AdminPagedownWidget())

    class Meta:
        model = Article
        fields = '__all__'

class ArticleAdmin(admin.ModelAdmin):
    form = ArticleForm

admin.site.register(Author)
admin.site.register(Tag)
admin.site.register(Classification)
#Bind when registering
admin.site.register(Article,ArticleAdmin)

Then the background rendering is as follows:
The solutions of markdown, highlight and pagedown in Django 1.8