原文地点：https://www.mengze2.cn/post/5/
最近不是把博客的一些文章从和HTML转到Markdown了吗，因为之前换到了wordpress所以是HTML，但是这些文章再typecho无法被解析，于是就打算开发一个Markdown2HTML工具
下面使我的开发条记，大概比较含糊
项目结构
一样平常情况下，我不会这么干，但是为了文章，还是需要界说的项目结构：- markdown2html/
- │
- ├── index.php
- ├── convert.php
- ├── styles/
- │ └── bootstrap.min.css
- └── js/
- └── bootstrap.bundle.min.js
- index.php: 前端页面，包含输入框和按钮。
- convert.php: 后端逻辑处理，将HTML转换为Markdown或将Markdown转换为HTML。
- styles/: 存放CSS文件。
- js/: 存放JavaScript文件。
准备工作
下载Bootstrap
从Bootstrap官方网站下载最新版本的Bootstrap，并将bootstrap.min.css放入styles/文件夹，将bootstrap.bundle.min.js放入js/文件夹。也就是所谓的按需导入
编写前端页面 (index.php)
编写前端页面，包含一个文本输入框和两个按钮，分别用于将HTML转换为Markdown和将Markdown转换为HTML。这里不要求好看，而且需要快速开发响应式页面，所以选择bootstrap- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>转换工具</title>
- <link rel="stylesheet" href="styles/bootstrap.min.css">
- </head>
- <body>
-
- <h1 >转换工具</h1>
- <form id="convertForm" method="post">
-
- <label for="inputText" >Input Text</label>
- <textarea id="inputText" name="inputText" rows="10"></textarea>
-
-
- <button type="button" onclick="convert('html2markdown')">HTML转Markdown</button>
- <button type="button" onclick="convert('markdown2html')">Markdown转HTML</button>
-
-
- <label for="outputText" >Output Text</label>
- <textarea id="outputText" name="outputText" rows="10" readonly></textarea>
-
- </form>
-
-
-
- </body>
- </html>
编写后端逻辑 (convert.php)
接下来，编写后端逻辑，将HTML转换为Markdown或将Markdown转换为HTML。- [/code][align=center][img]https://www.mengze2.cn/usr/uploads/2024/06/248937117.png[/img][/align]
- [size=4]添加依靠[/size]
- 需要安装两个PHP库来实现转换功能：
- [indent]Composer是一个包管理器，雷同node的npm，和我发现PHP和Vue有异曲同工之妙
- [/indent]
- [list]
- [*]league/html-to-markdown: 将HTML转换为Markdown。
- [*]michelf/php-markdown: 将Markdown转换为HTML。
- [/list]在项目根目录下创建一个composer.json文件，内容如下：
- [code]{
- "require": {
- "league/html-to-markdown": "^5.0",
- "michelf/php-markdown": "^1.9"
- }
- }
然后运行composer install来安装这些依靠。终极效果
启动当地服务器（例如使用php -S localhost:8000），访问http://localhost:8000/，就可以看到转换工具的界面了。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
