任务描述

博客的源文件一般以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. 在docker中写个Hello World

    Hello World Docker 示例 准备hello.cpp #include<stdio.h> int main(){ printf("Hello World Docke ...

  2. 高效C++：设计与声明

    C++软件开发可以理解为设计一系列的类,让这些类相互使用,最终实现我们所需要的功能.类与类之间的相互关系可以很复杂,也可以很简单,如何简单高效的描述类与类之间的关系是设计的难点之一.遵循本文所提供的方 ...

  3. xenomai内核解析---内核对象注册表—xnregistry(重要组件)

    1. 概述 上篇文章xenomai内核解析--同步互斥机制(一)--优先级倒置讲到,对于所有内核对象: xnregistry:保存内核对象,提供内核对象存储和快速检索. xnsynch:资源抽象,提供 ...

  4. 【Unity3D】简单常用的功能实现1——鼠标点击实现移动

    [鼠标点击实现移动] 第一步,在要移动的GameObject的Inspector面板中添加角色控制器组件并调整参数. 参数的调整可以依照Scene面板,如下图的绿色线框(角色控制器组件是一种胶囊形状的 ...

  5. 将ip加入到防火墙

    五分钟内访问次数最多的ip加入到防火墙 #!/bin/bash cat /etc/httpd/logs/access_log|grep `date -d '1-minute-ago' +%d/%b/% ...

  6. 【JMicro】微服务部署架构及实例

    序言 JMicro是一个用Java语言实现的开源微服务全家桶,源码地址:https://github.com/mynewworldyyl/jmicro,Demo地址:http://124.70.152 ...

  7. 使用opencv为没有透明通道的图像加入透明通道

    在图像处理中,我们经常需要处理带透明通道的图片,比如为图片或视频添加水印,为图片或视频添加字幕.贴图等.然而,我们的素材图片未必总是带有透明通道.比如,素材的背景本该透明的地方,却是黑色和白色.有时, ...

  8. PHP preg_replace_callback_array() 函数

    preg_replace_callback_array 函数执行一个正则表达式搜索并且使用一个回调进行替换.高佣联盟 www.cgewang.com 该函数在 PHP7+ 版本支持. 语法 mixed ...

  9. PHP substr_compare() 函数

    实例 比较两个字符串: <?php高佣联盟 www.cgewang.comecho substr_compare("Hello world","Hello worl ...

  10. MediaDevices.getUserMedia()

    MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道.此流可以包含一个视频轨道(来自硬件或 ...