记一次临时开发经历-PHP开发语法转换工具

原文链接：https://www.mengze2.cn/post/558.html

最近不是把博客的一些文章从和HTML转到Markdown了吗，因为之前换到了wordpress所以是HTML，但是这些文章再typecho无法被解析，于是就打算开发一个Markdown2HTML工具
下面使我的开发笔记，可能比较含糊
项目结构
一般情况下，我不会这么干，但是为了文章，还是需要定义的项目结构：

1. markdown2html/
   
2. │
   
3. ├── index.php
   
4. ├── convert.php
   
5. ├── styles/
   
6. │   └── bootstrap.min.css
   
7. └── js/
   
8.     └── 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

1. <!DOCTYPE html>
   
2. <html lang="zh-CN">
   
3. <head>
   
4.     <meta charset="UTF-8">
   
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
6.     <title>HTML & Markdown Converter</title>
   
7.     <link rel="stylesheet" href="styles/bootstrap.min.css">
   
8. </head>
   
9. <body>
   
10.     <div class="container mt-5">
    
11.         <h1 class="text-center">HTML & Markdown Converter</h1>
    
12.         <form id="convertForm" method="post">
    
13.             <div class="mb-3">
    
14.                 <label for="inputText" class="form-label">Input Text</label>
    
15.                 <textarea class="form-control" id="inputText" name="inputText" rows="10"></textarea>
    
16.             </div>
    
17.             <div class="d-flex justify-content-between">
    
18.                 <button type="button" class="btn btn-primary">HTML转Markdown</button>
    
19.                 <button type="button" class="btn btn-secondary">Markdown转HTML</button>
    
20.             </div>
    
21.             <div class="mt-3">
    
22.                 <label for="outputText" class="form-label">Output Text</label>
    
23.                 <textarea class="form-control" id="outputText" name="outputText" rows="10" readonly></textarea>
    
24.             </div>
    
25.         </form>
    
26.     </div>
    
27.    
    
28.     <script src="js/bootstrap.bundle.min.js"></script>
    
29.     <script>
    
30.         function convert(action) {
    
31.             const form = document.getElementById('convertForm');
    
32.             const formData = new FormData(form);
    
33.             formData.append('action', action);
    
34. 
    
35.             fetch('convert.php', {
    
36.                 method: 'POST',
    
37.                 body: formData
    
38.             })
    
39.             .then(response => response.text())
    
40.             .then(data => {
    
41.                 document.getElementById('outputText').value = data;
    
42.             });
    
43.         }
    
44.     </script>
    
45. </body>
    
46. </html>

复制代码

编写后端逻辑 (convert.php)
接下来，编写后端逻辑，将HTML转换为Markdown或将Markdown转换为HTML。

1. <?php
   
2. require 'vendor/autoload.php'; // 使用Composer加载依项
   
3. 
   
4. use League\HTMLToMarkdown\HtmlConverter;
   
5. use Michelf\Markdown;
   
6. 
   
7. if ($_SERVER['REQUEST_METHOD'] === 'POST') {
   
8.     $inputText = $_POST['inputText'];
   
9.     $action = $_POST['action'];
   
10. 
    
11.     if ($action === 'html2markdown') {
    
12.         $converter = new HtmlConverter();
    
13.         $outputText = $converter->convert($inputText);
    
14.     } elseif ($action === 'markdown2html') {
    
15.         $outputText = Markdown::defaultTransform($inputText);
    
16.     }
    
17. 
    
18.     echo $outputText;
    
19. }
    
20. ?>

复制代码

添加依赖
需要安装两个PHP库来实现转换功能：

Composer是一个包管理器，类似node的npm，和我发现PHP和Vue有异曲同工之妙

- league/html-to-markdown: 将HTML转换为Markdown。
- michelf/php-markdown: 将Markdown转换为HTML。
在项目根目录下创建一个composer.json文件，内容如下：

1. {
   
2.     "require": {
   
3.         "league/html-to-markdown": "^5.0",
   
4.         "michelf/php-markdown": "^1.9"
   
5.     }
   
6. }

复制代码

然后运行composer install来安装这些依赖。

1. composer install

复制代码

最终效果
启动本地服务器（例如使用php -S localhost:8000），访问http://localhost:8000/，就可以看到转换工具的界面了。

前排支持！