markdown转html | taohu的站

type

Post

status

Published

date

Jul 4, 2023

🤔 怎么实现转换？

直接利用markdown库就可以

先在python中安装markdown库


pip install markdown

转换

代码如下，运行下面的代码，将得到一个应用程序窗口。可以在 Markdown 编辑框中输入或编辑 Markdown 文本，然后单击 Convert 按钮进行转换，转换后的 HTML 代码将显示在 HTML 显示框中。还可以使用 Open 按钮选择一个 Markdown 文件，并将其内容显示在 Markdown 编辑框中。最后，使用 Export 按钮可以导出 HTML 内容到一个 HTML 文件。


import markdown
from tkinter import Tk, Text, Button, filedialog, messagebox, ttk
import webbrowser
import ctypes

# 设置高DPI感知
ctypes.windll.shcore.SetProcessDpiAwareness(1)


# 创建主窗口
window = Tk()
window.title("Markdown to HTML Converter")

# 设置字体和字体大小
font = ("Segoe UI", 12)
window.option_add("*Font", font)

# Markdown编辑界面
markdown_editor = Text(window, wrap="word")
markdown_editor.grid(row=0, column=0, sticky="nsew")

# HTML界面
html_editor = Text(window, wrap="word")
html_editor.grid(row=0, column=1, sticky="nsew")

# 创建打开文件按钮
open_button = ttk.Button(window, text="Open", command=lambda: open_file())
open_button.grid(row=1, column=0, padx=10, pady=5)

# 创建转换按钮
convert_button = ttk.Button(window, text="Convert", command=lambda: convert_to_html())
convert_button.grid(row=1, column=1, padx=10, pady=5)

# 创建导出按钮
export_button = ttk.Button(window, text="Export", command=lambda: export_html())
export_button.grid(row=1, column=2, padx=10, pady=5)

# 设置行和列的权重，使其可以自由调整大小
window.grid_rowconfigure(0, weight=1)
window.grid_columnconfigure(0, weight=1)
window.grid_columnconfigure(1, weight=1)

def open_file():
    filepath = filedialog.askopenfilename(filetypes=[("Markdown Files", "*.md")])
    if filepath:
        with open(filepath, "r", encoding="utf-8") as file:
            markdown_editor.delete("1.0", "end")
            markdown_editor.insert("1.0", file.read())

def convert_to_html():
    markdown_text = markdown_editor.get("1.0", "end")
    html_text = markdown.markdown(markdown_text)
    html = create_html_structure(html_text)
    html_editor.delete("1.0", "end")
    html_editor.insert("1.0", html)

def create_html_structure(body_content):
    template = f"""
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>网站标题</title>
    </head>
    <body>
        <div class="container">
        {body_content}
        </div>
    </body>
    </html>
    """
    return template

def export_html():
    html_text = html_editor.get("1.0", "end")
    filepath = filedialog.asksaveasfilename(defaultextension=".html", filetypes=[("HTML Files", "*.html")])
    if filepath:
        with open(filepath, "w", encoding="utf-8") as file:
            file.write(html_text)
        messagebox.showinfo("Export Complete", "HTML file exported successfully.")
        webbrowser.open(filepath)

# 运行主循环
window.mainloop()

运行程序：


python3  your_script.py

🙄怎么打包

安装pyinstaller

pip install pyinstaller

用pyinstaller命令打包


pyinstaller --onefile --hidden-import markdown --icon=youricon.ico your_script.py

--onefile 参数是打包方式，表示将整个应用程序打包成单个可执行文件.exe

--hidden-import markdown 表示把markdown库打包进去

--icon=youricon.ico 表示.exe文件的图标

your_script.py 表示要打包的脚本

🤗成果展示

定义网页样式

为了让html代码有更好的展示效果，在定义网页结构时还可以在python程序的 def create_html_structure预先定义一些css样式：

在程序中引用了自己定义的css库，还有Font Awesom的图标库，还有用来高亮显示代码的highlight.js的css库，还有highlight.js的js库。


def create_html_structure(body_content):
    template = f"""
   <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>网站标题</title>
        <link rel="stylesheet" href="../css/mdConvert.css">
        <link rel="stylesheet" href="https://henryxu.netlify.app/css/mdConvert.css">
        <link rel="stylesheet"  href="https://henryxu.netlify.app/jsp/highlight/styles/vs.min.css"/>
        <script src="https://henryxu.netlify.app/jsp/highlight//highlight.min.js"></script>
        <script>hljs.highlightAll();</script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    </head>
    <body>
        <div class="container">
        {body_content}
        </div>
    </body>
    </html>
    """
    return template

转换效果

💡

欢迎您在底部评论区留言，一起交流~