任务描述

博客的源文件一般以md文件保存

读取md源文件解析为html代码，然后嵌入到body中去

公式部分，需要使用第三方js库加载

实现办法

基于Django实现，进入webpage页面，然后通过ajax请求服务器，服务器读取md文件并解析为字符串返回到前端，前端使用marked.js库解析为html注入到body中去，其中公式通过MathJax.js来渲染，不过这个会有点慢。

1. 前端代码

<html>

<head>

<script type="text/javascript" src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'></script>

<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>

<script>

    $(document).ready(function(){

        $.get("/polls/showblog/", function(ret){

            $('#content').html(marked(ret["content"]))

        });

    });

</script>

</head>

<body id="content">

</body>

</html>

2. 后台代码

def webpage(request):

    return render(request, 'polls/webpage.html')

def showblog(request):

    print('current path', os.getcwd())

    s = open('blog.md', 'r', encoding='utf8').read()

    return HttpResponse(json.dumps({"content": s}, ensure_ascii=False), content_type='application/json')

3. 候选方法

还可以通过后台来将md解析成为html代码，下面是一个网上找的代码

#-*- coding: utf-8 -*

__author__ = 'geebos'

import re

import markdown

from pygments import highlight

from pygments.token import Text, STANDARD_TYPES

from pygments.formatter import Formatter

from pygments.lexers import get_lexer_by_name

from pygments.lexers import guess_lexer

def _get_ttype_class(ttype):

    fname = STANDARD_TYPES.get(ttype)

    if fname:

        return fname

    aname = ''

    while fname is None:

        aname = '-' + ttype[-1] + aname

        ttype = ttype.parent

        fname = STANDARD_TYPES.get(ttype)

    return fname + aname

def _line_num_tag_gen():

    line_num = 0

    def result():

        nonlocal line_num

        line_num += 1

        return f'<div class="line-numbers"><div class="line-num" data-line-num="{line_num}"></div></div>'

    return result

class HtmlLiFormatter(Formatter):

    def __init__(self, **options):

        Formatter.__init__(self, **options)

    def _get_css_class(self, ttype):

        """Return the css class of this token type prefixed with

        the classprefix option."""

        ttypeclass = _get_ttype_class(ttype)

        if ttypeclass:

            return ttypeclass

        return ''

    def html_encode(self, value):

        if '<' in value:

            value = value.replace('<', '&lt;')

        if '>' in value:

            value = value.replace('>', '&gt;')

        return value

    def _get_css_classes(self, ttype):

        """Return the css classes of this token type prefixed with

        the classprefix option."""

        cls = self._get_css_class(ttype)

        while ttype not in STANDARD_TYPES:

            ttype = ttype.parent

            cls = self._get_css_class(ttype) + ' ' + cls

        return cls

    def format(self, tokensource, outfile):

        get_line_num_tag = _line_num_tag_gen()

        line_start_tag = '<li class="line">'

        line_end_tag = '</li>'

        code_tags = ['<ol class="code-container">']

        num_tags = ['<ol class="num-container">']

        line_value = ''

        outfile.write('<div class="code">')

        # 预处理

        temp_tokensource = []

        for ttype, value in tokensource:

            value = value.replace(' ', '&nbsp;')

            if ttype == Text and '\n' in value:

                values = re.findall(pattern='([^\n]*)(\n)([^\n]*)', string=value)

                for i in values:

                    for k in i:

                        if k != '':

                            temp_tokensource.append((ttype, k))

            else:

                temp_tokensource.append((ttype, value))

        for ttype, value in temp_tokensource:

            ttype_class = self._get_css_classes(ttype)

            value = self.html_encode(value)

            if value != '\n':

                line_value += f'<span class="{ttype_class}">{value}</span>'

            else:

                num_tags.append(get_line_num_tag())

                code_tags.append(f'{line_start_tag}<div class="highlight-code"><div class="code-line">{line_value}</div></div>{line_end_tag}\n')

                line_value = ''

        num_tags.append('</ol>')

        code_tags.append('</ol>')

        outfile.write(f'{"".join(num_tags)}{"".join(code_tags)}')

        outfile.write('</div>\n')

def code_to_html(match):

    type_and_content = re.findall(pattern='```(\w*)[\n|\r]([^`]+)```', string=match.group(0))

    formatter = HtmlLiFormatter(linenos=True, style='colorful')

    code_type = type_and_content[0][0]

    code_content = type_and_content[0][1]

    if code_type != '':

        substring = highlight(code=code_content, lexer=get_lexer_by_name(code_type), formatter=formatter)

    else:

        substring = highlight(code=code_content, lexer=guess_lexer(code_content), formatter=formatter)

    return substring

def md_to_html(mdstr):

    sub_string = re.sub(pattern='```([^`]+)```', repl=code_to_html, string=mdstr)

    exts = ['markdown.extensions.extra', 'markdown.extensions.tables']

    html = markdown.markdown(sub_string, extensions=exts)

    return html

if __name__ == '__main__':

    # 在这里调用md_to_html就可以将md文件内容转化为str类型的html代码

    res = md_to_html(open('blog.md', 'r', encoding='utf8').read())

    htmlstr = '<html><body>' + res + '</body></html>'

    open('webpage.html', 'w', encoding='utf8').write(htmlstr)

结论

博客文件以后用md文件保存就可以了，然后通过md->html->js->注入body的思路，实现批量形成博客网页就可以了。

md文件批量转化为html的更多相关文章

  1. 用脚本如何实现将Linux下的txt文件批量转化为Windows下的txt文件？

    众所周知,Windows和Linux的文件换行回车格式不同,Windows下换行格式是\r\n(回车+换行),Linux下换行格式为\n(只是换行),因此,其中一个操作系统的文本文件若需要在另外一个中 ...

  2. R语言︱用excel VBA把xlsx批量转化为csv格式

    笔者寄语:批量读取目前看到有以下几种方法:xlsx包.RODBC包.批量转化成csv后读入.本章来自博客:http://www.cnblogs.com/weibaar/p/4506144.html 在 ...

  3. Java实现文件批量重命名

    Windows操作系统可以实现重命名文件操作,却不能实现批量重命名.本实例实现了批量重命名功能,可以将一个文件夹内同一类型的文件按照一定的规则批量重命名.用户可以给出重命名模板,程序可以根据模板对相应 ...

  4. 带进度条的文件批量上传插件uploadify

    有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...

  5. .md文件的语法

    md全称是Macdown,.md文件可以当记事本一样使用,作为编辑软件,还可以自己添加样式,图片,链接等,可以用记事本打开,也可以保持样式排版转换为html文件,语法比较简单..md除了编辑容易的优势 ...

  6. linux 目录下文件批量植入和删除，按日期打包

    linux目录下文件批量植入 [root@greymouster http2]# find /usr/local/http2/htdocs/ -type f|xargs sed -i "   ...

  7. Markdown语言.md文件

    转自:http://www.kuqin.com/shuoit/20141125/343459.html 之前一直在使用github,也在上面分享了不少的项目和Demo,每次创建新项目的时候,使用的都是 ...

  8. svn文件批量清除

    svn文件批量清除 http://files.cnblogs.com/files/douxuyao/clearsvn.rar

  9. csv文件批量导入数据到sqlite。

    csv文件批量导入数据到sqlite. 代码: f = web.input(bs_switch = {})  # bs_switch 为from表单file字段的namedata =[i.split( ...

随机推荐

  1. 少儿编程：python趣味编程第二课，如何在pygame中写文字

    python趣味编程第二课:本文仅针对8-16岁的青少年,所以流程是按如何去教好中小学生走的,并不适合成人找工作学习,因为进度也是按照青少年走的 大家好,我是C大叔,上一篇文章已经跟大家介绍了一款开发 ...

  2. 简单分析 ztree 源码

    为了把 SVG标注 代码抽成一个库,我要学习一下 ztree 是怎么写的. 开始正文. 这只是一个很简单的版本,以后可能会详细分析... (function ($) { var settings = ...

  3. Java7/8 中的 HashMap 和 ConcurrentHashMap

    Java7 HashMap  数组+链表 Java7 ConcurrentHashMap   Segment数组+HashEntry数组链表+ReenTrantLock分段锁 Java8 HashMa ...

  4. vue学习(十八)使用自定义指令 为字体渲染颜色

    <div id="app"> //v-color 是自定义的 <input type="text" class="form-cont ...

  5. xctf-web fakebook

    点join注册账号 进入view.php发现参数no存在sql注入,但是过滤了select关键字,用内联注释绕过 在users表的data字段发现了用序列化存储的用户信息 然后就卡在这里了....看了 ...

  6. DOM事件操作

    DOM事件:对事件做出反应 当事件发生时,可以执行 JavaScript,比如:点击时 onClick="" 例:当用户点击时,会改变 <h1> 元素的内容: < ...

  7. Day04_乐优商城项目搭建

    学于黑马和传智播客联合做的教学项目 感谢 黑马官网 传智播客官网 微信搜索"艺术行者",关注并回复关键词"乐优商城"获取视频和教程资料! b站在线视频 0.学习 ...

  8. Python三引号

    Python三引号:多用作注释.数据库语句.编写 HTML 文本. strs = ''' 使用了三引号的字符串 ''' print (strs) # 在 ‘’‘ 里可以使用转义字符 strs = '' ...

  9. 如何使用PHP验证客户端提交的表单数据

    PHP 表单验证 本章节我们将介绍如何使用PHP验证客户端提交的表单数据. PHP 表单验证 在处理PHP表单时我们需要考虑安全性. 本章节我们将展示PHP表单数据安全处理,为了防止黑客及垃圾信息我们 ...

  10. PHP fileinode() 函数

    定义和用法 fileinode() 函数返回指定文件的 inode 编号. 如果成功,该函数返回指定文件的 inode 编号.如果失败,则返回 FALSE. 语法 fileinode(filename ...