所见即所得的markdown编辑器

发表于 更新于 分类于 ， 阅读次数： Waline： 本文字数： 11k 阅读时长 ≈ 38 分钟

Markdown软件对比

软件 Typora MarkText vscode插件Office Viewer(Markdown Editor) 浏览器端markdown编辑器vditor Obsidian
所见即所得 支持 支持 支持 支持 支持
左代码右预览 不支持 不支持 支持 支持 支持
第三方插件 支持(插件管理器的下载安装链接，但插件管理器bug多，社区不成熟） 计划在 v1.0.0 发布之后添加插件机制，以及自定义主题 需要与其他vscode插件兼容 不支持 是
官方下载链接 https://typora.io https://www.marktext.cc https://marketplace.visualstudio.com/items?itemName=cweijan.vscode-office 在线工具： https://vditor.vercel.app ；支持本地部署，需要安装node https://obsidian.md/
操作系统 Mac、windows、Linux Mac、windows、Linux Mac、windows、Linux 所有操作系统 Mac、windows、Linux、iOS、安卓
开源否 2021年底前在beta版本期间开源、免费于https://github.com/typora；之后闭源、付费 开源 https://github.com/marktext/marktext 开源 https://github.com/cweijan/vscode-office 开源 https://github.com/Vanessa219/vditor 闭源
收费否 过往版本(<=0.11.18版本)免费，之后版本付费，或去MacTorrents下载破解版 免费 免费 下同Office Viewer(Markdown Editor)，因为其内核是vditor 个人免费，商用组织收费
表格 支持 支持 支持 支持
图 支持 支持 支持 支持
公式 支持 支持 支持 支持
内嵌html 支持 支持 支持 支持
中文界面 支持 原版不支持。请往汉化版官网，但这个版本无法在打开文件夹时向当中的markdown文件内插图。 不支持 支持，但界面汉化不充分
流畅度 图/公式/字数多时卡顿 图/公式/字数多时流畅 图/公式/字数多时流畅
用 \tag{} 手动编号 支持 支持 支持 支持
公式块中align或equation环境自动编号 支持 支持 支持 不支持（除非安装下述插件，但不能设置只给equation和align环境自动编号）
公式块全部自动编号 支持，可在Typora设置里勾选 不支持 不支持 支持（但需要安装插件MathLinks和LaTeX-like Theorem & Equation Referencer（Mathlinks是其依赖项），可以设置仅被引用的公式会自动编号、或任何公式都自动编号）
公式中使用\label \eqref \ref 支持 不支持，整个公式块无法渲染 并报错 不支持，整个公式块能渲染，但这几条命令处渲染错误并报错 不支持。偶尔能渲染正确，但一编辑公式，公式渲染和引用渲染就报错，参见。安装MathLinks和LaTeX-like Theorem & Equation Referencer后，敲\eqref后就会弹出下拉菜单，可以选择需要引用的公式，但是使用的是markdown方言：在公式下方添加^公式hash，用[[#^公式hash]]引用公式。
公式是否支持诸如\dd这类的命令 支持 不支持。且无法像Obsidian那样自定义公式命令 不支持。且无法像Obsidian那样自定义公式命令。但可以安装插件*Markdown+Math，在vscode的配置文件中，加入诸如下面的配置："mdmath.macros": { "\\dd": "\\mathrm{d}", "\\tr": "\\mathrm{tr}"}，这样就能支持。 不支持。Obsidian使用的公式引擎MathJax默认不支持这些命令。需要安装插件Extended MathJax，并在仓库根目录自行创建 preamble.sty文件，然后用文本编辑器向其中写入需要加载的latex包，和自定义命令（诸如\require{包的名字} \newcommand{\dd}{\operatorname{d}}），然后重启Obsidian。
在文件夹内显示*.textbundle 不支持 支持 支持 支持
直接打开*.textbundle 支持（打开方式见下文说明） 支持（打开方式同Typora） 支持（无需额外设置） 支持，但必须在仓库内的才能打开。详见TextBundle support
通过拖拽/⌘+V向*.textbundle/assets插入图片 支持（需要配置插图自动复制到./assets） 支持不充分：
1. 原版：当设置插图路径为assets时：若打开一markdown文件，则把插图复制到此文件所在目录下的assets子文件夹内；但若打开一文件夹，则复制插图到文件夹根目录下的assets子文件夹内。详见 官方说明。
2.汉化版：不管如何设置插图路径，在打开文件夹时，都无法向当中的markdown文件内插图		 支持（需要配置插图自动复制到./assets，即向vscode的用户配置文件添加："vscode-office.pasterImgPath": "${workspaceDir}/assets/${now}.png", "vscode-office.workspacePathAsImageBasePath": true,） 支持，但需要对每一个仓库都修改Preference如下image-20240718144948659
文件与链接：
* 内部链接类型：基于当前笔记的相对路径
* 使用wiki链接：关闭
* 附件默认存放路径：当前文件所在文件夹下指定的子文件夹
* 子文件夹名称：assets
在文件夹内搜索文本 支持 支持 支持
打开.markdown .txt文件 支持 支持 支持 支持（默认只能打开md文件；需要安装插件Custom File Extensions, 并设置{ "markdown": [ "", "md", "markdown", "txt", 等 ] } 表示这些后缀的文件都用markdown格式打开）
打开任何位置的文件 支持 支持 支持 不支持（除非安装脚本）
sequence制图 支持 汉化版支持 不支持 不支持
flow制图 支持 汉化版不支持 不支持 不支持
mermaid制图 支持（但我的电脑上有bug，Typora 1.8.4，MacOS 10.15.7，会显示Painting Diagram ...） 汉化版支持 支持 支持

说明：

  • *.textbundle的打开方式方式：

    • Typora和MarkText打开*.textbundle的方式：

      • 在Typora和MarkText内，点文件-打开(不论是以文件还是文件夹)，无法打开*.textbundle

      • 在Finder-单击右键-打开方式-其它-选择用Typora或MarkText打开，可以打开。

      • 在Finder-单击右键-显示简介-打开方式-设置用Typora或MarkText打开，然后双击*.textbundle，可以打开。

      • 在终端，open -a Typora或Marktext xxxx.textbundle，可以打开。

    • 在vscode（使用插件Office Viewer(Markdown Editor)）中，上述方法都能打开*.textbundle。

  • vscode插件Office Viewer(Markdown Editor)插件的内核和前身：

    • vscode插件Markdown Editor https://marketplace.visualstudio.com/items?itemName=zaaack.markdown-editor 在2021年后就不再更新发布了。不推荐使用。

    • vscode插件Office Viewer(Markdown Editor)集成了Markdown Editor 的功能，并且还支持office文档（ppt、word、excel）的预览。更新发布至今（2023年底）。推荐使用。

    • Markdown Editor和Office Viewer(Markdown Editor)的内核都是 浏览器端markdown编辑器vditor。

关于Obsidian的说明

  • Obsidian的Preference（⌘+,）都是对仓库而言的，每个仓库的Preference相互独立，每开一个新仓库都要从头设置.

  • MathJax支持的包：详见。现在（2024年7月）已经默认支持mhchem了，因而Obsidian的公式也支持使用mhchem包了。

  • 在Obsidian中，对单个md文件加载latex包/自定义公式命令的方法：在md文件开头，写形如下面的内容，就能让后面的公式使用这些包/命令。详见

    $\require{需要加载的包}$
$\newcommand{\dd}{\operatorname{d}}$

我的配置思路

  • 日常笔记需要手机上写，同步到电脑的，可以开一个仓库，用onedrive+remotely save实现同步，不安装支持公式和textbundle的脚本，笔记都用md文件，在本目录/assets/下保存图像

  • 只在电脑上写的技术笔记，再开另一个仓库，安装支持公式和textbundle的脚本。

obsidian如何同步笔记

  • 每次 iPhone 打开 Obsidian 都需要同步 iCloud，当 vault 较大时，时间会很久。这个说法来自。

我亲自试过在iphone上，把obsidian的仓库设置在iCloud中，每次开启手机上的Obsidian都需要等十多秒，让iCloud把仓库配置文件（在./obsidian里）重新下载下来。Obsidian官方说，这是因为iCloud会自动从本地删除./obsidian（我猜可能是因为它是隐藏文件才被删掉），而iCloud不提供阻止删除本地文件的设置，所以建议用其他云盘搞同步。现在我用了onedrive同步仓库，iphone上能够秒开Obsidian。

我采用的解法：Remotely Save+OneDrive

Remotely Save+oneDrive

参考：配置方法

Remotely Save插件可以访问OneDrive等云盘的api，无需安装OneDrive.app并将obsidian库直接放同步盘内，就实现库和OneDrive的同步。

方法一，电脑 OneDrive同步盘 + 手机 Remotely Save**（推荐）**，不同步配置：

  • mac：安装OneDrive.app，obsidian库直接放在OneDrive在Mac的同步盘内，不安装Remotely Save（或安装了但不启用）。

  • iphone：不安装OneDrive.app，因为iphone上的obsidian库只能放在iCloud/Obsidian和我的iphone/Obsidian，不能放在OneDrive在iphone上的同步盘内，安装Remotely Save，并关闭 同步配置文件夹（否则会把Remotely Save插件、Remotely Save需要同步到OneDrive的配置 给同步到mac上的OneDrive同步盘内，这样mac上使用obsidian时，就会同时通过Remotely Save和OneDrive.app两个软件同时去同步，造成额外的计算开销和能耗，且可能造成冲突）。

法二，所有设备都安装Remotely Save，可以开同步配置，也可以关同步配置：

  • 如果所有设备的库没有放在OneDrive同步盘内，则需要所有设备都安装Remotely Save，可以设置开启/关闭 同步配置文件夹。
  • 并不推荐直接同步配置文件，因为可能带来一些Obsidian设置的冲突。开启同步配置文件前，请做好备份。（来源）

自动下载图片

然后现在我还有一个技术问题解决不了：没法在iphone从Safari自动下载图像到obsidian的笔记：

  • 如果是从浏览器把选中的图文，复制黏贴到obsidian里，图片的链接是![xxx](https://图像的url)，而不会自动下载到仓库里的assets/文件夹；需要等同步到电脑上，再用Local Image Plus插件来下载，这个插件不支持iOS。如果不及时下载图像，可能帖子被删，图像丢失。
  • 如果是把选中图文从浏览器/ios的备忘录，拖拽到obsidian里，就会转换成 ![xxx](blob:capacitor://localhost/图像名称.扩展名)，能正常渲染图像，但重启obsidian后，就无法渲染图像里，这个本地连接找不到了。

自动下载图片的方法

  • 法一：Obsidian安装Local Image Plus插件，但这个插件支持mac，不支持iOS，不晓得是否支持安卓
  • 法二：浏览器安装插件：https://github.com/deathau/markdownload，Firefox, Google Chrome, Microsoft Edge and Safari.都可用，但这个插件不支持iOS上的Safari，不晓得是否支持安卓上的Chrome浏览器

剪藏

法一：

Obsidian 一键剪藏[WEB/iOS]

【Obsidian全文剪藏—利用ios快捷指令实现全文剪藏】 https://www.bilibili.com/video/BV1vT4y1U7Rv/

法二：

利用ios指令提升移动端obsidian使用体验

  • 试了这个方法，在safari中对知乎帖子用Ob全文剪藏的快捷指令，会报错，在下载知乎网页时无法运行。不论知乎网页是允许转载还是禁止转载，都会这样。
  • 试了这个方法，微信帖子能全文剪藏，但笔记里是![xxx](https://图像的url)形式，不会自动下载图像到仓库。

法三：简悦：有obsidian配置懒人包

其他剪藏方案汇总

加密

obsidian加密工具比较

插件名称 本地是否保存密码 加密对象 不加密的对象 加密算法 介绍 支持的OS 缺点
Remotely Save 是，密码以明文保存在本地配置中 在云上保存的整个仓库 本地的整个仓库 RClone Cryppt/OpenSSL enc 本地仓库内的文件以明文保存，云端的文件以密文保存，本地和云之间用密文通信。可以实现多台本地设备上仓库的同步，且网络流量、云文件都是加密的。 mac, iOS 仓库内文件多时同步很慢。因为每次同步时，需要将本地和云上的所有文件的元数据（如时间戳）做对比，然后开始同步。详见。
改进思路：若一个文件夹在本地和云上的元数一致，则说明整个文件夹及其内文件都不需要同步。
Encryption 仓库内的选中的文件夹 仓库内其他文件夹，包括 https://wenku.csdn.net/answer/28d21b0a2bd54327a0148f80f3272d52 mac, iOS
Cryptsidian 整个仓库内所有文件，包括md和图像 文件名、文件夹名 mac, iOS 1. 解码错误不报错，会直接充写文件，造成不可逆损坏 2. 加密后不能打开文件并保存，不然无法解密 3. 每次解密后重新加密需要重新输入密码 4. 解密需要两次输入密码核对一致
Meld Encrypt 超时前会记住密码 单个md文件、md内选中文本 仓库内其他文件，包括所有图像 AES256 https://github.com/meld-cp/obsidian-encrypt mac, iOS 1. 无法对整个文件夹加密，详见 2. 无法对笔记中的图像加密，3. 解密的md文件，无法进入编辑模式，只能进入预览模式（无法显示图像）、源码模式，只有将md文件解除加密才能解决这个问题，但之后要重新加密，4. 无法设置整个仓库用同一个密码，每次加密md笔记都要第二次输入密码（好在第一次输入的密码默认用上次用过的密码）

文件系统加密软件比较

插件名称 本地是否保存密码 加密对象 不加密 加密算法 介绍 缺点
Cryptomator 整个仓库，选中的文件夹。加密后文件与解密文件一一对应，但文件名及文件夹结构也是加密的。 在iOS上无法把仓库选在Cryptomator加密的文件夹内 详见
veracrypt 开源免费加密工具，安全性高，但同步不很方面。加密后文件为一个单文件，解密为一个虚拟盘符。

比较Cryptsidian, Cryptsidian,Cryptomator,veracrypt

本地使用推荐veracrypt、cryptomator，结合网盘使用推荐cryptomator。

Typora卡顿

解决Typora字数过多造成卡顿现象 https://blog.csdn.net/qq_46921028/article/details/131896316

win10上Typora卡顿的问题及其解决方案 https://blog.csdn.net/Mao_Jonah/article/details/120533879

解决KaTex不支持\label \eqref \ref

  • KaTex不打算官方支持\label \eqref \ref

  • 可以自行修改KaTex配置

本地html

参照 #2033 (comment)的思路 和 样例配置，有如下demo代码。新建文件demo.html，将下面代码复制进去，然后用浏览器打开，

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

        <title>KaTeX-DOM Eq. Ref Test</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
        <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
          onload="renderMathInElement(document.body);"></script>
        <script src="main.js"></script>

        <script>
            document.addEventListener("DOMContentLoaded", function() {
                renderMathInElement(document.body, {
                    // auto-render specific keys
                    delimiters: [
                        {left: '$$', right: '$$', display: true},
                        {left: '$', right: '$', display: false},
                        {left: '\\(', right: '\\)', display: false},
                        {left: '\\[', right: '\\]', display: true}
                    ],
                    // render equation with bug
                    throwOnError : false,
                    // support eqref
                    trust: (context) => ['\\htmlId', '\\href'].includes(context.command),
                    macros: {
                        "\\eqref": "\\href{###1}{(\\text{#1})}",
                        "\\ref": "\\href{###1}{\\text{#1}}",
                        "\\label": "\\htmlId{#1}{}"
                    }
                });
            });
        </script>
    </head>

    <body>
        In Eq. $\eqref{eq:1}$ or $\ref{eq:1}$.<br/>

        $$
        \begin{aligned}
        \sin 2\theta = 2\sin \theta \cos \theta \\ = \cfrac{2 \tan \theta}{1+\tan^2 \theta}
        \end{aligned}
        \label{eq:1} \tag{1}
        $$
    </body>
</html>

渲染结果如下：

image-20240126164406069

但本法有个缺点： $\ref{eq:1}$ $\eqref{eq:1}$ 渲染为’eq:1’而非 ‘1’（即公式编号）。不知是否有方法修补此bug？或是否有其他支持\label \ref \eqref的方法可避免此bug?

vscode插件Markdown+Math

思路来源

安装vscode插件: Markdown+Math

Reference: KaTeX/KaTeX#2003 (comment)

在vscode的配置文件中加入如下配置，则vscode的自带markdown分栏预览就能支持\label \eqref \ref，效果见下图

"mdmath.katexoptions": {
    "trust": "(context) => ['\\htmlId', '\\href'].includes(context.command)"
},
"mdmath.macros": {
    "\\eqref": "\\href{###1}{(\\text{#1})}",
    "\\ref": "\\href{###1}{\\text{#1}}",
    "\\label": "\\htmlId{#1}{}"
},

image-20240126165126318

相关讨论：

我的github评论：