使用Typora做笔记

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

一、介绍

1. 为什么要用Typora

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

2. 上传博客

   由于使用Typora本身写下的便是md格式的文本,在上传博客时我们只需要直接复制内容粘贴到博客上的即可(Typora会默认粘贴md格式的原文),或者进入源码模式再粘贴也可.这里需要注意的是图片的处理——由于md语法中记录的是图片的位置,这样一来在博客上的图片显然是无效的,以下是三种解决方法:

   • 选择图片手动上传
   • 将需要上传的图片截图,然后复制到对应的位置
   • 图床:以上两种都需要对每张图片进行单独的操作,而图床只需要一次操作即可,在后面我们会讲解操作

   注:合理地切换Typora的源码模式可能会给我们的排版带来一些出其不意的效果

二、MarkDown语法

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

1. 表意语法

   • #:一级标题
   • ######:六级标题
   • 1.: 有序列表
   • *:无序列表

   注:

   • 标记必须相对顶格(标记前没有字符),后面必须接一个空格

   • 在列表的头部键入Backspace即可删除前置的标记

   • 在列表的结束键入Enter即可添加下一个阶段的标记

     如:有了1开头的列表,回车即可获得2开头的列表(无序列表则生成与上一阶段相同的标记)

   • 在使用以上语法时,熟悉Enter和Backspace键可以给你带来极大的方便

2. 字体语法

   • *斜体*:斜体
   • **加粗**:加粗
   • ~~删除线~~:删除线
   • [链接](www.baidu.com):链接

   在这里使用快捷键可以在一定程度上提高效率:

   • ctrl + k:先复制一个链接,然后选中要放上链接的文字或者图片然后使用快捷键
   • ctrl + b:选中文字,使用快捷键

3. 引用及代码块添加

   • > 引用:

     引用 (需顶格)

   • `行内代码块`:行内代码块(sadly,这边的演示无法再直接用"`"包裹)

   • ```java

     代码块

     ```

     代码块
     

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

4. 其它

   之所以要分出其它一类在于我认为某些情况下使用md语法是费力不讨好的事,这样的事应该大多交给Typora的快捷来完成

   • 表格:表格的排版是比较麻烦的,这里建议直接使用Typora的工具生成和调整

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

   • 图片:使用截图后粘贴或者直接将图片导入

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

四、LateX公式

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

1. 准备工作

   打开Typoa和LateX公式相关的设置,进入File -> Preference -> MarkDown,勾选以下内容:

   • Inline Math:行内数学公式
   • Subscript:下标
   • Superscript:上标

2. Typora中公式引入的两种方式

   • 行内公式:$公式$

   • 块级公式:

     $$
     公式
     $$
     

3. 下标

   • 单下标

     $a_1$:\(a_1\)

   • 多下标:使用{}包裹即可

     $a_{b1}$:\(a_{b1}\)

4. 上标

   • 单上标

     $a^1$:\(a^1\)

   • 多上标:使用{}包裹即可

     $a^{b1}$:\(a^{b1}\)

5. 特殊表达式

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

   • 常用表达式

     表达式	显示
     \frac{分子}{分母}	\(\frac{分子}{分母}\)
     \sum_{下标}^{上标}{表达式}	\(\sum_{下标}^{上标}{表达式}\)
     \prod_{下标}^{上标}{表达式}	\(\prod_{下标}^{上标}{表达式}\)

   • 特殊字母

     表达式	显示
     \alpha	\(\alpha\)
     \beta	\(\beta\)
     \mu	\(\mu\)
     \pi	\(\pi\)
     \varphi	\(\varphi\)

   • 通过对以上内容的拼接,即可完成一些基本的表达式的书写,https://www.acwing.com/blog/content/1727/

五、Typora

聊完了md,lateX公式等前置的信息,我们可以正式开始聊聊Typora了

1. 下载

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

   价格:免费

   支持平台:windows,linux,os

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

2. 定制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/

六、图床

1. 当我们在本地使用图片时,实际上对应的是该图片在本地的地址(如果是截图,在复制过后会自动在本地产生一个地址).这种情况在本地使用是无妨的,但是当我们想要将对应的md原码直接放到bolg上就出现问题了,因为赋值过去的图片链接是错误,为此我们需要对每张图片一一进行操作,显然这就带来极大的不便.

   

2. 解决的方法之一便是图床.所谓图床就是储存图片的服务器.具体工作原理见下图,相信大家可以很容易地理解其工作原理,而在Typora内部也有与之相对应的设置.

   

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

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

七、转换文本格式

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

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

八、使用ProcessOn进行绘图

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

以上,如有问题,欢迎大家留言讨论