django1.8下的markdown、highlight、pagedown解决
写作说明:
在看完python3的基本与法后,为了巩固自己对语言的掌握就使用django1.8写了个人博客的小程序。在对博客文章进行markdown处理的时候遇到了几个问题,希望这篇文章能够帮助到其他人。
markdown
markdown是一个很多程序员都喜欢的标记性语言,很多知名博客和网站都支持采用了这一编辑器。
例如:segmentfault、简书、当然还有锤子的便签。为了在django1.8中对自己的文章进行markdown
,可以使用以下几个步骤:
#首先安装markdown2
pip3 install markdown2
接下来我们在应用的文件夹下新建文件夹templatetags,再在templatetags下新建两个文件:
__init___.py、custom_markdown.py 两个文件。在custom_markdown.py 中加入如下代码:
import markdown2from django import template
from django.template.defaultfilters import stringfilter
from django.utils.encoding import force_text
from django.utils.safestring import mark_saferegister = 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"]))
现在templatetags文件夹就相当于你自己的一个包了。它的使用很简单,在需要的网页中引入custom_markdown,然后在需要进行
markdown的地方markdown就行了,如下:
{% 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 高亮代码
完成上面的内容markdown后,还不能达到大部人的预期效果,因为代码快部分没有高亮显示。接下来我们来对代码块进行处理。
highlight.js支持非常多语言的高亮,而且高亮的风格也非常丰富,我们先去官网根据自己的选择的语言下载下来,然后放入static文件夹
下,然后我们在基模版中如下使用就能实现高亮了:
<!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 src="{% static 'bootstrap-3.3.5/js/bootstrap.js' %}"></script><script src="{% static 'jquery-2.1.4.min.js' %}"></script><!-- jqcloud --><script src="{% static 'jqcloud/jqcloud-1.0.4.js'%}"></script><link rel="stylesheet" type="text/css" href="{% static 'jqcloud/jqcloud.css' %}"><script src="{% static 'highlight/highlight.pack.js' %}"></script><link rel="stylesheet" type="text/css" href="{% static 'highlight/styles/monokai.css' %}"><!--返回顶部--><script src="{% static 'scrollup/jquery.scrollUp.js' %}"></script></head>
<script>hljs.initHighlightingOnLoad();</script>
......
最终的显示效果如下:
pagedown编辑器
完成前面的两步后我们,可能还需要在后台的文章编辑部分使用markdown的编辑器,这里我使用的是django-pagedown编辑器
。django-pagedown完美支持markdown语法,还能边写边预览,如果你觉得原生的界面比较丑的化还可以自己重写css。
#安装django-pagedown
pip3 install django-pagedown
安装好后,我们需要在settings.py中加入应用才能使用:
INSTALLED_APPS = (
'bootstrap_admin',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'Article',
'pagedown',
)
接下来在admin.py中加入如下代码(官方的步骤不适用于django1.8,会报错):
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.
# 定义自己的form
class ArticleForm(forms.ModelForm):content = forms.CharField(widget=AdminPagedownWidget())class Meta:model = Articlefields = '__all__'class ArticleAdmin(admin.ModelAdmin):form = ArticleFormadmin.site.register(Author)
admin.site.register(Tag)
admin.site.register(Classification)
#注册的时候绑定
admin.site.register(Article,ArticleAdmin)
然后后台的效果图如下:
django1.8下的markdown、highlight、pagedown解决相关推荐
- Markdown入门和解决MD文件上传博客后图片无法显示问题
文章目录 Markdown基础和解决MD文件上传博客后图片无法显示问题 一.常见文本操作 1.标题 一级标题 二级标题 三级标题 四级标题 2.代码块 3.字体 4.引用 5.分割线 6.超链接 7. ...
- Ubuntu16.04系统下汉字显示为方框解决办法
Ubuntu16.04系统下汉字显示为方框解决办法 问题详情 打开Ubuntu系统,发现中文变方框了 问题分析 之前中文显示好好的,突然就中文变方框了.原先以为是语言的问题,后面换成了别的中文样式,发 ...
- VSCode下使用markdown导出pdf,导出图片或插入LaTeX公式等使用记录(1)
记录一下自己觉得比较好用的markdown插件,以及在VSCode下编辑并将markdown的渲染结果导出pdf为或png等格式. 1.Markdown All in One VSCode下的mark ...
- 在Windows 7下安装Oracle 11g的解决方法
在Windows 7下安装Oracle 11g的解决方法 前不久卸载掉了自己的Windows Vista系统,装上了Windows7 旗舰版,在装机过程中也遇到了很多问题,有些问题是自己不曾遇到过的, ...
- Vista下控件无法安装解决办法
Vista下控件无法安装解决办法 IE浏览器设置恢复为默认值: 1. 点击浏览器菜单栏上的工具->Internet选项->安全,选择internet区域,如[默认级别]按钮不是灰的, ...
- Fedora 下安装Mplayer(添加源和解决错误问题)
Mplyer fedora不给大家提供带有版权问题或是封源的软件,这个给我们下载软件带来了许多麻烦,所以在这里提供RPM Fusion源,来补充我们Linux的"软件库". 直接复 ...
- Qt QComboBox下拉框文字重叠解决方法
Qt QComboBox下拉框文字重叠解决方法 参考文章: (1)Qt QComboBox下拉框文字重叠解决方法 (2)https://www.cnblogs.com/nanqiang/p/10559 ...
- (笔记)Linux Root下的.gvfs出现异常解决办法
(笔记)Linux Root下的.gvfs出现异常解决办法 参考文章: (1)(笔记)Linux Root下的.gvfs出现异常解决办法 (2)https://www.cnblogs.com/tdyi ...
- Kali Linux下运行Sniffjoke出错的解决
Kali Linux下运行Sniffjoke出错的解决 由于Kali Linux版本的更新和Sniffjoke发布时间久远等问题,Sniffjoke在新版本的Kali Linux中运行存在各种问题.下 ...
最新文章
- autoware加载地图数据与使用rosbag包建图(三)
- 模拟上帝之手的对抗博弈——GAN背后的数学原理
- Computer:MediaPreview的简介、安装、使用方法之详细攻略
- RabbitMQ学习(七)_RabbitMQ Consumer获取消息的两种方式(poll,subscribe)解析
- 微型计算机没什么总线,微型计算机系统总线包括什么?
- 苏州银行对公定存通项目
- 百度免费开放长语音识别功能
- Dubbo源码分析(三):ExtensionLoader
- Nginx日志中的金矿
- 实现选择文本时选中整个元素文本
- Web前端:木兰花令网页案例设计
- 【盘点大系】《盘点5月份--2018》
- vue下利用canvas实现在线图片标注
- log4j安全漏洞fix--快速答疑处理篇。
- Python并发编程之进程池
- 【热门】男孩取名:代表希望与志向的男孩名字
- swiper h5学习
- 搞钱不再是第一要务(转载)
- TUP第19期综述:从12306看海量并发网站架构
- 【MYSQL】DQL
热门文章
- 布法罗大学计算机中国博士,【博士】计算机网络方向招生 - 计算机科学技术系(CS)版 - 北大未名BBS...
- Tensorflow中scope命名方法
- 【PyG入门学习】三:信息传递机制
- matlab里面axis auto,Matlab中axis函数用法总结-Go语言中文社区
- 数据结构课设—图型结构题目—行车路线
- 外科手术器械设计 超声刀设计思路和原理 - 02
- Pytest如何重复执行N次脚本
- 荣之学教育简述Shopee虾皮账号被冻结,最常见的2种原因
- 团队管理之《十人以下小团队管理手册》
- 记第一个完整的自动化测试脚本