爲WordPress添上在線Markdown、HTML互轉工具

山月

在VS Code配置Obsidian風格Markdown編輯環境 – 山月在Windows通过LM Studio使用Zotero MCP – 山月禁用WordPress中Jetpack的AI助手按钮 – 山月 WordPress/MCP Adapter安装与维护指南 – 山月 WordPress服务器权限与所有权配置详解 – 山月在Windows上為GnuCash啟用線上報價 (Finance::Quote) – 山月 Gitea Docker /var/empty 权限问题除错总结 – 山月 Bookwyrm由0.7.5升级至Production（e217a17）完整过程及疑难解答 – 山月用正则表达式修改ruby标签 – 山月为WordPress Syndication Links插件添加新的站点与图标的实现方法 – 山月进入不断重启的Docker容器的命令行之方法 – 山月自建Bookwyrm无法查询远端用户？——开启数据库扩展 – 山月 BookWyrm无法增添书本、作者、阅读进度……？——解决数据库自增序列问题 – 山月俾Docker容器中的应用访问宿主机上的数据库服务 – 山月 QNAP NAS使用者注意！千万莫对MariaDB做这件事…… – 山月解决Wikibase手动导入数据后无法新建实体之问题 – 山月辰年再訪神保町 – 山月 PHP-FPM站点池配置调优以解决WordPress过度占用系统资源之问题 – 山月如果Linux软件包常规升级失败——以python3-update-manager为例 – 山月解决站点526报错：SSL证书配置错误 – 山月風挾着陽光來 – 山月和A.N.R.GHG插件说bye-bye – 山月 WordPress页面链接末尾出现“?swcfpc=1”后缀，是怎么回事？ – 山月安装、维护Monica PRM的一些笔记 – 山月清理服务器空间的着手点 – 山月关于Joplin Server文件上传大小上限 – 山月如何优化PHP文件上传大小：完整指南 – 山月 WordPress站点部分地出现“严重错误”的一些可能的解法 – 山月批量更改WordPress媒体URL – 山月自托管WordPress编辑文章出现问题的排查法 – 山月

爲WordPress添上在線Markdown、HTML互轉工具 – 山月

2023-05-06 · via 山月

相信大家有時候有將以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。

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

山月

步驟

代碼

結語