Typora都开始收费了,不会有人还没用过吧

写于2021/12的前言

万万没想到，用了快一年多的免费软件，居然开始收~费~了，对于老用户来说，要么就付费，至于价格算贵还是不贵，这个就是仁者见仁智者见智了，或者和我一样，选择！！不要更新。不过，值得开心的点是，这从某种意义上体现了typora的价值，期望typora后续发展。

前言

鄙人并非走计算机方向，对于Typora的使用理解基于自己使用体验与经验。该文的完成，参考了知乎、CSDN、简书上许许多多有关的优秀文章，整合而成。适合新手观看，我也会在后续的学习过程中不断修改和完善文章，也欢迎各路大佬对文章错漏之处不吝赐教。

为何选择Typora？

Markdown简介

Typora本质上是一款 Markdown编辑器，何为Markdown，以下来自百度词条：
Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
由于Markdown的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。

Markdown和LaTeX关系

没啥关系。这个可以在网上自行查找。
Markdown发行于2004年，而LaTeX的诞生比Markdown早了10年不止。当我们搜索LaTeX时，必然会引出另一个词——TeX，具体的我不会解释，因为我本身也不太清楚。TeX是个排版系统，是那种用于印刷读物使用的，里面的命令很多很精细，而LaTeX是在TeX基础上发展起来的，能控制诸如页眉页脚、断行分页等。Markdown相对于LaTeX要简便得多，它所能完成的，LaTeX能完成。LaTeX能完成的，Markdown有些也许就很难办到了。他们两者的语法肯定是有差别的，但这并不是我建议使用Markdown的原因。如果是作为学生的话，我的建议是先学习markdown，或者直接去看Typora教程，在使用过程中了解和学习markdown和html的知识，再进一步可以学习 css 、css3的语法（本人数学系，学习html比markdown晚 >_<|||）。

Typora的优点

（官方：）
Distractions Free
Seamless Live Preview
What You See Is What You Mean
可见即所得，这个是typora用起来很舒服的一点

（个人感受：）
占用空间小，入门简单，界面简洁大方，输出为PDF，HTML等形式的文件很方便

Typora的缺点

有一个很大的缺点就是没法插入页眉页脚，页码，做不了好看的目录，也就是排版问题，前面也说到过，markdown排版能力太差，远远不如laTeX。不能简单知道分页的位置，没有预览的功能。当文本的内容比较多时，能明显感觉到typora的处理速度变慢。撰写比较长的文章时，建议拆分成多个typora文件编写。

Typora的安装与设置

安装

Typora官网： https://typora.io/

windos版本下载地址：https://typora.io/#windows

设置

在正式使用typora之前，需要修改以下偏好设置（可以使用快捷键cirl+,或者文件→偏好设置），转到Markdown，把Markdown扩展语法中内联公式一栏打上勾。否则会影响正常使用。

Typora基本语法和符号

常用语法

（1）标题：cirl+number(number=1,2,3,4,5，6)生成n级标题，或者## 标题（井号个数为标题级数，记得井号与标题之间得空一个空格！！）效果如下：

（2）加粗，斜体，下划线，高亮，删除线：
加粗：cirl+b，斜体：cirl+i，下划线：cirl+u，高亮：==高亮内容==，删除线：~~删除内容~~,
（3）引用：> 引用内容（>后面得有一个space）
（4）无序列表：- 内容

- AAA
 - BBB
 - CCC
- DDD

（5）有序列表：number. 内容
有序列表和无序列表的关键都在于 1./2./- 之后都得留一个空格

（5）分割线：***（单独一行）
（6）表格：cirl+t
（7）生成目录：找到合适位置（单独一行），打下[TOC]，然后按下回车键，typora 会根据文章里面已经设置的各级标题生成相应目录。

常用符号

以下图片转载于：https://blog.csdn.net/wait_for_eva/article/details/84307306
在我学习typora之初，这位博主的这篇文章对我入门帮助挺大的。
虽然图片上写的是LaTeX语法，但是在Markdown语法中同样适用。

我在使用过程中，也发现了一些改进和不足，接下来是一些补充说明：
（1）左箭头与右箭头可以不写为 $leftarrow$ 和 $rightarrow$，而是用更简单的 $gets$ 和 $to$ 代替
（2）关于不同风格字体的说明：
mathbb：blackboard bold，黑板粗体
mathcal：calligraphy（美术字）
mathrm：math roman
mathbf： math boldface
mathfrak: fraktur(德文尖角体)德文尖角体是哥特体（Blackletter）的一种，或者说是其子书写系统。
（3）利用 $overset$ 或 $underset$ 灵活拼凑符号
（4）实际上，对于经常接触数学来说，\RR简直就是福音

\ text{}:用于在内联公式中插入文字
(4) 常用的控制格式的快捷键：
cirl + [:减少缩进 ，cirl+]:增加缩进，cirl+shift+[：有序列表，cirl+shift+]：无序列表，
cirl+shift+M：代码块（等同于**$$+换行**），cirl+shift+K：代码块
（5）公式序号：\ tag{}

（6）简单表情包 ——格式 :emoji（不能在公式块或公式里面使用）

关于常见的表情包，可以参考以下博主的文章：https://www.cnblogs.com/wangjs-jacky/p/12011208.html

矩阵与对齐

矩阵

由于csdn编辑器使用的是相对Mathjax更为轻量级的KaTex(很多语法不支持)，所以很多东西我只能放截图，唉~~

用这些矩阵的好处有一个，就是避免使用通用的 \left，\right命令，这个命令很容易写错，我超讨厌这个命令的。有读者就发现了，你这上面都是一边的，那我要单边花括号咋办，在这情况下，我们可以用cases,该环境默认为左对齐

对齐

我们来介绍两个常用的环境array和aligned，在对齐公式里的等式时，aligned是很方便的，例如：

\begin{aligned}
1 + 2\sum_{k=1}^\infty r^k\cos k\omega 
&= 1+2 Re(\sum_{k=1}^\infty r^k e^{ik\omega})  \\
&=  1+2 Re(\frac{re^{i\omega}}{1-re^{i\omega}}) \\
&= \frac{1-r^2}{1+r^2-2r\cos\omega}
\end{aligned}

$$\begin{array}{rl}1+2\sum _{k=1}^{\infty }{r}^k\cos k\omega & =1+2Re(\sum _{k=1}^{\infty }{r}^k{e}^{ik\omega })\\ & =1+2Re(\frac{r{e}^{i\omega }}{1-r{e}^{i\omega }})\\ & =\frac{1-r^2}{1+r^2-2r\cos \omega }\end{array}$$
而array可以控制每一列的控制方式，\begin{array}{para}...\end{array}，这里的para正是用来控制的参数，左对齐居中右对齐分别对应l c r，默认情况下是全 r，也就是全部列右对齐，这时候直接写\begin{array}...\end{array}。
举个例子：

\begin{array}{rlc}
xs & xcdfvdfvs & cvddcscd\\
scdvdvfs & cd & gs
\end{array}

$$\begin{array}{rlc}xs& xcdfvdfvs& cvddcscd\\ scdvdvfs& cd& gs\end{array}$$

mermaid

何为mermaid?这是官网(https://mermaid-js.github.io/mermaid/#/)的介绍：
Mermaid lets you create diagrams and visualizations using text and code.

It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

If you are familiar with Markdown you should have no problem learning Mermaid’s Syntax.
用于画各种常见的图，具体有

• 饼状图：使用pie关键字
• 流程图：使用graph关键字
• 序列图：使用sequenceDiagram关键字
• 甘特图：使用gantt关键字
• 类图：使用classDiagram关键字
• 状态图：使用stateDiagram关键字
• 用户旅程图：使用journey关键字
  这是从官网上截的一张图：
  
  对于具体语法，不进行讨论，真正要用的时候查一查就有

不常用语法(一辈子都用不上那种)

Typora使用的是Mathjax引擎，抱着挖掘乐子的态度，便去了Mathjax的官网，把它所支持的语法，宏看了一遍，最终挑了几个。不得不说，是真的多，只不过平时最常用的就只有那么几个base，asm，当然这些不用知道。下面展示几个包：

• bbox:

  箱子这个概念很多地方都有，前端也有这样的概念。简单理解就是字如其名的理解，把内容装进一个箱子了，当然了这可能是个边框透明的箱子，也可能是注入颜色的箱子
  

• mhchem:
  用来写化学方程式，化学生狂喜，相关命令有：\ce, \longleftrightarrows, \longLeftrightharpoons, \longrightleftharpoons, \longRightleftharpoons, \pu, \tripledash, \xleftarrow, \xleftrightarrow, \xLeftrightharpoons, \xrightarrow, \xrightleftharpoons, \xRightleftharpoons
  

• newcommand
  你以为我会输出空心的$\mathbb{R}$，哎我偏不，我就是玩（用于自定义命令）
  

• unicode
  说实话我也不知道有啥卵用，练习自己对ascii码的熟练度？
  

• verb
  你不是想当命令吗？就不让你当
  

• cancel
  批改作业？？
  

• enclose
  把你围起来，感觉里面最好用的是\enclose{circle}{}，因为我还真用过一次。除了例子里那些，第一个参数还可以是：circle roundedbox box phasorangle left right top bottom
  

Typora和HTML

typora支持html语法，虽然css也能生效，但是在撰写时css并不实用，原因在于typora文本里的css语法只能对处于同个html块的语句有用。我们真正要用到css知识的地方在于如何自己写一个属于自己的主题，这种个性化的东西显得如此有趣。
这里我们利用HTML，做一些markdown不容易做到的事，常用的有：
(1) 改变字体颜色：

# 改变字体颜色
<p color="red">改变字体颜色p>
<font color="red">改变字体颜色font>

cdcd
实际上也有直接的markdown命令改变颜色

\color{color}{text}
color: red, blue, orange,...

$text$
（2）改变字体大小

<p size=5>改变字体大小p>
<font size=5>改变字体大小font>
<font size=2>改变字体大小font>

改变字体大小
改变字体大小
（3）改变对齐方式

<p align="center">居中对齐p>

居中对齐

html其他应用：

（1）超链接：

<a>https://www.baidu.coma>

https://www.baidu.com
这样子的链接实际上是不会起跳转作用的，如果要写一个能跳转的，应这么写

<a href="https://www.baidu.com">https://www.baidu.coma>

https://www.baidu.com
（2）文字上标&&文字下标

用来比较<sup>我是上标sup>用来比较
用来比较<sub>我是下标sub>用来比较

用来比较^我是上标用来比较
用来比较_我是下标用来比较
（4）打印机字体标记

<tt>abcdefg我也不知道有啥用tt>

abcdefg我也不知道有啥用
（5）图像标记

<img src="路径/文件名.图片格式" width="属性值" height="属性值" border="属性值" alt="属性值">

不太建议用这个，因为可以直接把图片拖进 typora 里面，没必要自己写。
（6）不太实用的一些标记

<i>我是斜体，在 typora 可以直接使用*斜体内容*i>
<b>我是斜体，在 typora 可以直接使用**黑体内容**b>
<u>我是斜体，在 typora 可以直接使用**黑体内容**b>
# 字体大小控制
<small>小号字体，在 typora 可以直接使用\small{内容}small>
<large>大号字体，在 typora 可以直接使用\large{内容}large>

我是斜体，在 typora 可以直接使用斜体内容
我是斜体，在 typora 可以直接使用黑体内容
#字体大小控制
小号字体，在 typora 可以直接使用\small{内容}
大号字体，在 typora 可以直接使用\large{内容}

（7）颜色控制：可以在网上找一些调色板自己玩玩，选择自己喜欢的颜色,这里提供一个
http://tool.chinaz.com/Tools/onlinecolor.aspx

自己制作Typora主题

typora 具有不同的主题风格，内置的提供了5个：Github，Newsprint，Pixyll，Night和Whitey，都挺不错的，简洁大方。平时写一些比较重要的文章绰绰有余，但闲暇时想自己玩一玩，或者对主题有个性化追求的话，有两条路可选。一是在官网里下载其他主题；二是自给自足，自己动手制作，如果熟悉css和调试方法的话，相信这个并不会太困难，如果之前没学过，那也没关系，我也是临时才学了些。这个里面的具体操作其实我并没有完全掌握，也找了许多文章学习，最终自己坐做了两个主题，如下：


方法一：官方下载
官网：link

具体操作可见：https://blog.csdn.net/weixin_45965432/article/details/108922587（挺详细的）
主题推荐：https://blog.csdn.net/qq_29860591/article/details/115689002
方法二：自己写
（1）不熟悉的小伙伴可以看一下这一点，熟悉请跳过。CSS和HTML之间到底是什么关系呢？CSS（层叠样式表Cascading Style Sheets）的目的是为了解决内容与表现分离的问题，即同一个HTML文档也能表现出外观的多样性。CSS规则由两个主要的部分构成：选择器，以及一条或多条的声明。选择器通常是需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性是希望设置的样式属性（style attribute）。每个属性有一个值，属性和值由冒号分开。例如：

h1{ color:blue; font-size:12px; }
# 在这个例子中，h1是选择器，color和font-size是属性，blue和font-size是相应的值

（2）具体操作：
① 文件➡偏好设置➡外观➡打开主题文件夹
我们不要从头开始写，这不方便，也不现实。而是对原有主题进行修改，这里面的每个主题包括一个用于存放字体的文件夹和一个文本文件（CSS文件）。例如，我们对Github主题进行修改。
首先在themes文件里头新建一个文件夹，例如叫做mystyle，打开名为github的文件夹，复制里面的内容（woff2文件），黏贴到mystyle文件夹里。
②在themes里新建一个CSS文件，可以直接复制github的CSS文件，然后改名为mystyle
③打开该CSS文件（用记事本或用编程软件打开都行），使用文字替换功能，将里面的github关键字替换成mystyle。这时候重启typora，就可以见到外观里面有新的主题mystyle了。
④但是此时，我们还没有进行个性化修改。CSS文件里面的语句很长，建议是：比如想要对h1进行修改，可以利用搜索功能找到其位置，然后在里面进行修改，出现h1的位置可能有很多，而我们对里面各种选择器的优先级又不太清楚的话，建议每个位置都试试看，最终找到正确的修改位置。还有一种方法是写一个#write:before，但是这种方法具体原理我不太懂，在这里就不误人子弟了。csdn上有很多这样的文章可以参考。
⑤说一个比较麻烦的地方，假使我们要自己设置自己的背景图片时，应该怎么做呢？这个地方确实比较坑，刚开始我参考了网上的文章进行操作发现一直显示不出来，后面我发现有两个地方我们需要注意：
Ⅰ图片的存放位置，不能直接放进mystyle文件夹里头，也不能直接放在themes文件里头，得再themes里面新建一个image文件，把需要用到放在里面。
Ⅱ关于图片选择：最好不要超过150k，100k左右比较好，太小的话像素太差，做出来不好看。如果有Photoshop的话就用Photoshop进行操作，以我写的主题为例，原图是长这样的：

我要的是饼哥和玉子这对，就用魔法棒等工具将这两个人抠出来。

然后这里有个值得注意的，我们尽量减少在CSS文件里面写一些调整透明度、位置等的操作，直接就把图做好，要0.5透明度，就直接在图像里面设置，不要专门在CSS里面写opacity=***等，一方面减少犯错，另一方面这样子也是降低了图片的大小。这样子生成的图片往往是很大的，我们可以先尝试生成jpg文件（文件➡存储为➡保存类型(JPEG(*.JPG;*.JPEG;*.JPE)➡选择合适品质)），如下：
如果还是太大，可以试一下文件➡导出···➡存储为Web所用格式，在里面选择合适的像素，如下：

Ⅲ 具体写在CSS文件里头的代码，CSDN上有几位博主写过类似的文章，但我在直接套用的时候有时会出毛病，具体原因我也找不到，这里给出我成功的代码，在里头添加：

#write:before {
    background-image: url('./image/qwe.jpg');
    background-repeat: repeat;
    background-attachment: fixed;
    width:100%;
    height:100%;
    background-size:contain;
    content: "";
    z-index: -1;
    position:absolute;
}

大家可以自行尝试，关于这篇文章，后续我还会不断完善。