Địa chỉ gốc: https://www.mengze2.cn/post/5/
Gần đây tôi đã chuyển đổi một số bài viết trên blog từ HTML sang Markdown, vì trước đây khi chuyển sang WordPress là HTML, nhưng các bài viết này không thể được phân tích cú pháp trong Typecho, vì vậy tôi đã quyết định phát triển một công cụ Markdown2HTML. Dưới đây là ghi chú phát triển của tôi, có thể hơi mơ hồ.
Cấu trúc dự án
Thông thường tôi không làm như vậy, nhưng vì bài viết, tôi vẫn cần định nghĩa cấu trúc dự án:
markdown2html/
│
├── index.php
├── processor.php
├── styles/
│ └── bootstrap.min.css
└── js/
└── bootstrap.bundle.min.js
index.php: Trang giao diện người dùng, chứa ô nhập liệu và nút bấm.processor.php: Xử lý logic phía máy chủ, chuyển đổi HTML sang Markdown hoặc ngược lại.styles/: Chứa các tệp CSS.js/: Chứa các tệp JavaScript.
Chuẩn bị
Tải Bootstrap
Từ trang web chính thức của Bootstrap, tải phiên bản mới nhất và đặt bootstrap.min.css vào thư mục styles/, đặt bootstrap.bundle.min.js vào thư mục js/. Đây là所谓的按需导入 (tải theo yêu cầu).
Viết trang giao diện (index.php)
Viết trang giao diện, chứa một ô văn bản đầu vào và hai nút bấm, tương ứng để chuyển đổi HTML sang Markdown và Markdown sang HTML. Ở đây không yêu cầu đẹp, và cần phát triển nhanh trang phản hồi, vì vậy chọn bootstrap.
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Công cụ chuyển đổi</title>
<link rel="stylesheet" href="styles/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">Công cụ chuyển đổi</h1>
<form id="conversionForm" method="post">
<div class="mb-3">
<label for="sourceText" class="form-label">Văn bản đầu vào</label>
<textarea class="form-control" id="sourceText" name="sourceText" rows="10"></textarea>
</div>
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-primary" onclick="processConversion('html2markdown')">HTML sang Markdown</button>
<button type="button" class="btn btn-secondary" onclick="processConversion('markdown2html')">Markdown sang HTML</button>
</div>
<div class="mt-3">
<label for="resultText" class="form-label">Văn bản kết quả</label>
<textarea class="form-control" id="resultText" name="resultText" rows="10" readonly></textarea>
</div>
</form>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
function processConversion(actionType) {
const formElement = document.getElementById('conversionForm');
const formData = new FormData(formElement);
formData.append('conversionAction', actionType);
fetch('processor.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
document.getElementById('resultText').value = data;
});
}
</script>
</body>
</html>
Viết logic phía máy chủ (processor.php)
Tiếp theo, viết logic phía máy chủ, chuyển đổi HTML sang Markdown hoặc ngược lại.
<?php
require 'vendor/autoload.php'; // Sử dụng Composer để tải phụ thuộc
use League\HTMLToMarkdown\HtmlConverter;
use Michelf\Markdown;
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$inputContent = $_POST['sourceText'];
$conversionType = $_POST['conversionAction'];
if ($conversionType === 'html2markdown') {
$converter = new HtmlConverter();
$outputContent = $converter->convert($inputContent);
} elseif ($conversionType === 'markdown2html') {
$outputContent = Markdown::defaultTransform($inputContent);
}
echo $outputContent;
}
?>
Thêm phụ thuộc
Cần cài đặt hai thư viện PHP để thực hiện chức năng chuyển đổi:
Composer là trình quản lý gói, tương tự như npm của Node.js, và tôi nhận thấy PHP và Vue có điểm tương đồng thú vị
league/html-to-markdown: Chuyển đổi HTML sang Markdown.michelf/php-markdown: Chuyển đổi Markdown sang HTML.
Tạo một tệp composer.json trong thư mục gốc của dự án, với nội dung sau:
{
"require": {
"league/html-to-markdown": "^5.0",
"michelf/php-markdown": "^1.9"
}
}
Sau đó chạy composer install để cài đặt các phụ thuộc.
composer install
Kết quả cuối cùng
Khởi động máy chủ cục bộ (ví dụ sử dụng php -S localhost:8000), truy cập http://localhost:8000/, bạn sẽ thấy giao diện của công cụ chuyển đổi.