Typora Extention

一、注入脚本改善 Mermaid 呈现

1. 注入方法

在 Typora 安装目录的 resources/app 目录下可以找到 window.html。通常是在下面这个位置：

C:\Program Files\Typora\resources\window.html

修改这个文件，在文件末（紧接 </body> 前）注入脚本：

<script type="module" defer="defer" async="async"
        src="file://{PATH_TO_INJECTION_SCRIPT}"></script>

如 (Windows)：

<script type="module" defer="defer" async="async"
        src="file:///D:/etc/typora-extension/typora/injection.js"></script>

或 (Linux)：

<script type="module" defer="defer" async="async"
        src="file:///etc/typora-extension/typora/injection.js"></script>

注：目前 injection.js 是采用 ESM 方式写的，所以需要 type = "module"！

2. injection.js

injections.js 中通过配置 mermaidScript 变量指定最新版本的 Mermaid 脚本。mermaidConfig 可参考 Mermaid 官方配置说明进行配置。

injections.js 会根据自己的位置找到 mermaid.min.js 并注入到 Typora 中，但 Git Repo 中并不包含 mermaid.min.js 脚本，需要手工下载。

3. GET mermaid.min.js

PowerShell 下可以通过运行 get-mermaid.ps1 来获取 Mermaid 的脚本，但要注意，get-mermaid.ps1 会调用 curl 命令来下载。如果下载失败，可以手工从 https://unpkg.com/mermaid/dist/mermaid.min.js 下载 Mermaid 脚本。

4. dark.js

该文件已废弃

Mermaid 不同图表样式标准规范不同，通过注入样式调整 Dark 样式非常困难。已放弃这种方式，目前官方主题 forest 是最和谐的主题，默认采用 forest（可以在代码中修改 mermaidConfig 换其他主题）

injections.js 中将 mermaidConfig.theme 配置为 "dark"之后，可以引入 dark.js 对该主题样式进行优化，使之更美观、更易于阅读。注意：该扩展不宜用于其他主题。

目前 injection.js 只支持 dark 样式。如果需要使用其他样式，需要修改 injection.js 中的相关代码。

二、`jamesfan` 主题

该主题是根据个人习惯配置的，分为普通版本 (jamesfan.css) 和 indent 版本 (jamesfan-indent.css)。其中 indent 版本采用了中文段落首行缩进两格的设置。

主题使用 LESS 编写，需要编译成 CSS 之后使用。

目前没有提供 LESS 的编译脚本，编译由 VSCode 的扩展 Easy LESS 完成。VSCode 的 Workspace Recommendations (工作区推荐) 中会推荐此插件。

通过插件编译好的样式表文件放在 themes 目录（通过其他手段编译的请放入此目录），运行 publish-theme.ps1 可以自动发布到 Typora 主题目录。若不成功，请手工拷贝。

主题更新之后如果不生效，需要关闭所有 Typora 进程，重新打开 Typora 来应用。

三、目录结构

Hosting on Gitee: https://gitee.com/jamesfancy/typora-extention.git

~
├── .vscode             # VSCode 配置目录
│   ├── extensions.json
│   └── settings.json
├── themes              # 样式表输出目录
│   ├── jamesfan-indent.css
│   └── jamesfan.css
├── typora              # 源文件
│   ├── themes
│   │   ├── jamesfan-indent.less
│   │   └── jamesfan.less
│   ├── dark.js
│   └── injection.js
├── .editorconfig
├── .gitignore
├── get-mermaid.ps1     # 下载 mermaid.js 的 PowerShell 脚本，需要环境有 curl
├┄┄ mermaid.min.js      # 下载下来的 mermaid.js 放这里
├── publish-theme.ps1   # 把 themes 目录下的 *.css 拷贝到 Typora 主题文件夹
└── README.md

边城 / typora-extension

Typora Extention

一、注入脚本改善 Mermaid 呈现

1. 注入方法

2. injection.js

3. GET mermaid.min.js

4. dark.js

该文件已废弃

二、`jamesfan` 主题

三、目录结构

简介

发行版 (1)

贡献者

近期动态

边城 / typora-extension .gitee-modal { width: 500px !important; }

Typora Extention

一、注入脚本改善 Mermaid 呈现

1. 注入方法

2. injection.js

3. GET mermaid.min.js

4. dark.js

该文件已废弃

二、jamesfan 主题

三、目录结构

简介

发行版 (1)

贡献者

近期动态

搜索帮助

边城 / typora-extension

二、`jamesfan` 主题