自动化Python脚本：用Typora将Markdown文件转为html文件
本文介绍自动化 Python 脚本，实现用 Typora 将 Markdown 文件转为 html 文件。
背景介绍
目前比较流行使用 Markdown 形式的开发文档，并且使用版本管理工具维护开发文档的增删和修改。而对于开发文档的阅读者来说，可能他们更多是的阅读需要，并没有编辑和修改的需求，因此如果能够使用浏览器进行访问，则将会是比较愉悦的体验，还可以避免误修改的风险。
这里介绍一款比较优秀并且免费的 Markdown 文档编辑工具 Typora，其介绍及使用说明可以自行到网上查阅，这里不再赘述。接下来将介绍如何使用自动化 Python 脚本，实现用 Typora 将 Markdown 文件转换为 html 文件，并在 html 文件中添加自定义格式生成目录大纲，然后用浏览器访问转换后的 html 文件。
运行环境
- 操作系统：windows 10
- 版本管理工具：TFS (Team Foundation Server)
- Python 3.8.2
- Typora 0.9.79 (beta)
这里需要使用到 GUI 自动化工具 PyAutoGUI 和 Pywinauto，如果没有安装这两个工具，可以在联网的条件下使用如下两条命令进行安装
pip install pyautogui
pip install pywinauto
关于这两个工具的详细使用，可以自行到网上查阅。
自动化脚本
获取最新版本
获取服务器上的最新开发文档（Markdown 形式）到本地，这里可以通过调用批处理文件的方式实现。
批处理文件 TfsGetLatest.bat：
"C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\TF.exe" get /all /recursive $/Document D:\AutoScript\Document
其中 $/Document 代表 TFS 服务器路径，D:\AutoScript\Document 代表本地代码路径。
然后，利用 Python 脚本调用批处理文件就可以获取 TFS 服务器上的最新版本：
import os
os.system(os.path.join(os.getcwd(), 'TfsGetLatest.bat'))
筛选内容有变动的 md 文件
在 D:\AutoScript\ 目录下创建文件夹 DocumentBak，用于保存上一次获取的服务器上的最新版本，如果这是第一次运行，则该目录为空。
在 D:\AutoScript\ 目录下创建文件夹 DocumentTemp，并将目录 Document 下的所有内容拷贝到目录 DocumentTemp 下，然后比较目录 DocumentTemp 和 DocumentBak，筛选出内容有变动的 md 文件，记录所有的 md 文件，同时删除没有变化的 md 文件和图像文件
# 与备份目录比较，筛选源目录下有变动的md文件
def FilterChangedMd(srcDir, bakDir):
srcDirLen = len(srcDir)
if not srcDir.endswith('\\'):
srcDirLen = srcDirLen + 1
allMdNames = []
changedMdPaths = []
for root, dirs, files in os.walk(srcDir):
for name in files:
# 筛选后缀名为md的文件
if FileFormat.IsMdFile(name):
allMdNames.append(name)
# 筛选有变化的md文件
fullPath = os.path.join(root, name)
subPath = fullPath[srcDirLen:]
aimPath = os.path.join(bakDir, subPath)
if not (os.path.exists(aimPath) and filecmp.cmp(fullPath, aimPath)):
changedMdPaths.insert(0, fullPath)
else:
os.remove(fullPath)
elif FileFormat.IsImageFile(name):
# 删除没有变化的图像文件
fullPath = os.path.join(root, name)
subPath = fullPath[srcDirLen:]
aimPath = os.path.join(bakDir, subPath)
if os.path.exists(aimPath) and filecmp.cmp(fullPath, aimPath):
os.remove(fullPath)
else:
os.remove(os.path.join(root, name))
return allMdNames, changedMdPaths
将目录 Document 下的所有内容拷贝到备份目录 DocumentBak 下。
修改内容有变动的 md 文件中的其它 md 文件引用
筛选出有变动的 md 文件后，查找文件中引用的 md 文件，并将对应的后缀名修改为 html
# 修正有变动的md文件，将文件中引用的md文件后缀名修改为html
def ReviseChangedMd(allMdNames, changedMdPaths):
for mdPath in changedMdPaths:
# 将文件所有的内容全部读取出来，匹配修改后写入到新文件中
fOld = open(mdPath, 'r', encoding = 'utf-8')
fNew = open(mdPath + '.bak', 'w', encoding = 'utf-8')
# 循环读取旧文件
for line in fOld:
for mdName in allMdNames:
if mdName in line:
mdNewName = mdName[:-2] + FileFormat.HtmlFileSuffix()
line = line.replace(mdName, mdNewName)
fNew.write(line)
fOld.close()
fNew.close()
# 将旧文件替换为新文件
os.remove(mdPath)
os.rename(mdPath + '.bak', mdPath)
将修正后的 md 文件转换为 html 文件
由于 Typora 软件是多进程，并且使用工具 Pywinauto 查看其 control_type 是 Pane，不能像网上介绍的 notepad 的样例那样去使用，因此这里使用工具 PyAutoGUI，根据界面坐标去操作 Typora 软件。
由于 Typora 软件打开时会和上次的布局一致，因此可以事先获取到要点击的按钮的界面坐标，及要输入文本的输入框的界面坐标。这里要求输入四个界面坐标，分别为打开文件时文件名输入框的界面坐标、菜单“文件”按钮的界面坐标、导出 HTML 文件时文件名输入框的界面坐标、退出软件时“丢弃”按钮的界面坐标。（ 自动获取控件坐标的脚本见 https://blog.csdn.net/he_nan/article/details/106225372）
注意：界面坐标是一个范围，只要保证鼠标点击该坐标后对应的输入框或按钮被选中即可。另外，在运行脚本输入文本时，需保证系统的输入法始终是英文状态，否则可能会导致输入失败；如果无法控制输入法自动切换，还可以输入打开文件时“打开”按钮的界面坐标和导出 HTML 文件时“保存”按钮的界面坐标。
import pyautogui
import pywinauto
# 将指定目录下的单个md文件转换为html文件
def ConvertMdToHtml(typoraApp, inFileCoor, fileMenuCoor, outFileCoor, quitFileCoor, mdFile):
# 打开Typora应用程序
pywinauto.application.Application(backend="uia").start(typoraApp)
# 打开md文件
time.sleep(5)
pyautogui.hotkey('ctrl', 'o')
time.sleep(2)
pyautogui.click(inFileCoor[0], inFileCoor[1])
pyautogui.typewrite(mdFile)
pyautogui.press('enter', presses=1, interval=0.5)
# 导出html
time.sleep(5)
pyautogui.click(fileMenuCoor[0], fileMenuCoor[1])
time.sleep(0.5)
pyautogui.press('down', presses=14, interval=0.1)
pyautogui.press('right', presses=1, interval=0.1)
pyautogui.press('down', presses=1, interval=0.1)
pyautogui.press('enter', presses=1, interval=0.5)
time.sleep(2)
pyautogui.doubleClick(outFileCoor[0], outFileCoor[1])
pyautogui.typewrite(mdFile[:-2] + FileFormat.HtmlFileSuffix())
pyautogui.press('enter', presses=1, interval=0.5)
pyautogui.press('left', presses=1, interval=0.1)
pyautogui.press('enter', presses=1, interval=0.5)
# 关闭Typora
time.sleep(5)
pyautogui.hotkey('ctrl', 'w')
time.sleep(1)
pyautogui.click(quitFileCoor[0], quitFileCoor[1])
time.sleep(5)
# 将指定目录下的所有md文件转换为html文件
def ConvertAllMdToHtml(typoraApp, inFileCoor, fileMenuCoor, outFileCoor, quitFileCoor, mdFilesDir):
# 筛选指定目录下的文件
for root, dirs, files in os.walk(mdFilesDir):
for name in files:
if FileFormat.IsMdFile(name):
mdFile = os.path.join(root, name)
ConvertMdToHtml(typoraApp, inFileCoor, fileMenuCoor, outFileCoor, quitFileCoor, mdFile)
将转换后的 html 文件加上自定义格式
在转换后的 html 文件的 body 的结尾前加上自定义格式，该格式可以生成目录大纲，格式如下
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">script>
<script src="http://yandex.st/highlightjs/6.2/highlight.min.js">script>
<script>hljs.initHighlightingOnLoad();script>
<script>
//标题序号计数器
var hCount = [0, 0, 0, 0, 0, 0];
//设置计数器
function setHCount(number) {
//当前计数器加一
hCount[number - 1]++;
for (var i = number, length = hCount.length; i < length; i++) {
//子目录计数器全部置零
hCount[i] = 0;
}
}
//重命名目录名称
function setHTagValue(item, number) {
//获取标题名
var text = $(item).get(0).innerHTML;
//初始化空字符串
var before = "";
//生成序号
for (var i = 0, length = hCount.length; i < number; i++) {
if (i < number - 1)
before += hCount[i] + ".";
else
before += hCount[i] + " ";
}
//在标题前面加上序号
$(item).get(0).innerHTML = before + text;
}
function renameHTag(item) {
var tag = $(item).get(0).localName;
for (var i = 1; i < 7; ++i) {
if (tag === "h" + i) {
setHCount(i - 1);
setHTagValue(item, i - 1);
}
}
}
$(document).ready(function () {
$("h1,h2,h3,h4,h5,h6").each(function (i, item) {
//给类标签编号
renameHTag(item);
//获取标签的名字,h1,还是h2
var tag = $(item).get(0).localName;
//为该标签设置id属性
$(item).attr("id", "wow" + i);
//添加一个页内超链接,并设置class选择器
$("#category").append('+ tag + '" href="#wow' + i + '">' + $(item).text() + '');
//为每一个标题超链接的class属性设置左边距
$(".newh1").css("margin-left", 0);
$(".newh2").css("margin-left", 20);
$(".newh3").css("margin-left", 40);
$(".newh4").css("margin-left", 60);
$(".newh5").css("margin-left", 80);
$(".newh6").css("margin-left", 100);
});
//设置class选择器为.book-body的html内容
$(".book-body").html($(".book-body").nextAll())
});
script>
<style type="text/css">
@media (min-width: 1100px) {
#category {
/* 绝对定位 */
position: fixed;
/* 目录显示的位置 */
left: 2%;
top: 55px;
/* 目录栏的高度 */
height: 100%;
/* 开启垂直滚动条 */
overflow-y: scroll;
/* 开启水平滚动条 */
overflow-x: scroll;
}
}
@media (-webkit-max-device-pixel-ratio: 1) {
::-webkit-scrollbar-track-piece {
background-color: #FFF
}
::-webkit-scrollbar {
width: 6px;
height: 6px
}
::-webkit-scrollbar-thumb {
background-color: #c2c2c2;
background-clip: padding-box;
min-height: 28px
}
::-webkit-scrollbar-thumb:hover {
background-color: #A0A0A0
}
}
style>
<div class="book-body" id="book_body" style="width:80%;display:block;"> div>
<p style="position:fixed;left:2%;top:0px;overflow:hidden;"><font color="#FF4500" size=5 face="微软雅黑">目录font>p>
<div class="book-summary" id="category" style="width:15%;display:block;overflow:hidden;font-size:14px" >div>
将处理后的 html 文件和图像文件拷贝到目标目录下
将处理后的 html 文件和图像文件拷贝到目标目录下，该目录可以是本地目录，也可以是网站目录（自建内网网站），然后就可以通过浏览器访问 html 文件了。
写在最后
全部的完整脚本，见附件。
脚本放在与 Document 同级的目录下，直接执行 Markdown2Html.py 即可。