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

林*** · 发表于 2024-6-13 15:12:54

本帖最后由一只晨月鸭于 2024-6-13 15:15 编辑

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

最近不是把博客的一些文章从和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>HTML & Markdown Converter</title>
<link rel="stylesheet" href="styles/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">HTML & Markdown Converter</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">HTML转Markdown</button>
<button type="button" class="btn btn-secondary">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。

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

复制代码

添加依赖
需要安装两个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"
}
}

复制代码

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

composer install

复制代码

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

克里*** · 发表于 2024-6-13 17:26:20

前排支持！

[软件开发讨论] 记一次临时开发经历-PHP开发语法转换工具

QQ群

访问手机版