手機(jī)站首頁(yè)散文詩(shī)歌雜文隨筆日記小小說

散文網(wǎng) » 科技 »數(shù)碼 » 讓寫作如牛奶般絲滑——最強(qiáng)的Markdown編輯器Typora

讓寫作如牛奶般絲滑——最強(qiáng)的Markdown編輯器Typora

2021-04-12 12:49 作者:縱筆浮生 0人讀過 | 我要投稿

一、寫在前面

Markdown 語言寫的文字，借助markdown here在不同平臺(tái)都可以統(tǒng)一顯示。前面寫過一篇關(guān)于Markdown語言的編寫及發(fā)布前的CSS渲染。

關(guān)于Markdown here CSS渲染的經(jīng)驗(yàn)分享——讓你的文章排版更優(yōu)美，可讀性更高h(yuǎn)ttps://post.smzdm.com/p/aqn9pk7k/

正常來說一篇文章發(fā)布出來需要經(jīng)過以下流程：

「碼字→配圖→成文→樣式化→發(fā)布」

「配圖→碼字→成文→樣式化→發(fā)布」

各個(gè)自媒體平臺(tái)的編輯器至今仍然是富文本編輯器，并且都不怎么好用，用富文本編輯器插入圖片就顯得有點(diǎn)麻煩了，在富文本模式下，插入圖片，然后再獲取連接，再用markdown語言編寫就很麻煩了，一直在嘗試有沒有一種方法，只要拖拽上傳，或者復(fù)制到Typora里就可以直接完成圖片的上傳和markdown語言的轉(zhuǎn)譯。

每個(gè)人寫作的流程可能不太一樣，針對(duì)不同的文章的寫作方法也可能不一樣。

首先構(gòu)建文章的大綱，如一篇產(chǎn)品的評(píng)測(cè)，這樣的文章在拍照的時(shí)候已經(jīng)大概有了寫作的思路，后期文章呈現(xiàn)的時(shí)候，先按照拍攝的思路上傳圖片然后再配以文字。

清單類的文章，可能先需要確定清單，然后每個(gè)清單需要寫哪些內(nèi)容，就采用邊寫邊配圖的方式。這種時(shí)候，一邊配圖一邊碼字，就容易造成一種強(qiáng)烈的割裂感，插完圖片可能思路就被打斷了。

今天重點(diǎn)解決Typora 平臺(tái)下富文本和markdown語言的共同編輯、利用Typora最近更新的圖床上傳功能，以實(shí)現(xiàn)如牛奶般絲滑的寫作體驗(yàn)。

二、Typora簡(jiǎn)介

Typora 是一款支持實(shí)時(shí)預(yù)覽的 Markdown 文本編輯器，簡(jiǎn)單來說就是富文本編輯和markdown語言都可以。有 OS X、Windows、Linux 三個(gè)平臺(tái)的版本，是完全免費(fèi)的A truly minimal markdown editor。

Typora將預(yù)覽框和編輯框整合在一起了，也就是說輸入代碼語言之后，會(huì)自動(dòng)識(shí)別為預(yù)覽模式，可以看到實(shí)際渲染的效果。?從個(gè)人使用的角度上來說，Typora的這種實(shí)時(shí)預(yù)覽的模式符合我的使用習(xí)慣。左邊編輯右邊預(yù)覽的模式，對(duì)我來說還是有筆記強(qiáng)烈的割裂感的。在左邊完成輸入之后，還要移動(dòng)眼睛到右邊查看效果。

解決痛點(diǎn)：

首先，選用這款編輯器最大的原因是人性化，用著比較爽，一般 Markdown 編輯器界面都是兩個(gè)窗口，左邊是 Markdown 源碼，右邊是效果預(yù)覽。有時(shí)一邊寫源碼，一邊看效果，確實(shí)有點(diǎn)不便。 Typora 可以實(shí)時(shí)的看到渲染效果，而且是在同一個(gè)界面，所見即所得。也就是說一次編輯可以同時(shí)得到markdown語言的文本和富文本模式的文本。

第二，雖然是markdown寫作，但是富文本編輯的快捷鍵功能，操作之后，會(huì)自動(dòng)編輯為markdown語言。比如CTRL+B加粗，ctrl+I斜體，ctrl+U，還有ctrl+數(shù)字可以快速設(shè)置標(biāo)題。

第三。ctrl+1就是一級(jí)標(biāo)題，ctrl+2就是二級(jí)標(biāo)題，因?yàn)閺埓髬尶梢宰R(shí)別二級(jí)標(biāo)題，最高標(biāo)題用二級(jí)，轉(zhuǎn)換后可以直接被張大媽識(shí)別，然后生成文章大綱。 ?輯器實(shí)時(shí)預(yù)覽模式下呢還兼顧了部分富文本編輯的功能，比如圖片的拖拽插入，CTRL+B加粗，ctrl+I斜體，ctrl+U下劃線，一定程度上提高了碼字效率。

第四，設(shè)置快捷方式也是很方便的，只要復(fù)制網(wǎng)址之后，在Typora內(nèi)選中文字，然后ctrl+K，就會(huì)自動(dòng)識(shí)別粘貼板內(nèi)的鏈接，并自動(dòng)生成快捷方式。

第五，富文本編輯框下，是一般是無法添加表格的，利用markdown語言可以實(shí)現(xiàn)表格的效果，尤其是寫作清單類的文章，需要添加鏈接，加入表格可以使文章可讀性更高。

網(wǎng)絡(luò)清單1.Anywhere Anything2.蟲部落快搜3.設(shè)計(jì)導(dǎo)航 4.優(yōu)設(shè)導(dǎo)航5.鳩摩搜書6.云盤精靈 7.史萊姆搜索8.行業(yè)分析搜索9.茶杯狐10.天天云搜11.小不點(diǎn)搜索12.資源狗導(dǎo)航13.1納米學(xué)習(xí)14.龍軒導(dǎo)航15. 書享家16.noexcuselist17.北郵人導(dǎo)航18.alternativeto

第六.大綱視圖：此功能也是很方便的一個(gè)功能，可以隨著寫作隨時(shí)查看文章結(jié)構(gòu)，調(diào)整寫作思路，不過遺憾的是不能像word一樣拖動(dòng)大綱調(diào)整文字。

三、安裝主題

主題文件夾可以在文件——偏好設(shè)置內(nèi)——外觀內(nèi)設(shè)置打開。

[主題地址]（http://theme.typora.io）下載主題之后，解壓然后復(fù)制到主題文件夾即可。

也可以將我們上文中的markdown here css代買放到TXT文件中，然后修改后綴名為.css，然后復(fù)制到這個(gè)文件夾中就可以使用了。想用什么視圖格式可以自己進(jìn)行調(diào)校。也可以借助這種方式，對(duì)調(diào)校的CSS代碼進(jìn)行初步效果驗(yàn)證。

主題如果未顯示在主題菜單欄中，或者選擇后未更新主題。原因可能是您的 CSS 文件名包含大寫字符或空格。請(qǐng)更改為小寫 + 連字符，例如my-typora-theme.css。

修改現(xiàn)有主題。

簡(jiǎn)而言之，如果主題是您創(chuàng)建的，則可以直接對(duì)其進(jìn)行修改。前面講過后綴名字改成了.CSS，依然可以用txt進(jìn)行修改。修改的方法和CC渲染代碼是一樣的。

可以在這里對(duì)段落、字體大小間距，段距、段落方式進(jìn)行修改

這里可以修改標(biāo)題的格式，以匹配自己的寫作和閱讀習(xí)慣。

如果主題是 Typora 內(nèi)置的，或者是從網(wǎng)站下載的，如果要修改，建議最好在附件上修改，然后再重命名一個(gè)文件，當(dāng)打字錯(cuò)誤或主題文件更新時(shí)，這些文件將不會(huì)被覆蓋。可以將修改內(nèi)容放入：

base.user.css 在主題文件夾下，其中的 css 規(guī)則將應(yīng)用于所有主題。
{theme-css-name}.user.css，則其中的 css 規(guī)則將僅應(yīng)用于主題文件{theme-css-name}.css。

如果文件夾不存在可以自行創(chuàng)建。添加自定義 CSS。

四、Pandoc導(dǎo)出文件

平常寫完之后是可以導(dǎo)出pdf和html格式，但是要導(dǎo)出某docx，odt，rtf，epub，LaTeX和Wiki就需要安裝Pandoc支持。安裝Pandoc之后，您可以通過從菜單欄中單擊“文件”->“導(dǎo)入”來導(dǎo)入支持的文件類型，或者直接將文件拖放到Typora中。Pandoc的下載頁(yè)面

導(dǎo)入支持文件：.docx，.latex，.tex，.ltx，.rst，.rest，.org，.wiki，.dokuwiki，.textile，.opml，.epub。

導(dǎo)出支持以下文件格式：HTML，PDF（這兩個(gè)不需要Typora），Docx，odt，rtf，Epub，LaTeX，Media Wiki。

安裝和使用Pandoc參考方法

五、圖床配置

圖床就是一個(gè)第三方存儲(chǔ)圖片的地方，借助 typora圖床功能，我們可以實(shí)現(xiàn)將圖片拖拽或者粘貼到文章中，可以直接返回圖片的URL，并且自動(dòng)生成markdown格式文本，這樣就大大簡(jiǎn)化了圖片的上傳和設(shè)置。常用的圖床有七牛云、sm.MS、騰訊云等，七牛云和sm.MS，這兩個(gè)圖床是可以直接被張大媽的富文本編輯器拉取的。七牛云相對(duì)來說還是需要門檻的，這就是必須要有一個(gè)域名，現(xiàn)在申請(qǐng)一個(gè)域名也是比較簡(jiǎn)單的，下面主要以七牛云和sm.MS為例說一下圖床的使用：

typora配置前準(zhǔn)備：

1.確保 typora 的版本在 0.9.86 以上，這個(gè)版本開始增加了圖片同步返回功能。

各圖床配置代碼使用的名稱：

smms -> sm.MS
tcyun -> 騰訊云COS
upyun -> 又拍云
aliyun -> 阿里云OSS
qiniu -> 七牛云
imgur -> Imgur
weibo -> 微博圖床
github -> GitHub

1.七牛圖床配置

七牛云的認(rèn)證用戶十每個(gè)月10G免費(fèi)存儲(chǔ)空間，下載流量10G，由于只是碼文的過程中過渡一下，足夠用了。

關(guān)于存儲(chǔ)空間方面10G也是夠用的，七牛云的照片經(jīng)過七牛云的瘦身只有幾百B，瘦身的費(fèi)用也是比較劃算的一千次一毛錢，隨便往里面存入幾塊錢就夠用了。

準(zhǔn)備工作，注冊(cè)七牛云賬號(hào)，并實(shí)名認(rèn)證，這個(gè)實(shí)名驗(yàn)證非?？?，大概是機(jī)器識(shí)別做的驗(yàn)證。訪問下面的鏈接：

點(diǎn)擊首頁(yè)的對(duì)象管理，新建空間：

在存儲(chǔ)空間里可以看到這些信息，留到下面配置使用：

然后再個(gè)人中心里可以找到AK和SK。

然后再Typora里打開偏好設(shè)置——圖像——選擇PICGO-core，打開配置文件。

把下面這段代碼復(fù)制到配置文件內(nèi)，我們對(duì)照參數(shù)開始配置：

?{
?"picBed":?{
?"uploader":?"qiniu",
?"qiniu":?{
???"accessKey":?"",
???"secretKey":?"",
???"bucket":?"",?//?存儲(chǔ)空間名
???"url":?"",?//?自定義域名
???"area":?"z0"?|?"z1"?|?"z2"?|?"na0"?|?"as0",?//?存儲(chǔ)區(qū)域編號(hào)
???"options":?"",?//?網(wǎng)址后綴，比如?imgslim
???"path":?""?//?自定義存儲(chǔ)路徑，比如img/
?}
?},
?"picgoPlugins":?{}
?}

在配置文件里，存儲(chǔ)區(qū)域?qū)?yīng)的鍵是area，比如華東的話就是z0，華北z1，華南z2，北美na0，東南亞as0。

點(diǎn)開 typora，驗(yàn)證圖片上傳功能。當(dāng)看到下面的頁(yè)面的時(shí)候，就已經(jīng)配置成功了?？梢灾苯油献д掌苯硬迦肓恕?/p>

Typora在插入時(shí)自動(dòng)上傳圖像（包括從菜單，觸摸欄，通過復(fù)制和粘貼或拖放插入圖像），要啟用此功能，請(qǐng)?jiān)凇安迦霑r(shí)…”下選擇“上傳圖像”。

整個(gè)流程下來七牛云的配置就算完成了。

2.sm.ms圖床配置

每個(gè)文件最大5 MB。每個(gè)請(qǐng)求最多10個(gè)文件。sm.ms圖床,sm.MS圖床的空間相對(duì)還是比較小的，好處是不需要個(gè)人域名，這樣用起來算是門檻比較低了。每天限制200張上傳量。對(duì)于碼文來說勉強(qiáng)夠用，如果存儲(chǔ)量快滿了，就要及時(shí)清理。

配置來說就比較簡(jiǎn)單了，只要修改一個(gè)API密鑰就可以了：密鑰后臺(tái)

還是參照上面七牛圖床的配置方法，在配置文件里面將"token"替換掉就可以了。

?{
?"picBed":?{
?"uploader":?"smms",?//?代表當(dāng)前的默認(rèn)上傳圖床為?sm.MS,
?"smms":?{
?"token":?"這里面的token換成你上個(gè)頁(yè)面的申請(qǐng)的token"?//一定要換
?}
?},
?"picgoPlugins":?{}?//?為插件預(yù)留
?}

插入圖片之后看到自動(dòng)返回了了網(wǎng)頁(yè)地址，并轉(zhuǎn)譯成了markdown語言。

在圖床后臺(tái)也看到了剛才我們插入的圖片。

今天就以這兩個(gè)為例子，后面幾個(gè)的配置代碼如下，根據(jù)提示修改一下就可以使用了。

3.騰訊云配置

?{
?"picBed":?{
?"uploader":?"tcyun",?//?代表當(dāng)前的默認(rèn)上傳圖床為騰訊云,
?"tcyun":?{
???"secretId":?"",
???"secretKey":?"",
???"bucket":?"",?//?存儲(chǔ)名，v4?和?v5?版本不一樣
???"appId":?"",
???"area":?"",?//?存儲(chǔ)區(qū)域，例如?ap-beijing-1
???"path":?"",?//?自定義存儲(chǔ)路徑，比如?img/
???"customUrl":?"",?//?自定義域名，注意要加?http://或者?https://
???"version":?"v5"?|?"v4"?//?COS?版本，v4?或者?v5
?}
?},
?"picgoPlugins":?{}?//?為插件預(yù)留
?}

4.github配置

?{
???"repo":?"",?//?倉(cāng)庫(kù)名，格式是?username/reponame
???"token":?"",?//?github?token
???"path":?"",?//?自定義存儲(chǔ)路徑，比如?img/
???"customUrl":?"",?//?自定義域名，注意要加?http://或者?https://
???"branch":?""?//?分支名，默認(rèn)是?master
?}

5.aliyun（阿里云）配置

?{
?"picBed":?{
?"uploader":?"aliyun",
?"aliyun":?{
???"accessKeyId":?"",
???"accessKeySecret":?"",
???"bucket":?"",?//?存儲(chǔ)空間名
???"area":?"",?//?存儲(chǔ)區(qū)域代號(hào)
???"path":?"",?//?自定義存儲(chǔ)路徑
???"customUrl":?"",?//?自定義域名，注意要加?http://或者?https://
???"options":?""?//?針對(duì)圖片的一些后綴處理參數(shù)?PicGo?2.2.0+?PicGo-Core?1.4.0+
?}
?},
?"picgoPlugins":?{}
?}

6.Imgur 的相關(guān)配置

?{
?"picBed":?{
?"uploader":?"Imgur",
?"Imgur":?{
???"clientId":?"",?//?imgur?的?clientId
???"proxy":?""?//?代理地址，僅支持?http?代理
?}
?},
?"picgoPlugins":?{}
?}

配置具體指南

六.文章渲染

在用markdown 書寫的過程中，張大媽可以識(shí)別二級(jí)標(biāo)題，直接從二級(jí)標(biāo)題開始寫作。

第二，如果這樣寫完之后，用markdown here渲染后，圖片鏈接是用的圖床鏈接，這樣的話，會(huì)使用圖床的流量，造成費(fèi)用，所以我們只是用圖床作為一個(gè)過渡，這樣文章寫好之后，復(fù)制文章到張大媽的編輯器進(jìn)行內(nèi)容拉取，這時(shí)候圖片就變成了張大媽的鏈接，然后再?gòu)?fù)制回來進(jìn)行終稿的排版。這一步相當(dāng)于把圖片從圖床存儲(chǔ)到張大媽的服務(wù)器。然后排版后，再?gòu)?fù)制代碼到張大媽的富文本編輯器進(jìn)行css渲染。

七.文章同步

正常情況下，文章保存在這里的。