在 PHP 中实现 Markdown 的实时预览，可以使用 JavaScript 库（例如：marked.js）和 PHP 解析库（例如：Parsedown 或 Michelf PHP Markdown）结合来实现。
这里是一个简单的示例，展示了如何使用 Parsedown 和 marked.js 实现实时预览：
首先，下载并包含 Parsedown 库。你可以从这里下载：Parsedown。将 Parsedown.php 文件放入你的项目文件夹中。
创建一个名为 index.php 的文件，然后添加以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Real-time Preview</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<textarea id="markdown-input" style="width: 48%; height: 300px;" oninput="updatePreview();" placeholder="Type your markdown here..."></textarea>
<div id="preview" style="width: 48%; height: 300px; border: 1px solid #ccc; padding: 10px; overflow-y: scroll;"></div>
<?php
require_once 'Parsedown.php';
$parsedown = new Parsedown();
if (isset($_POST['markdown'])) {
echo<script>document.getElementById("markdown-input").value = ' . json_encode($_POST['markdown']) . '; updatePreview();</script>';
}
?>
<form method="post">
<input type="hidden" name="markdown" id="markdown-hidden">
<button type="submit">Submit</button>
</form>
<script>
function updatePreview() {
const markdownInput = document.getElementById('markdown-input');
const preview = document.getElementById('preview');
const markdownHidden = document.getElementById('markdown-hidden');
const markdownText = markdownInput.value;
const html = marked(markdownText);
preview.innerHTML = html;
markdownHidden.value = markdownText;
}
</script>
</body>
</html>
这个示例中，我们使用了一个文本区域（<textarea>）来输入 Markdown 文本，并在输入时实时更新预览。我们使用 marked.js 库将 Markdown 转换为 HTML，并将其显示在名为 “preview” 的 <div> 元素中。
当用户单击 “Submit” 按钮时，表单将提交到 PHP 脚本，你可以在其中处理 Markdown 数据（例如将其保存到数据库中）。在这个示例中，我们只是将 Markdown 文本存储在一个隐藏的输入字段中，以便在页面重新加载时保留它。
请注意，这个示例仅用于演示目的。在生产环境中，你需要对用户输入进行验证和清理，以确保安全性。
