在 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 文本存儲在一個隱藏的輸入字段中，以便在頁面重新加載時保留它。
請注意，這個示例僅用于演示目的。在生產環境中，你需要對用戶輸入進行驗證和清理，以確保安全性。
