相信大家有時候有將以Markdown代碼寫就的內容轉換爲以HTML的版本之需求，反之亦然。除去利用網上現有的轉換工具外，今日介紹一個相對簡單地擁有一個屬於自己的轉換工具的方法。
在此之前，先上成品：
該功能的實現，利用的是WordPress編輯器中插入自定義HTML的功能。
post_type=page）爲例。在WordPress管理界面左側導航欄，點擊「頁面」>「新建頁面」，創建一個新頁面。為該頁面命名，例如：「HTML to Markdown 轉換器」。
完成以上步驟後，你的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。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。