# typora-extension

**Repository Path**: jamesfancy/typora-extension

## Basic Information

- **Project Name**: typora-extension
- **Description**: 为 Typora 注入脚本，引入最新版本的 Mermaid  脚本，自定义 Mermaid 样式等。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 1
- **Created**: 2021-01-09
- **Last Updated**: 2024-12-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Typora, customize

## README

# Typora Extention

## 一、注入脚本改善 Mermaid 呈现

### 1. 注入方法

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

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

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

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

如 (Windows)：

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

或 (Linux)：

```html
<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](https://marketplace.visualstudio.com/items?itemName=mrcrowl.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
```