Django 学习 Blog 实操 07 --- 博客详情支持 Markdown，代码高亮加背景色

一、本次任务

• 博客正文支持 markdown 语法上传内容
• 代码高亮

二、 操作步骤

安装 markdown

解析 markdown

• markdown 语法加入博客正文，没有解析时的显示样式
  
• 在详情页加入解析 markdown 语法
  

解析后的效果如下，展示的是 html 代码，不是我们想要的：
- 原因：django 出于安全方面的考虑，任何的 HTML 代码在 django 的模板中都会被转义（即显示原始的 HTML 代码，而不是经浏览器渲染后的格式）。为了解除转义，只需在模板变量后使用 safe过滤器即可，告诉 django，这段文本是安全的，你什么也不用做。

safe过滤器

代码高亮及修改样式

依次加入下面的三个文件的三个不同效果,知道每个的作用：

<link href="https://cdn.bootcss.com/highlight.js/9.15.8/styles/github.min.css" rel="stylesheet">
<style>
    .codehilite {
      padding: 0;
    }

    /* for block of numbers */
    .hljs-ln-numbers {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      text-align: center;
      color: #ccc;
      border-right: 1px solid #CCC;
      vertical-align: top;
      padding-right: 5px;
    }

    .hljs-ln-n {
      width: 30px;
    }

    /* for block of code */
    .hljs-ln .hljs-ln-code {
      padding-left: 10px;
      white-space: pre;
    }
  </style>

<script src="https://cdn.bootcss.com/highlight.js/9.15.8/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
</script>

下图是引入 css 文件及 style 样式后的效果：

下图是引入第一个 js 并调用后的效果：

下图是引入第二个 js 调用后，代码显示行号的效果：

三、提出问题

• 怎么在文章的表单中填写正文的时候，左边是 markdown 的写法，右边可以预览效果呢？
• 代码高亮样式的 css 可以提取到一个文件中的。（先跟着走通，后续可以自己改进）

附上 Gitee 地址：https://gitee.com/langxing/HelloDjango-blog-tutorial