相信大家有時候有將以Markdown代碼寫就的內容轉換爲以HTML的版本之需求，反之亦然。除去利用網上現有的轉換工具外，今日介紹一個相對簡單地擁有一個屬於自己的轉換工具的方法。
在此之前，先上成品：
該功能的實現，利用的是WordPress編輯器中插入自定義HTML的功能。
步驟
- 首先，找到一處想要放置該工具的位置。可以放在現成的網頁裏，也可以新開一個網頁。以新建一個頁面（
post_type=page）爲例。在WordPress管理界面左側導航欄，點擊「頁面」>「新建頁面」，創建一個新頁面。為該頁面命名，例如：「HTML to Markdown 轉換器」。 - 添加HTML和JavaScript代碼。在頁面編輯器中，添加一個「自定義HTML」塊。將所需代碼（後述）複製到自定義HTML塊中。
- 發布並預覽頁面。點擊「發佈」按鈕，保存並發布新頁面。然後，點擊預覽按鈕，在新窗口中查看已發布的頁面。這時應該可以看到HTML到Markdown的轉換器。
- 將頁面鏈接添加到菜單（可選）：如果希望將新頁面添加到站點的導航菜單中，可以在WordPress管理界面左側導航欄中點擊「外觀」>「菜單」。選擇要編輯的菜單，然後點擊「添加項目」>「頁面」以將新頁面添加到菜單中。拖動頁面項目以調整其在菜單中的順序，然後點擊「保存菜單」。
完成以上步驟後，你的WordPress站點上就有了一個簡單的Markdown、HTML轉換器。
代碼
上述第2步中的代碼，茲介紹。
如果想要轉換Markdown至HTML，代碼爲：
<div>
<textarea id="markdownInput" placeholder="輸入Markdown" rows="10" cols="50"></textarea>
<button id="convertBtn">轉換爲HTML</button>
<textarea id="htmlOutput" placeholder="轉換後的HTML" rows="10" cols="50" readonly></textarea>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
<script>
document.getElementById('convertBtn').addEventListener('click', function() {
var markdownInput = document.getElementById('markdownInput').value;
var converter = new showdown.Converter();
var htmlOutput = converter.makeHtml(markdownInput);
document.getElementById('htmlOutput').value = htmlOutput;
});
</script>
</div>按：本工具使用了一個名爲showdown的開源庫，以CDN加載，可能會受到網絡環境之影響。另外，本串代碼使得工具在樣式上能夠居中，以圖美觀。
如果想要轉換HTML至Markdown，代碼爲：
<!DOCTYPE html>
<html lang="zh-HK">
<center>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轉換HTML至Markdown</title>
</head>
<body>
<textarea id="htmlInput" placeholder="輸入HTML" rows="10" cols="50"></textarea>
<button id="convertBtn">轉換爲Markdown</button>
<textarea id="markdownOutput" placeholder="轉換後的Markdown" rows="10" cols="50" readonly></textarea>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/turndown.min.js"></script>
<script>
document.getElementById('convertBtn').addEventListener('click', function () {
var turndownService = new TurndownService();
var htmlInput = document.getElementById('htmlInput').value;
var markdownOutput = turndownService.turndown(htmlInput);
document.getElementById('markdownOutput').value = markdownOutput;
});
</script>
</body>
</center>
</html>按：本工具使用了一個名爲Turndown的開源庫，以CDN加載，可能會受到網絡環境之影響。同樣地，本串代碼使得工具在樣式上能夠居中，以圖美觀。
而由於使用了在線開源庫，那麼輸入的數據會在傳輸過程中被發送到該庫，並在該庫中進行處理。這可能會存在一定的安全風險，除非有辦法確定該庫是否會收集數據或將其用於其他用途。建議查看該庫的隱私政策和服務條款，以了解其數據處理方式。
結語
通過上述介紹，大家應該了解到了爲WordPress添上在線Markdown、HTML互轉工具的方法吧。如果仍有疑問，或有意見想要指導，歡迎於評論區留言。也可以移步瀏覽更多筆者所總結的WordPress小攻略，訂閱WordPress相關文章的RSS。
在〈爲WordPress添上在線Markdown、HTML互轉工具〉中有 1 則留言
网页上确实可以用 JavaScript 处理文本，不知道好不好处理上传的文件🤔