任务描述

博客的源文件一般以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. springboot整合swagger。完爆前后端调试

    web接口开发时在调试阶段最麻烦的就是参数调试,前端需要咨询后端.后端有时候自己也不是很了解.这时候就会造成调试一次接口就需要看一次代码.Swagger帮我们解决对接的麻烦 springboot接入s ...

  2. Eclipse默认快捷键说明

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...

  3. DP学习记录Ⅰ

    DP学习记录Ⅱ 前言 状态定义,转移方程,边界处理,这三部分想好了,就问题不大了.重点在状态定义,转移方程是基于状态定义的,边界处理是方便转移方程的开始的.因此最好先在纸上写出自己状态的意义,越详细越 ...

  4. Invalid RNPermission 'ios.permission.xxx'. should be one of: ( )

    原因可能是配置配置问题, 我碰到的是Android上完美运行,iOS报错,原因是前期用的Android开发,iOS的配置项没有配完整 按照官方配置一遍 https://github.com/react ...

  5. Bug--slfj4依赖冲突

    SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/F:/Spring%20p ...

  6. bootstrap-treeview 研究一下

    一直以来都是拿来主义,现在正好有空,也正好用到,准备好好研究下bootstrap-treeview. 实现目标:可搜索,可复选选中的权限控制菜单项. 研究失败 转 jstree

  7. kylin streaming原理介绍与特点浅析

    目录 前言 kylin streaming设计和原理 架构介绍 streaming coordinator streaming receiver cluster kylin streaming数据构建 ...

  8. 牛客练习赛64 红色的樱花 exgcd 贪心

    LINK:The red sakura 暴怒狂樱 血染京都. 这题质量不咋地 这题也没啥营养. 不过还是存在值得学习的地方的. 一个trick n行 m列 第一行与第n行相连 第1列和第m列相连的时候 ...

  9. intel：spectre&Meltdown侧信道攻击（一）

    只要平时对安全领域感兴趣的读者肯定都听过spectre&Meltdown侧信道攻击,今天简单介绍一下这种攻击的原理( https://www.bilibili.com/video/av1814 ...

  10. LeetCode 87，远看是字符串其实是搜索，你能做出来吗？

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题第54篇文章,我们一起来看LeetCode 87题,Scramble String(爬行字符串). 这题的官方难度 ...