In the previous chapter, we implemented the article details page. In order for the body of the article to be able to be titled, bold, quote, code block, etc. (like in Office!) , we will use Markdown syntax.

Install the Markdown

Markdown is a lightweight markup language that allows people to “write documents in plain text format that is easy to read and write, and then convert them into valid or HTML documents. It is recommended that you spend five minutes familiarizing yourself with Markdown’s syntax, which will greatly improve your codeword efficiency.

See Markdown syntax here: Introduction to Markdown syntax

Installing Markdown is also simple: Go to the virtual environment and type PIP install Markdown.

Use the Markdown

To render an article written with Markdown syntax as HTML text, first rewrite article/views.py article_detail() :

article/views.py

...

# Introduce the MarkDown module
import markdown

def article_detail(request, id):
    article = ArticlePost.objects.get(id=id)

    Render markdown syntax into HTML style
    article.body = markdown.markdown(article.body,
        extensions=[
        Include abbreviations, tables, and other common extensions
        'markdown.extensions.extra'.# Syntax highlighting extension
        'markdown.extensions.codehilite',
        ])

    context = { 'article': article }
    return render(request, 'article/detail.html', context)
Copy the code

The markdown.markdown syntax in this code takes two arguments: the first argument is the body of the article that needs to be rendered; The second parameter in the common syntax extension, markdown. Extensions. The extra included abbreviations, forms, such as extension, markdown. Extensions. Codehilite behind is to use the expanded syntax highlighting.

Then, modify the templates/article/detail about the text part of the HTML:

templates/article/detail.html

...

# in the article. The body after add | safe filter
<p>{{ article.body|safe }}</p>
Copy the code

For security reasons, Django escapes HTML output. ** This renders the HTML text rendered in article. Body undisplayable. * * pipe | is Django filters in writing, and | safe is similar to the article. The body to stick a label, said that a character does not need to be escaped.

This has the Markdown syntax configured.

Start the server and enter a new article written in Markdown syntax in the background, which reads as follows:

Zhou Nan guan JuJujiu cage, in the river. A fair lady, a gentleman's bride. Corrupt elite, left and right. My fair lady, may seek it. -- + Listing 1 + Listing 2 + Listing 2- 1List of + 22 -
---

​```python
def article_detail(request, id):
	article = ArticlePost.objects.get(id=id)
	Render markdown syntax into HTML style
	article.body = markdown.markdown(article.body,
		extensions=[
		Include abbreviations, tables, and other common extensions
		'markdown.extensions.extra'.# Syntax highlighting extension
		'markdown.extensions.codehilite',
		])
	context = { 'article': article }
	return render(request, 'article/detail.html', context)
​```
Copy the code

The article details are returned with the following results:

Good, but the code block is still not pretty.

You can’t write technical articles without code highlighting. Keep trying.

Code highlighting

Create a new directory md_css/ in the static directory and place the code highlighted style file later.

Reopen a command-line window, go into the virtual environment and install Pyacknowledgments: PIP install Pyacknowledgments

Pyanswers is a generic syntax highlight that helps us automatically generate style files that beautify code blocks.

On the command line, go into the md_CSS directory you just created and type the pyanswers directive:

pygmentize -S monokai -f html -a .codehilite > monokai.css
Copy the code

One thing to note here is that the -a argument in the generated command needs to correspond to the CSS Selector in the real page, i.e.codehiliteThis field should be written as in some versions.highlight. If the following code highlighting doesn’t work, there’s probably something wrong here.

Press Enter to check that a file called monokai.css is automatically generated in the md_css directory, which is a highlighted style file with a dark background.

Next we reference this file in base.html:

templates/base.html

<head>.<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    
    <! Monikai.css -->
    <link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">
    
</head>.Copy the code

Restart the server and see the following if everything goes well:

In addition to Monokai, which is dark, Pyanswers adds a number of other explanations as well, and it is up to you to choose.

The various styles can be referenced here: Pyapping-css

conclusion

This chapter introduces the Markdown syntax and the code highlighting extension, making it possible to write beautifully formatted text.

The next chapter will learn how to create a new article.

  • If you have any questions please leave a message on Doucet’s personal website and I will reply as soon as possible.
  • Or Email me a private message: [email protected]
  • Project code: Django_blog_tutorial

Please inform the author and indicate the source for reprinting.