原文地址：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

Screenshot_2024_0613_144049.png

  • 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>
    <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>

Screenshot_2024_0613_144216.jpg

编写后端逻辑 (convert.php)

接下来，编写后端逻辑，将HTML转换为Markdown或将Markdown转换为HTML。

<?php
require 'vendor/autoload.php'; // 使用Composer加载依赖

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;
}
?>

Screenshot_2024_0613_144106.png

添加依赖

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

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

  • league/html-to-markdown: 将HTML转换为Markdown。
  • michelf/php-markdown: 将Markdown转换为HTML。

在项目根目录下创建一个composer.json文件，内容如下：

{
    "require": {
        "league/html-to-markdown": "^5.0",
        "michelf/php-markdown": "^1.9"
    }
}

Screenshot_2024_0613_144233.png

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

composer install

最终效果

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