Typora+Markdown

利用Typora管理Markdown内容笔记，以及一些额外的配置、Markdown写法

Typora

安装与配置

此部分无内容，因为下载安装不重要，AI会告诉你的O,o

关联PicGo与OSS

typora关联PicGo配置流程

进入设置，选择图像设置

Mermaid 绘图 (代码即图表)

图表样式详见：Mermaid代码转图表

1. 简介 Mermaid 不是 Markdown 的原生语法，而是一种基于代码的绘图工具。Typora 已经内置了对它的支持，让我们能用写代码的方式画出流程图、时序图、甘特图甚至思维导图，无需截图，修改极其方便

2. 基础语法 需要使用代码块语法，并将语言标记为 mermaid：

mermaid 图表类型内容...

或者先打出代码块，最后补上mermaid类型

3. 常用图表示例

(1) 流程图 (Flowchart) 用 --> 表示箭头，[] 表示直角矩形，{} 表示菱形判断

mermaid graph TD Start[开始] --> IsHappy{开心吗?} IsHappy -- 是 --> Coding[写代码] IsHappy -- 否 --> Photo[去拍照]

(2) 思维导图 (Mindmap) 注意：需要 Typora 较新版本支持

mermaid mindmap root((我的博客)) 技术 Vue3 VitePress 生活摄影英语

(3) 饼状图 (Pie Chart)

mermaid pie title 技能分布 "Java" : 40 "Python" : 30 "JavaScript" : 30

4. 提示

Typora 中输入后，移开光标即可自动渲染预览
如果图表不显示，请检查代码块的语言标记是否写对（必须是全小写 mermaid）

文字劫持变色

260210：用蓝字替换下标，会出现空格无法解析的问题，所以用蓝字替换删除线吧。。

将Markdown中的高亮（和==x==）与下标（x和~x~）分别调整为红色字体和蓝色字体。这样就能让单调的文档，显示出一丁点儿的颜色，结合英语翻译，更好写文章

把 Markdown 的语义标签（高亮、下标）转义为视觉标签（红色、蓝色），需要做的就是重写 CSS 样式。不仅要搞样式的覆盖，还要做好红蓝字的快捷键管理

本地端配置(Typora)：

Typora 本地也需要做两件事：开启语法支持、修改 CSS。

Step 1: 开启语法支持 打开 Typora -> 文件 (File) -> 偏好设置 (Preferences) -> Markdown：

勾选 高亮 (Highlight)
勾选 下标 (Subscript)
重启 Typora 生效。

Step 2: 修改 CSS (劫持显示)

打开 偏好设置 -> 外观 (Appearance) -> 打开主题文件夹 (Open Theme Folder)。
找到你当前使用的主题（比如你用的是 github 主题，就找 github.css；或者创建一个 base.user.css 全局生效）。
强烈建议创建一个文件叫 base.user.css（如果已存在就在里面追加），这样无论你换什么主题，这个红蓝字体设置都生效。
写入和上面网页端一模一样的 CSS：

css

/* Typora 本地劫持 */
mark {
  color: #d32f2f !important;
  background: none !important;
  font-weight: bold;
}

/* sub {
  color: #1976d2 !important;
  vertical-align: baseline !important;
  font-size: 100% !important;
  position: static !important;
} */

/* 利用删除线实现蓝色字体 */
del {
    color: #1E90FF; /* 这是一个好看的蓝色，你可以换成 blue */
    text-decoration: none; /* 关键：去掉中间那条删除线 */
    background: none; /* 确保没有背景色 */
}

Typora快捷键设置

Typora 允许自定义快捷键

打开 偏好设置 -> 通用 (General)
点击最下方的 打开高级设置 (Open Advanced Settings)
打开 conf.user.json 文件（如果没有就新建一个）
找到或添加 "keyBinding" 字段

你的需求：

红字 (==xx==)：你想要 Ctrl+R。(注意：Ctrl+R 默认是“替换”，修改后原本的替换功能可能要换个键或者通过菜单点)
蓝字 (~xx~)：建议用 Ctrl+E (Explorer的首字母，就在R旁边，操作顺手) 或者 Ctrl+T (Translation)。这里我配成 Ctrl+E

conf.user.json 配置内容：

用蓝字替换下标，会出现空格无法解析的问题，所以用蓝紫替换删除线吧。。。

json

{
  "keyBinding": {
    // 红色 (高亮) -> Ctrl + R
    "Highlight": "Ctrl+R",
    
    //删： 蓝色 (下标) -> Ctrl + E
    // "Subscript": "Ctrl+E"
    // 蓝色 (删除线) -> Ctrl + E
    "Strike": "Ctrl+E"
  }
}

保存后，必须彻底重启 Typora 才能生效

Markdown教程

关键内容介绍

Markdown是什么？你不会问AI啊。

Markdown与HTML的关系：并不是竞争、替代品，而是HTML的简化版本。Markdown的最终目标就是转换为HTML

Markdown怎么用？你可以看看下面的内容 ❥(^_-)

不过要注意，实现某一种“格式/样式”可能有多种语法或快捷键，本教程只针对一个最便利的实现方式，本教程只针对使用typora编辑器的Markdown编写
还有，推荐：菜鸟教程-Markdown 写的挺好😋

标题

Markdown的标题其实很好理解，上面说到他可以是为HTML服务的，所以标题的逻辑也和HTML差不多：

下面的是教学演示：
语法：# + 空格 + 标题内容
# 这是一个 1级 标题
## 这是一个 2级 标题
---以此类推
###### 这是一个 6级 标题（最多用到4级就行了）

文本

字体

粗体：**文本内容** or Ctrl B：文本内容

斜体：*文本内容* or Ctrl I：文本内容

线体

分割线：---然后回车即可（和Frontmatter挺像的，不过Frontmatter是在最上面）：

删除线：~~文本内容~~：~~文本内容~~

下划线：选中指定文本，Ctrl U即可：文本内容

脚注

脚注是什么？说白了就是给一个东西做一个小标记，然后在下面用文本解释

语法有点复杂，不学了 🤪

文本高亮

给选中文本进行高亮展示：高亮文本内容

这是高亮文本内容

段落和换行

分清Enter和Shift+Enter即可

列表

无序列表

顾名思义，一个没有序号的列表展示

下面是列表展示演示：

哈哈
叮咚鸡
大狗叫

语法：* 列表内容，然后回车即可

有序列表

顾名思义，一个有序号的列表展示

下面是列表展示演示：

哈哈
叮咚鸡
大狗叫

语法：数字（1,2,3...）列表内容，然后回车即可

引用块

这个东西吧，拿来做一些关键性、文本内容较短的提示最好，不要当正常格式一直用

语法：> 引用文本内容：

这是引用的文本内容

代码

先写到这里

Mermaid 图（目前最主流、最推荐）

语法：在 Markdown 中用 ```mermaid 代码块。

支持平台：GitHub、GitLab、Gitee 的 Markdown 已原生支持。VS Code 有许多插件支持预览。Notion 等平台也支持。

示例：

markdown

```mermaid
mindmap
  root((我的项目))
    核心功能
      记账
        💰 支出/收入
        🔁 转账
      分析
        📊 统计图表
        📅 日历热图
      安全
        💾 导出/导入
        🔐 PIN锁 (规划中)
    技术栈
      HTML/CSS/JS
      IndexedDB
      纯前端
```

效果：会被渲染成一个可折叠/展开的树形思维导图。

其他图表语法（如 Markmap，PlantUML）

需要特定的渲染器或插件支持，通用性略低于 Mermaid。

Frontmatter区

Frontmatter 必须是文件的绝对开头，任何内容（包括一级标题、空行、注释）都不能出现在它前面

使用方法：在md文件的开头↑，用---和---包裹一个区域用来进行配置（直接输入“---”然后回车即可）

对于个人文章以及对应的修改“笔记修改时间”的习惯，用Frontmatter区管理就很好
yaml
```
title: Typora+Markdown
date: 2025-12-18
update_log: [251218, 251222]
```
1
2
3

如何插入本地文件链接

例如任务书，在"D:\GraduationProject\1-文档\1-任务书\陈攀任务书.docx"里面，怎么插入一个链接在此Markdown笔记中？[点击查看任务书](D:\GraduationProject\1-文档\1-任务书\陈攀任务书.docx)

关键点：

复制文件地址，直接找到该文件，右键复制地址，通常是“xx/yy”，记得删掉这个引号“”
快捷键Ctrl+K，大括号里面填链接名，小括号里面填地址

怎么在一个Markdown文件内引用另一个标题的内容

例如本md文件，我在这里想插入一个引用，点一下跳转到最上面第一个标题进行观看点击跳转上一个标题

关键点：

找到要引用的标题，复制它的标题层级（几个#）+标题名字
快捷键Ctrl+K，大括号里面填链接名，小括号里面填n个#+地址

AutoPPT

Cleaning

Cooking

Typora+Markdown

Typora

安装与配置

关联PicGo与OSS

Mermaid 绘图 (代码即图表)

文字劫持变色

本地端配置(Typora)：

Typora快捷键设置

Markdown教程

关键内容介绍

标题

文本

字体

线体

脚注

文本高亮

段落和换行

列表

无序列表

有序列表

引用块

代码

Frontmatter区

如何插入本地文件链接

怎么在一个Markdown文件内引用另一个标题的内容

PandaC

Typora+Markdown ​

Typora ​

安装与配置 ​

关联PicGo与OSS ​

Mermaid 绘图 (代码即图表) ​

文字劫持变色 ​

本地端配置(Typora)： ​

Typora快捷键设置 ​

Markdown教程 ​

关键内容介绍 ​

标题 ​

文本 ​

字体 ​

线体 ​

脚注 ​

文本高亮 ​

段落和换行 ​

列表 ​

无序列表 ​

有序列表 ​

引用块 ​

代码 ​

Frontmatter区 ​

如何插入本地文件链接 ​

怎么在一个Markdown文件内引用另一个标题的内容 ​

PandaC

Typora+Markdown

Typora

安装与配置

关联PicGo与OSS

Mermaid 绘图 (代码即图表)

文字劫持变色

本地端配置(Typora)：

Typora快捷键设置

Markdown教程

关键内容介绍

标题

文本

字体

线体

脚注

文本高亮

段落和换行

列表

无序列表

有序列表

引用块

代码

Frontmatter区

如何插入本地文件链接

怎么在一个Markdown文件内引用另一个标题的内容