呓语 | 杨英明的个人博客

专注于c++、Python,欢迎交流

By

Django-markdownx 修改预览页默认CSS样式

在使用django-markdownx的过程中,存在不少问题,比如说这次要讨论的问题:预览页面显示样式和文章发布出去的显示样式不同。

导致这个问题的原因很简单:因为 后台使用的css和前台使用的css不同

在这里我只打算修改后台markdownx预览页的显示样式,让它显示效果和前台的显示效果相同。

要达到这个效果,需要完成两个步骤:

修改markdownx的css样式表

django-markdownx的css样式表是markdownx.css

我的markdownx.css路径是:D:\workspace\github\MingBlog\blog_venv\Lib\site-packages\markdownx\static\markdownx\admin\css\markdownx.css(我使用了virtualenv,所以有一段blog_venv路径)

你可以找找你的所在路径,一般在python的site-packages目录下。

找到markdownx.css文件后,在文件最后添加如下代码(注意一定是在文件最后,否则不生效):

/* 自定义css */
.markdownx .markdownx-preview {
    padding:10px;
    font-size:16px;
    font-family: Merriweather, 冬青黑体简体中文, "Microsoft YaHei", 微软雅黑, SimSun, 宋体, Heiti, 黑体, droid_sansregular, arial, serif;
}

.markdownx .markdownx-preview h2 {
    background: none repeat scroll 0% 0% #2B6695;
    border-radius: 6px;
    box-shadow: 0px 0px 0px 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFF;
    font-family: "微软雅黑","宋体","黑体",Arial;
    /*font-family: "Palatino Linotype", Palatino, Georgia, serif;*/
    font-size: 17px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 10px 0px !important;
    padding: 0px 0px 5px 15px;
    text-shadow: 2px 2px 3px #222;
}

.markdownx .markdownx-preview pre{ background: #272822; color: #f8f8f2 }
.markdownx .markdownx-preview code{
    font-family: "Palatino Linotype", Palatino, Georgia, serif;
    /*font-size: 16px!important;*/
}

修改过后,二级标题和字体产生了变化。

接下来在admin中添加代码高亮css文件

markdownx.css是自动加载的,无需手动添加,但是用pygments生成的代码高亮css文件需要我们手动添加。

具体方法是:
修改 [yourapp]\admin.py 中的文章管理类,在内部类Media中添加css样式。

class ArticleAdmin(admin.ModelAdmin):
    ……
    class Media:
        css = {
            'all':('/static/css/code.css',),
        }

详情可见官方文档:admin media css

原创声明

转载请注明:呓语 » Django-markdownx 修改预览页默认CSS样式