调研markdown前后端技术 #35

zbzbw · 2019-05-04T08:16:53Z

包括以下内容：

前端如何展示最终报告？是后端生成渲染后的html返回至前端还是生成markdown至前端进行渲染？
若采用后端/前端渲染，使用什么库/技术？

成果要求：

选择一种渲染方式并说明优缺点。
调研对应所需的技术内容，说明上手难度、选择原因。

请在issue下回复成果后再关闭issue。

RookieFanzk · 2019-05-05T08:47:25Z

报告展示

对于展示最终报告，选择的是将markdown文件转换成html文件，返回给前端。
直接生成可以浏览的html文件，用户在使用的时候速度可能更快。

技术选择

选择的是python中的markdown包以及mdx_math扩展用来支持MathJax公式。

markdown包用起来非常简单，只是对文件进行的一些简单操作，上手门槛很低，操作简单。

下面给出具体的实现操作：

具体代码如下：

import markdown
from mdx_math import MathExtension

with open('E:/test.md', 'r', encoding='utf-8') as input_file:
    text = input_file.read()

md = markdown.Markdown(extensions=[MathExtension(enable_dollar_delimiter=True)])

html = md.convert(text)

with open('E:/test.html', 'w+', encoding='utf-8') as output_file:
    head_file = open('E:\head.txt', 'r')
    output_file.write(head_file.read())
    output_file.write(html)
    output_file.write('\n</body>')

head.txt文件中是html文件head部分，用来支持MathJax，具体内容如下：

<!DOCTYPE html>
<html>
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script>
</head>

<body>

目的是为了生成一个完整标准的html文件

示例

markdown文件内容：

# 这是一个markwon文件，包含数学公式，用来展示实验报告

## 下面是一些公式

科学记数法 $1.2 \times 10^{34}$

$\overbrace{a+b+\dots+n}^{m个}$|

$$a=x+y$$

$\frac{1}{a}$

$\sqrt{xy}+\sqrt[a]{x}$

$\sum_{k=1}^nkx $

$x_{22}
y^{(x)}
x^{y^z}$

生成的html文件内容

<!DOCTYPE html>
<html>
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script>
</head>

<body>
<h1>这是一个markwon文件，包含数学公式，用来展示实验报告</h1>
<h2>下面是一些公式</h2>
<p>科学记数法 <script type="math/tex">1.2 \times 10^{34}</script>
</p>
<p>
<script type="math/tex">\overbrace{a+b+\dots+n}^{m个}</script>|</p>
<p>
<script type="math/tex; mode=display">a=x+y</script>
</p>
<p>
<script type="math/tex">\frac{1}{a}</script>
</p>
<p>
<script type="math/tex">\sqrt{xy}+\sqrt[a]{x}</script>
</p>
<p>
<script type="math/tex">\sum_{k=1}^nkx </script>
</p>
<p>
<script type="math/tex">x_{22}
y^{(x)}
x^{y^z}</script>
</p>
</body>

页面效果：

zbzbw added the Size 3 4h label May 4, 2019

zbzbw added this to the Beta Version milestone May 4, 2019

zbzbw assigned RookieFanzk May 4, 2019

zbzbw added this to Markdown支持 in Beta Project Management May 4, 2019

RookieFanzk closed this as completed May 5, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

调研markdown前后端技术 #35

调研markdown前后端技术 #35

zbzbw commented May 4, 2019

RookieFanzk commented May 5, 2019

调研markdown前后端技术 #35

调研markdown前后端技术 #35

Comments

zbzbw commented May 4, 2019

RookieFanzk commented May 5, 2019

报告展示

技术选择

下面给出具体的实现操作：

示例

markdown文件内容：

生成的html文件内容