最近不是把博客的一些文章从和HTML转到Markdown了吗，因为之前换到了wordpress所以是HTML，但是这些文章再typecho无法被解析，于是就打算开发一个Markdown2HTML工具
下面使我的开发笔记，可能比较含糊
项目结构
一般情况下，我不会这么干，但是为了文章，还是需要定义的项目结构：
1
2
3
4
5
6
7
8
| 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <!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>
<div class="container mt-5">
<h1 class="text-center">转换工具</h1>
<form id="convertForm" method="post">
<div class="mb-3">
<label for="inputText" class="form-label">Input Text</label>
<textarea class="form-control" id="inputText" name="inputText" rows="10"></textarea>
</div>
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-primary" onclick="convert('html2markdown')">HTML转Markdown</button>
<button type="button" class="btn btn-secondary" onclick="convert('markdown2html')">Markdown转HTML</button>
</div>
<div class="mt-3">
<label for="outputText" class="form-label">Output Text</label>
<textarea class="form-control" id="outputText" name="outputText" rows="10" readonly></textarea>
</div>
</form>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
function convert(action) {
const form = document.getElementById('convertForm');
const formData = new FormData(form);
formData.append('action', action);
fetch('convert.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
document.getElementById('outputText').value = data;
});
}
</script>
</body>
</html>
|
编写后端逻辑 (convert.php)
接下来，编写后端逻辑，将HTML转换为Markdown或将Markdown转换为HTML。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <?php
require 'vendor/autoload.php';
use League\HTMLToMarkdown\HtmlConverter;
use Michelf\Markdown;
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$inputText = $_POST['inputText'];
$action = $_POST['action'];
if ($action === 'html2markdown') {
$converter = new HtmlConverter();
$outputText = $converter->convert($inputText);
} elseif ($action === 'markdown2html') {
$outputText = Markdown::defaultTransform($inputText);
}
echo $outputText;
}
?>
|
添加依赖
需要安装两个PHP库来实现转换功能：
Composer是一个包管理器，类似node的npm，和我发现PHP和Vue有异曲同工之妙
league/html-to-markdown: 将HTML转换为Markdown。michelf/php-markdown: 将Markdown转换为HTML。
在项目根目录下创建一个composer.json文件，内容如下：
1
2
3
4
5
6
| {
"require": {
"league/html-to-markdown": "^5.0",
"michelf/php-markdown": "^1.9"
}
}
|
然后运行composer install来安装这些依赖。
最终效果
启动本地服务器（例如使用php -S localhost:8000），访问http://localhost:8000/，就可以看到转换工具的界面了。
