前言

个人搭建了一个blog，但是文本的显示一直不尽如人意，日常工作中经常使用Markdown，于是决定集成Markdown在blog里面，个人在使用过程中遇到一些问题，在网上也找不到完整的攻略，于是决定写个日志记录下，先说下主要的问题：

1. 后台编辑支持
2. 前端显示支持
3. 语法高亮
4. 图片上传

后台编辑支持以及图片上传

先需要下载我们需要用到的包：

pip install django-mdeditor  #后台编辑

包安装好之后我们需要做一系列修改才能使用。先说后台编辑部分：

• INSTALLED_APPS中添加
  现在setting.py 的INSTALLED_APPS中添加mdeditor：

INSTALLED_APPS = [
    'jet.dashboard',
    'jet',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'apps.comment',
    'apps.blog',
    'django_summernote',
    'mdeditor',
]

• 修改models.py中的文章正文为MDTextField类型

from mdeditor.fields import MDTextField
...
class Article(models.Model):
    STATUS_CHOICES = (
        ('d', '草稿'),
        ('p', '发表'),
    )
    title = models.CharField(verbose_name='标题', max_length=100)
    #content = models.TextField(verbose_name='正文', blank=True, null=True)
    content = MDTextField(null=True)
    ...

此时应该就可以在后台用Markdown编辑文本了。
后台看下，长这样：

markdown_use.png

但是此时还不能上传图片， 想要上传图片我们还要做一些事：

• url.py中添加mdeditor支持

urlpatterns = [
    path(r'admin/', admin.site.urls),
    path(r'', views.home, name='home'),
    path(r'home/', views.home, name='home'),
    path(r'mdeditor/', include('mdeditor.urls')),
]

<u>这个必须要加，网上有些攻略都忽略这一条，如果没有这条，图片是没法上传的。</u>

• 在setting.py中添加MEDIA_ROOT配置
  这个一般都配了，但是最好确认下这个配置所指向的路径能够访问

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/media/')

这时应该就可以上传图片了。

markdown_pciture.png

前端显示

这里涉及到一个python的包：

pip install markdown  #前端显示

安装完成之后，修改代码views.py：

import markdown
...
def detail(request, id):
    try:
        post = Article.objects.get(id=str(id))
        post.viewed()  # 更新浏览次数
        comments = Comment.objects.filter(article=str(id))
        tags = post.tags.all()
        next_post = post.next_article()  # 上一篇文章对象
        prev_post = post.prev_article()  # 下一篇文章对象
        post.content = markdown.markdown(post.content,
                                  extensions=[
                                     'markdown.extensions.extra',
                                     'markdown.extensions.codehilite',
                                     'markdown.extensions.toc',
                                  ])
    except Article.DoesNotExist:
        raise Http404
    return render(
        request, 'post.html',
        {
            'post': post,
            'tags': tags,
            'comments': comments,
            'category_list': categories,
            'next_post': next_post,
            'prev_post': prev_post,
            'months': months
        }
    )

作用就是把文章的正文部分替换掉Markdown生成的内容。
此时前端还无法正常显示，需要添加mdeditor的样式文件到html中。先从mdeditor的安装目录中找到样式文件，一般会在：

site-packages\mdeditor\static\mdeditor\css

这里主要涉及一个文件，拷贝他们到django项目的static目录下，并且关联到html文件中：

<link rel="stylesheet" href="{% static 'mdeditor/css/editormd.preview.css' %}"/>

此时还需要在html上将blog的正文部分添加相应的class markdown-body，不然这个css文件也匹配不到：

<div class="post-description markdown-body">
        <p>
              {{ post.content |safe }}
         </p>
 </div>

content后面必须添加safe
此时应该就能按Markdown显示了，如下：

markdown_no_highlight.png

语法高亮

做完上面的步骤，已经基本能用，但是此时只是能够解析Markdown的语法，对于代码段还无法高亮，并不美观，我们还需要将代码段语法进行高亮处理。
这里涉及到一个python包：

pip install Pygments

这个包的作用只是生成一个语法高亮的样式文件，通过以下命令生成：

pygmentize -S default -f html -a .codehilite > default.css

然后将这个CSS文件拖到static目录下面，并且在html中关联他：

<link rel="stylesheet" href="{% static 'css/default.css' %}"/>

注意： 发现Pygments这个包必须得安装，仅仅支持从别的地方把生成的CSS文件拷贝过来没有用。
此时我们刷新页面就可以看到高亮了。如下：

markdown_highlight.png

后记

这样基本就完成了。目前只有基本的高亮功能，不知能能不能根据不同的语言分别进行不同的高亮，这个作为下一步学习的方向。