本文旨在分享使用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 -
圖片:使用截圖后粘貼或者直接將圖片導入
-
注:以上的內容稍微參考了一下簡書里的一篇文章
四、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_{下標}^{上標}{表達式}\) -
特殊字母
表達式 顯示 \alpha\(\alpha\) \beta\(\beta\) \mu\(\mu\) \pi\(\pi\) \varphi\(\varphi\) -
通過對以上內容的拼接,即可完成一些基本的表達式的書寫,https://www.acwing.com/blog/content/1727/
-
五、Typora
聊完了md,lateX公式等前置的信息,我們可以正式開始聊聊Typora了
-
下載
價格:免費
支持平台: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放到博客上設置使用
-
六、圖床
-
當我們在本地使用圖片時,實際上對應的是該圖片在本地的地址(如果是截圖,在復制過后會自動在本地產生一個地址).這種情況在本地使用是無妨的,但是當我們想要將對應的md原碼直接放到bolg上就出現問題了,因為賦值過去的圖片鏈接是錯誤,為此我們需要對每張圖片一一進行操作,顯然這就帶來極大的不便.
-
解決的方法之一便是圖床.所謂圖床就是儲存圖片的服務器.具體工作原理見下圖,相信大家可以很容易地理解其工作原理,而在Typora內部也有與之相對應的設置.
圖床使用方法貼知乎鏈接:https://zhuanlan.zhihu.com/p/137310314 (具體的操作在評論區的置頂)
注:如果大家使用的是阿里雲的圖床,最后即使有報錯可能也不影響實際的使用,但需要在服務器的文件夾中確認相關的圖片已經上傳了
七、轉換文本格式
雖然有許多網站支持.md文件,如簡書,博客,github等,但大多局限於程序員的圈子,如果要對外發布通常還需要轉換為PDF或者word等格式.為此,我們在選擇文件 -> 導出 ->PDF時只需要依照提示安裝一下Pandoc工具即可非常便捷地完成格式轉換
注:PDF格式與css相關,.docx格式與css無關
八、使用ProcessOn進行繪圖
也許你會感到很神奇:md語言是可以繪圖的!但就個人而言我無法想象復雜的流程圖的繪制要如何通過md語言完成.為此,在這里我推薦使用免費的ProcessOn網站進行流程圖,思維導圖的繪制(就如以上完成的兩張圖),之后截圖,復制即可.
以上,如有問題,歡迎大家留言討論