使用Typora做笔记

本文旨在分享使用Typora做笔记的一些心得

一、介绍

为什么要用Typora
- 作为一个程序员,在学习过程中打交道的不单单是文字,还有各种语言的代码块和公式,以及一些简单的流程图和思维导图(就目前而言),就其内容的复杂性而言,远远不是一个word文档就可以解决的.此外,更重要的是,我们往往还需要对笔记进行编辑以发布到个人的博客上(这样有助于在需要时查阅).可以看到,在许多博客都提供了md(Markdown语言)以方便我们进行编辑.然而,纵观大部分的网页版md编辑器,编辑与视图都是分离的——即需要在编辑完之后切换窗口以进行查看语法是否有误(这种情况在编辑公式时更是尤为明显).
- 而typora则稍不同,作为一款支持实时预览的Markdown文本编辑器,则近乎完全避免了因为频繁切屏或语法错误造成的时间效率的影响.同时它还支持图片的上传(这有一点我们将在之后着重提及)以及格式的转换(将在之后提及),可以将.md后缀的文件转换为pdf,docx等格式的文档.更重要的是,它是完全免费的!
上传博客

由于使用Typora本身写下的便是md格式的文本,在上传博客时我们只需要直接复制内容粘贴到博客上的即可(Typora会默认粘贴md格式的原文),或者进入源码模式再粘贴也可.这里需要注意的是图片的处理——由于md语法中记录的是图片的位置,这样一来在博客上的图片显然是无效的,以下是三种解决方法:
- 选择图片手动上传
- 将需要上传的图片截图,然后复制到对应的位置
- 图床:以上两种都需要对每张图片进行单独的操作,而图床只需要一次操作即可,在后面我们会讲解操作
注:合理地切换Typora的源码模式可能会给我们的排版带来一些出其不意的效果

二、MarkDown语法

这里主要介绍一些Typora中常规易用的md语法

表意语法
- #:一级标题
- ######:六级标题
- 1.: 有序列表
- *:无序列表
注:
- 标记必须相对顶格(标记前没有字符),后面必须接一个空格
- 在列表的头部键入Backspace即可删除前置的标记
- 在列表的结束键入Enter即可添加下一个阶段的标记
  
  如:有了1开头的列表,回车即可获得2开头的列表(无序列表则生成与上一阶段相同的标记)
- 在使用以上语法时,熟悉Enter和Backspace键可以给你带来极大的方便
字体语法
- *斜体*:斜体
- **加粗**:加粗
- ~~删除线~~:~~删除线~~
- [链接](www.baidu.com):链接
在这里使用快捷键可以在一定程度上提高效率:
- ctrl + k:先复制一个链接,然后选中要放上链接的文字或者图片然后使用快捷键
- ctrl + b:选中文字,使用快捷键
引用及代码块添加
- > 引用:
  
  引用 (需顶格)
- `行内代码块`:行内代码块(sadly,这边的演示无法再直接用"`"包裹)
- ```java

代码块

```
```
代码块
```
  注: 代码块是可以选择相应的语言的
其它

之所以要分出其它一类在于我认为某些情况下使用md语法是费力不讨好的事,这样的事应该大多交给Typora的快捷来完成
- 表格:表格的排版是比较麻烦的,这里建议直接使用Typora的工具生成和调整
  
  1 1 1
  
  1 1 1
  
  1 1 1
  
  1 1 1
- 图片:使用截图后粘贴或者直接将图片导入

1	1	1
1	1	1
1	1	1
1	1	1

注:以上的内容稍微参考了一下简书里的一篇文章

三、LateX公式

查阅了一定的资料,发现LateX也是一种标记语言,但更多地应用于论文的编排.这里我们主要介绍在Typora中如何使用LateX的公式(或者说是md中整合的LateX公式的基本用法),介绍的重点在于上标,下标以及一些特殊表达式的使用

准备工作

打开Typoa和LateX公式相关的设置,进入File -> Preference -> MarkDown,勾选以下内容:
- Inline Math:行内数学公式
- Subscript:下标
- Superscript:上标
Typora中公式引入的两种方式
- 行内公式: $公式$
- 块级公式:
```
$$
公式
$$
```
下标
- 单下标
  
  $a_1$ :$a_1$
- 多下标:使用{}包裹即可
  
  $a_{b1}$ :$a_{b1}$
上标
- 单上标
  
  $a^1$ :$a^1$
- 多上标:使用{}包裹即可
  
  $a^{b1}$ :$a^{b1}$

特殊表达式

LateX对于公式的支持是比较完整的,既包括了加减乘除,分数开根等一些简单的运算公式,也包括了积分,向量,求极限等复杂的运算公式.这里主要介绍一些常用的函数以及符号标记,如果要查阅更完整的内容可以参考网上的相关博客

常用表达式

表达式	显示
`\frac{分子}{分母}`	$\frac{分子}{分母}$
`\sum_{下标}^{上标}{表达式}`	$\sum_{下标}^{上标}{表达式}$
`\prod_{下标}^{上标}{表达式}`	$\prod_{下标}^{上标}{表达式}$
`f(x)=\begin{cases} a, & x<0 \\ b, & x>=0 \end{cases}`	$f(x)=\begin{cases} a, & x<0 \\ b, & x>=0 \end{cases}$

希腊字母

表达式	显示	注
`\alpha`	$\alpha$
`\beta`	$\beta$
`\gamma`	$\gamma$
`\delta`	$\delta$
`\Delta`	$\Delta$
`\epsilon`	$\epsilon$
`\zeta`	$\zeta$
`\eta`	$\eta$
`\theta`	$\theta$
`\lambda`	$\lambda$
`\mu`	$\mu$
`\xi`	$\xi$
`\pi`	$\pi$
`\rho`	$\rho$
`\sigma`	$\sigma$
`\tau`	$\tau$
`\varphi`	$\varphi$
`\varPhi`	$\varPhi$
`\chi`	$\chi$	$\chi^2$分布
`\psi`	$\psi$
`\omega`	$\omega$
`\Omega`	$\Omega$

高等数学

表达式	显示	备注
`\lim_{x \to x_0}`	$\lim_{x \to x_0}$	极限
`f'(x)`	$f'(x)$	求导
`\frac{\part y}{\part x}`	$\frac{\part y}{\part x}$	偏导
`\int`	$\int$	定积分
`\iint`	$\iint$	重积分(+i)
`\oint`	$\oint$	曲线积分
`\oiint`	$\oiint$	曲面积分

线性代数

表达式	显示
`\begin{vmatrix} a & b \\ c & d \end{vmatrix}`	$\begin{vmatrix} a & b \\ c & d \end{vmatrix}$
`\begin{pmatrix} a & b \\ c & d \end{pmatrix}`	$\begin{pmatrix} a & b \\ c & d \end{pmatrix}$

概率论

四、Typora

下载

官网:https://www.typora.io/

价格:免费

支持平台:windows,linux,os

注:由于服务器在境外,下载比较慢,这里提供一个百度云的下载链接,提取码:3399,于2020.7下载,如果官网下载不了的朋友可以自行下载领取.
定制Typora

下载好Typora,熟悉了md语法以及Latex公式,您应该能够初步地使用这个程序了.但是为了更好地使用它,对它进行定制,我们还应该稍微了解一下它的实现原理
- 倘若你有一定的前端开发经验,那么当你打开视图的开发者工具(事实上,许多人看到这个词估计心里就有数了),可能会惊讶地发现Typora原来是个浏览器!而且根据这个调试工具的风格还能更近一步地猜想到是基于Chrome的浏览器内核开发的.
- 事实上,也的确是如此的.Typora正是使用了electron框架进行开发的.而electron是一个基于Chromium 和 Node.js,帮助我们使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序(也就是我们下载的桌面应用,如Typora)的框架.
- 既然Typora可以看做是浏览器,那么可以想见Typora实际所做的工作也就是将我们写下的内容翻译成html+css,然后用浏览器将其渲染出来.那么我们要如何定制自己的Typora呢?答案不言而喻,只需修改一下对应的css即可.打开偏好设置->外观->打开主题文件夹,在主题文件夹下有多个css文件,查看Typora上方的主题栏便可知晓当前使用的主题(默认为github).
  
  (1).查看原文件:(这里以一个5级标题为例)
```
h5 {
    font-size: 1em;
}
```
  (2).尝试修改文件:
```
h5 {
    font-size: 2em;
}
```
  (3).重启,可以看到对应的标题字体的确变大了
  
  有喜欢整一些花里胡哨东西的朋友可以开始搞起来了!
- 补充:这样的css调整不仅能在本地使用,还可以将对应的css放到博客上设置使用
- 相关文档:https://support.typora.io/About-Themes/

五、图床

当我们在本地使用图片时,实际上对应的是该图片在本地的地址(如果是截图,在复制过后会自动在本地产生一个地址).这种情况在本地使用是无妨的,但是当我们想要将对应的md原码直接放到bolg上就出现问题了,因为赋值过去的图片链接是错误,为此我们需要对每张图片一一进行操作,显然这就带来极大的不便.
解决的方法之一便是图床.所谓图床就是储存图片的服务器.具体工作原理见下图,相信大家可以很容易地理解其工作原理,而在Typora内部也有与之相对应的设置.

图床使用方法贴知乎链接:https://zhuanlan.zhihu.com/p/137310314 (具体的操作在评论区的置顶)

注:如果大家使用的是阿里云的图床,最后即使有报错可能也不影响实际的使用,但需要在服务器的文件夹中确认相关的图片已经上传了

六、转换文本格式

虽然有许多网站支持.md文件,如简书,博客,github等,但大多局限于程序员的圈子,如果要对外发布通常还需要转换为PDF或者word等格式.为此,我们在选择文件 -> 导出 ->PDF时只需要依照提示安装一下Pandoc工具即可非常便捷地完成格式转换

注:PDF格式与css相关,.docx格式与css无关

七、使用ProcessOn进行绘图

也许你会感到很神奇:md语言是可以绘图的!但就个人而言我无法想象复杂的流程图的绘制要如何通过md语言完成.为此,在这里我推荐使用免费的ProcessOn网站进行流程图,思维导图的绘制(就如以上完成的两张图),之后截图,复制即可.

posted @ 2020-10-06 15:24 Arno_vc 阅读(5570) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

表达式	显示
`\frac{分子}{分母}`	\(\frac{分子}{分母}\)
`\sum_{下标}^{上标}{表达式}`	\(\sum_{下标}^{上标}{表达式}\)
`\prod_{下标}^{上标}{表达式}`	\(\prod_{下标}^{上标}{表达式}\)
`f(x)=\begin{cases} a, & x<0 \\ b, & x>=0 \end{cases}`	\(f(x)=\begin{cases} a, & x<0 \\ b, & x>=0 \end{cases}\)

表达式	显示	注
`\alpha`	\(\alpha\)
`\beta`	\(\beta\)
`\gamma`	\(\gamma\)
`\delta`	\(\delta\)
`\Delta`	\(\Delta\)
`\epsilon`	\(\epsilon\)
`\zeta`	\(\zeta\)
`\eta`	\(\eta\)
`\theta`	\(\theta\)
`\lambda`	\(\lambda\)
`\mu`	\(\mu\)
`\xi`	\(\xi\)
`\pi`	\(\pi\)
`\rho`	\(\rho\)
`\sigma`	\(\sigma\)
`\tau`	\(\tau\)
`\varphi`	\(\varphi\)
`\varPhi`	\(\varPhi\)
`\chi`	\(\chi\)	\(\chi^2\)分布
`\psi`	\(\psi\)
`\omega`	\(\omega\)
`\Omega`	\(\Omega\)

表达式	显示	备注
`\lim_{x \to x_0}`	\(\lim_{x \to x_0}\)	极限
`f'(x)`	\(f'(x)\)	求导
`\frac{\part y}{\part x}`	\(\frac{\part y}{\part x}\)	偏导
`\int`	\(\int\)	定积分
`\iint`	\(\iint\)	重积分(+i)
`\oint`	\(\oint\)	曲线积分
`\oiint`	\(\oiint\)	曲面积分

表达式	显示
`\begin{vmatrix} a & b \\ c & d \end{vmatrix}`	\(\begin{vmatrix} a & b \\ c & d \end{vmatrix}\)
`\begin{pmatrix} a & b \\ c & d \end{pmatrix}`	\(\begin{pmatrix} a & b \\ c & d \end{pmatrix}\)

Arno_vc