Typora文档

Typora文档

---

以下有一部分是自己瞎折腾的，一部分是复制整理的，可能有很多地方不对，不过能用就行😅。

页内跳转

Markdown支持标准跳转至Markdown标题，但使用HTML可以设置锚点使其跳转到任一位置。

[页内链接名](#标题名称)
[页内链接名](#锚点名称)

为HTML模块代码加入name属性或使用<a>标签直接设置锚点，例如：

<a name="Anchor"></a>

定制主题

1. 从官网下载主题后，打开主题样式文件，例如vue.css，或应用主题后使用开发者工具调整样式表再做修改。

   注：以下步骤皆为对Typora官网主题vue.css的定制修改。

2. 更改#write中的max-width属性为95%，调整视图正文宽度。修改padding属性设定顶部、侧边、底部边距。

   #write {
       max-width: 95%;
       margin: 0 auto;
       padding: 20px 30px 100px;
   }
   

3. 加入@font-face以加入字体Cascadia Code PL与Source Han Sans CN VF，字体文件放置与同目录的vue文件夹下，在伪类root中修改自定义属性：

   • 修改--font-sans-serif以设置正文字体优先为Source Han Sans CN VF。
   • 修改--font-monospace以设置代码字体优先为Cascadia Code PL。

   @font-face {
   	/* Font Name */
       font-family: CascadiaCodePL;
   	/* Font URL */
   	src: url('./vue/CascadiaCodePL.woff2') format('woff2');
       font-style: normal;
       font-weight: normal;
   }
   
   @font-face {
   	/* Font Name */
       font-family: SourceHanSansCNVF;
   	/* Font URL */
   	src: url('./vue/SourceHanSansCN-VF.ttf.woff2') format('TrueType');
       font-style: normal;
       font-weight: normal;
   }
   
   :root {
       --side-bar-bg-color: #fff;
       --control-text-color: #777;
       --font-sans-serif: SourceHanSansCNVF, CascadiaCodePL, sans-serif !important;
       --font-monospace: CascadiaCodePL, SourceHanSansCNVF, monospace !important;
   }
   

   字体名	下载地址
   Cascadia Code PL	cascadia-code
   Source Han Sans CN VF	source-han-sans

4. 在选择器h1中加入text-align: center;使一级标题居中。

   h1 {
       padding-bottom: .4rem;
       font-size: 2.2rem;
       line-height: 1.3;
   	text-align: center;
   }
   

5. 加入以下内容修改按键字体为Cascadia Code PL。

   kbd {
   	font-family: var(--font-monospace);
   }
   

6. 加入以下内容修改音频播放器居中，设置播放器宽度与正文一致，设置播放器高度为33px。

   audio {
   	width: 100%;
       height: 33px;
       display: block;
       margin: auto;
   }
   

7. 删除#write code, tt中原有的background-color，使行内代码背景色自适应。

   #write code, tt {
       padding: 2px 4px;
       border-radius: 2px;
       font-family: var(--font-monospace);
       font-size: 0.92rem;
       color: #e96900;
   }
   

8. 加入以下内容为以完成的任务列添加删除线。

   .task-list-done {
       /* styles for completed tasks */
       text-decoration: line-through;
   }
   .task-list-not-done {
       /* styles for incomplete tasks */
   }
   

9. 修改#write mark以更改文本高亮样式为以下内容。

   #write mark {
       background-color: rgb(0 0 0 / 0%);
       color: #42b983;
       font-weight: bold;
   }
   

10. 在文件开头插入如下内容，并在vue目录下创建对应文件，用于在导出HTML时，字体内嵌。将字体文件放置与HTML文件同目录下的Fonts文件夹内部即可。

    @import-when-export './vue/Font_CascadiaCodePL.css';
    @import-when-export './vue/Font_SourceHanSansCNVF.css';
    

    Font_CascadiaCodePL.css文件的内容为：

    @font-face {
    	/* Font Name */
        font-family: CascadiaCodePL;
    	/* Font URL */
    	src: url('http://localhost:6600/Font/CascadiaCodePL.woff2') format('woff2'),
    		 url('http://127.0.0.1:6600/Font/CascadiaCodePL.woff2') format('woff2'),
    		 url('http://localhost:6601/Font/CascadiaCodePL.woff2') format('woff2'),
    		 url('http://127.0.0.1:6601/Font/CascadiaCodePL.woff2') format('woff2'),
    		 url('http://localhost:6602/Font/CascadiaCodePL.woff2') format('woff2'),
    		 url('http://127.0.0.1:6602/Font/CascadiaCodePL.woff2') format('woff2'),
    		 url('http://localhost:6603/Font/CascadiaCodePL.woff2') format('woff2'),
    		 url('http://127.0.0.1:6603/Font/CascadiaCodePL.woff2') format('woff2'),
    		 url('http://localhost:6604/Font/CascadiaCodePL.woff2') format('woff2'),
    		 url('http://127.0.0.1:6604/Font/CascadiaCodePL.woff2') format('woff2');
        font-style: normal;
        font-weight: normal;
    }
    

    Font_SourceHanSansCNVF.css的内容为：

    @font-face {
    	/* Font Name */
        font-family: SourceHanSansCNVF;
    	/* Font URL */
    	src: url('http://localhost:6600/Font/SourceHanSansCN-VF.ttf.woff2') format('TrueType'),
    		 url('http://127.0.0.1:6600/Font/SourceHanSansCN-VF.ttf.woff2') format('TrueType'),
    		 url('http://localhost:6601/Font/SourceHanSansCN-VF.ttf.woff2') format('TrueType'),
    		 url('http://127.0.0.1:6601/Font/SourceHanSansCN-VF.ttf.woff2') format('TrueType'),
    		 url('http://localhost:6602/Font/SourceHanSansCN-VF.ttf.woff2') format('TrueType'),
    		 url('http://127.0.0.1:6602/Font/SourceHanSansCN-VF.ttf.woff2') format('TrueType'),
    		 url('http://localhost:6603/Font/SourceHanSansCN-VF.ttf.woff2') format('TrueType'),
    		 url('http://127.0.0.1:6603/Font/SourceHanSansCN-VF.ttf.woff2') format('TrueType'),
    		 url('http://localhost:6604/Font/SourceHanSansCN-VF.ttf.woff2') format('TrueType'),
    		 url('http://127.0.0.1:6604/Font/SourceHanSansCN-VF.ttf.woff2') format('TrueType');
        font-style: normal;
        font-weight: normal;
    }
    

    注：上述两个字体的描述放置与一个样式文件内包含时，第一个字体描述将失效，原因未知。嵌入外部字体至HTML内部依赖打包分享内的工具链。

新建文件

从右键菜单内新建markdown文件：新建一个txt文件，写入下列内容后修改后缀名为.reg双击运行。

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\.md]
@="Typora.md"
"Content Type"="text/markdown"
"PerceivedType"="text"

[HKEY_CLASSES_ROOT\.md\ShellNew]
"NullFile"=""

若新建的markdown文件有十几MB那么大，则打开注册表编辑器，打开路径\HKEY_CLASSES_ROOT\.md\ShellNew，只保留下列两项，其余删除。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FcxvCvpl-1640828492341)(Typora.assets/format,png.png)]

打包分享

Markdown文件的分享一直是个难题，该方法将带有typora主题的Markdown文档保存为单个html文件，且图片、视频、音频、字体都会内嵌的方式。需使用另外两个工具构成工具链来完成，使其整个文档可真正的单文件跨平台分享和归档。其原理是将导出的HTML文件映射为本地静态网页，再由浏览器插件保存该网页。

• Chrome系浏览器扩展 SingleFile；
  
• Utools及其扩展Live Server；
  

配置SingleFile扩展：

1. 勾选用户界面 > 打开一个提示对话框来编辑信息栏内容；
2. 勾选HTML内容 > 在已保存页面中将信息栏包括在内；
3. 取消勾选其它资源 > 移除视频资源和其它资源 > 移除音频资源；

此时准备工作就已经完成了，接下来开始导出单文件：

1. 将编写好的Markdown文档导出为Html文件，与Markdown文件放在同一目录下，避免找不到外部资源；

2. 将导出的html文件重命名为index.html；

3. 在该文件夹中唤出Utools的超级面板，点击启动实时文件服务后将自动打开index.html文件至浏览器；

4. 单击插件SingleFile即可保存为单个Html文件保存时会跳出弹窗，将需要写入的文档信息黏贴进去（在最终的成品文件右上角将显示插入的文档信息），例如：

   名称：Typora
   作者：cat
   版本：V1.0
   邮箱：xxxxxxxxxxxx@xxxx.com
   

文本增强

• 设置文本颜色的<span>，其值的类型可为rgb(x,x,x)、#xxxxxx、colorname；

  <span style='color:red'>test</span>
  

• 设置居中文本的<center>；

  <center>Test</center>
  

• 设置文本上标的<sup>与下标<sub>（多用于表格内部）；

  这是<sup>上标</sup>
  这是<sub>下标</sub>
  

• 输入按键符号的<kbd>；

  <kbd>Ctrl</kbd>
  

• 文本加粗标签<b>（多用于表格内部）；

  <b>加粗的文本</b>
  

• 强制换行标签<br>；

  这是文本<br>后面这部分文本渲染后会被强制换行
  

表格增强

• <table>表格本体

  <table></table>
  

• <th>表头单元格

  <table>
      <th>Table Head</th>
  </table>
  

• <td>标准单元格

  • bgcolor属性，其值的类型可为rgb(x,x,x)、#xxxxxx、colorname，规定单元格的背景颜色，同对<tr>、<table>、<th>生效；
  • colspan属性，其值类型为number，设置单元格可横跨的列数；
  • rowspan属性，其值类型为number，设置单元格可纵跨的行数；
  • height属性，其值类型为pixels、%，设置单元格高度，同对<tr>生效；
  • width属性，其值类型为pixels、%，设置单元格宽度，同对<tr>生效；
  • style="text-align:center"属性，设置单元格内容对齐方式，其值可以为left、center、right、justify；
  • style="border:0"属性，设置表格边框不可见，同对<tr>、<th>生效；

• <tr>表格分行

  <table>
      <tr>
      	<td>something</td>
          <td>something</td>
      </tr>
  </table>
  

• <caption>表格标题

  <table>
      <caption>title</caption>
      <tr>
      	<td>something</td>
          <td>something</td>
      </tr>
  </table>
  

媒体增强

Markdown中有时需要嵌入图片、音频、视频。在嵌入图片时还可勉强应付，但到视频与音频时，Markdown就显得不够用了，此时就需要Html多媒体元素来弥补它的缺陷。常用的元素有<img>、<audio>、<video>。

• controls自动显示控件属性，在<audio>、<video>标签中插入controls="controls"后音视频自动显示控件；
• style="display:block;margin:auto"插入该样式使得音频控件居中（通过修改主题也可以实现）；

<video src="test.mp4" controls="controls"></video>
<audio src="test.mp3" controls="controls" style="display:block;margin:auto"></audio>

插入公式

• 正文（inline）中的LaTeX公式用$...$定义；

  ${\sum }_{i=0}^N{\int }_a^{b}g(t,i)\text{d}t$

  $\sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t$
  

• 单独显示（display）的LaTeX公式用$$...$$定义，此时公式居中并放大显示；
  $$\sum _{i=0}N{\int }_{a}bg(t,i)\text{d}t$$

  $$
  \sum_{i=0}N\int_{a}{b}g(t,i)\text{d}t
  $$
  

符号描述	符号代码	例程展示
上标	^	$Tes{t}^2$
下标	_	$Tes{t}_2$
矢量	\vec{} \overrightarrow{} \overleftarrow{}	$\vec{a}$ $\overrightarrow{Test}$ $\overleftarrow{Test}$
字体	\mathtt{} \mathbb{} \mathsf{}	$\mathtt{T}\mathtt{e}\mathtt{s}\mathtt{t}$ $\mathbb{T}est$ $\mathsf{T}\mathsf{e}\mathsf{s}\mathsf{t}$
分组处理	{}	$10^{10}$
尖括号	\langle \rangle	$⟨$ $⟩$
求和符号	\sum	${\sum }_{i=1}^n{a}_i$
极限	\lim	${\lim }_{x\to 0}$
积分	\int	${\int }_0^{\infty }fxdx$
分式	\frac{}{}	$\frac{x}{y}$
根式	\sqrt[]{}	$\sqrt[x]{y}$
特殊函数	\sin x \ln x \max(A,B,C)	$\sin x$ $\ln x$ $\max (A,B,C)$
空格	\	$ab$
缩进	\quad	$ab$
起始符号	\begin{环境名} \end{环境名}	—
矩阵	使用环境matrix 行末尾标记\\\ 行内元素分割& 横省略号\cdots 竖省略号\vdots 斜省略号\ddots 小括号边框环境pmatrix 中括号边框环境bmatrix 大括号边框环境Bmatrix 单竖线边框环境vmatrix 双竖线边框环境Vmatrix	$\left[\begin{array}{cccc}{a}_{11}& a_{12}& \cdots & a_{1n}\\ a_{21}& a_{22}& \cdots & a_{2n}\\ ⋮& ⋮& \ddots & ⋮\\ a_{m1}& a_{m2}& \cdots & a_{mn}\end{array}\right]$
阵列	使用array环境 水平线\hline 垂直线| 对齐方式在{array}后以{}逐一声明	$\begin{array}{c
方程组	使用cases环境 行末尾标记\\\	$\{\begin{array}{l}{a}_{1}x+b_{1}y+c_{1}z=d_1\\ a_{2}x+b_{2}y+c_{2}z=d_2\\ a_{3}x+b_{3}y+c_{3}z=d_3\end{array}$
α	\alpha	$\alpha$
β	\beta	$\beta$
γ	\gamma	$\gamma$
δ	\delta	$\delta$
ε	\epsilon	$ϵ$
ζ	\zeta	$\zeta$
η	\eta	$\eta$
θ	\theta	$\theta$
ι	\iota	$\iota$
κ	\kappa	$\kappa$
λ	\lambda	$\lambda$
μ	\mu	$\mu$
ν	\nu	$\nu$
ξ	\xi	$\xi$
π	\pi	$\pi$
ρ	\rho	$\rho$
σ	\sigma	$\sigma$
τ	\tau	$\tau$
υ	\upsilon	$\upsilon$
φ	\phi	$\varphi$
χ	\chi	$\chi$
ψ	\psi	$\psi$
ω	\omega	$\omega$
∞	\infty	$\infty$
∪	\cup	$\cup$
∩	\cap	$\cap$
⊂	\subset	$\subset$
⊃	\supset	$\supset$
⊆	\subseteq	$\subseteq$
⊇	\supseteq	$\supseteq$
∈	\in	$\in$
∉	\notin	$\notin$
∅	\varnothing	$\varnothing$
∀	\forall	$\forall$
∃	\exists	$\exists$
¬	\lnot	$\neg$
▽	\nabla	$\nabla$
∂	\partial	$\partial$

希腊字母大写，将命令首字母大写即可，例如 $\beta$ 的大写 $\mathrm{B}$ ，写为\Beta。

快捷键表

快捷键	功能描述
Ctrl + 1 ~ 6	一至六阶标题
Ctrl + B	文本加粗
Ctrl + I	文本倾斜
Ctrl + U	文本添加下划线
Ctrl + Home	跳转至页首
Ctrl + End	跳转至页尾
Ctrl + F	内容搜索
Ctrl + T	创建表格
Ctrl + K	创建超链接
Shift + F12	打开开发者工具
Ctrl + Shift + 5	文本添加删除线
Ctrl + Shift + I	插入图片
Ctrl + Shift + M	插入公式块
Ctrl + Shift + Q	插入引用
Ctrl + Shift + K	插入代码块
Ctrl + Shift + `	插入行内代码
Ctrl + Shift + [	插入有序列表
Ctrl + Shift + ]	插入无序列表