Typora收費?搭建VS Code MarkDown寫作環境!

語言: CN / TW / HK

theme: smartblue

大家好,我是老三,我平時用的最習慣的MarkDown寫作工作是Typora,所見即所得的使用者體驗,再加上豐富的主題,讓人忍不住直呼“真香”。

但是大家都知道,Typora1.0之後,它就開始收費了,最近我的Mac電腦上裝的Typora,已經開始提示我升級。而且,整理我的《面渣逆襲手冊》的時候,因為檔案太大,Typora非常卡頓,所以,思來想去,我決定用VS Code搭建一套MarkDwon寫作環境。

一、VS Code安裝

VS Code的安裝就不用多說了,從官網下載對應版本的安裝包,安裝即可。

官網下載地址:https://code.visualstudio.com/Download

VS Code

這是我的Windows電腦上安裝的VS Code,注意看,我的頂欄、側邊欄都是中文的,因為安裝了中文的外掛:

中文外掛

二、MarkDown外掛增強

我們來看一下直接用VS Code開啟MarkDown檔案的效果:

直接開啟MarkDown

右上角可以開啟雙欄預覽:

雙欄預覽

看起來,還可以,但還有改進的空間,我們可以安裝一些外掛來讓它變得更好。

1. Markdown All in One

Markdown All in One是一款多合一的MardDown增強外掛:

Markdown All in One

它號稱支援Markdown所需要的一切功能,包括鍵盤快捷鍵、目錄、自動預覽等等,可以看一下它的擴充套件頁,或者倉庫說明文件:

  • https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
  • https://github.com/yzhang-gh/vscode-markdown/blob/master/README.md

Features

2.Markdown Image

Markdown Image主要是對MarkDown中插入圖片的擴充套件,支援將圖片放在本地或第三方的圖床或物件儲存。

使用這個外掛,可以做到類似Typora的直接複製本地圖片,然後貼上進MarkDown,圖片檔案預設是放在本地,也可配置支援 Imgur七牛SM.MSCoding 等圖床。

Markdown Image

安裝完這個外掛之後,可以做一些配置,進配置頁,搜尋:markdown-image,可以配置一下相對路徑,預設圖片檔案儲存在/res路徑下。

配置

使用快捷鍵Shift+Alt+V就可以直接將剪貼簿裡面複製好的圖片貼上進文件裡:

貼上進去的圖片和相對路徑

3.Markdown Preview Enhanced

Markdown Preview Enhanced是對VS Code預覽功能的增強,可以改善VS Code的預覽體驗。

Markdown Preview Enhanced

安裝這個外掛以後,點選預覽按鈕,就會使用增強的預覽:

預覽增強

還可以在邊欄顯示目錄,不過顯示了目錄,整個介面就顯得有些逼仄。

顯示目錄

它同樣也提供多個預覽主題:

多主題

4.Word Count CJK

Word Count CJK是一個用來統計中文字數的外掛:

Word Count CJK

對於我這種愛肝長文的人來講,看到文章的字數,也是滿滿的成就感了。

字數統計

5.MarkDown Editor

如果說我們就是要Typora所見即所得的體驗呢?

我也找到了一款外掛MarkDown Editor:

MarkDown Editor

安裝完成之後,對MD檔案選擇Open with MarkDown Editor就可以所見即所得地開啟MD檔案了。

MarkDown Editor使用

還有一些其它的外掛:

  • markdownlint:markdow格式檢查
  • Markdown Preview Github Styling:GitHub主題預覽

大家也可以去體驗一下。

三、圖床搭建

使用MarkDown寫作,還有一個重要的需求,就是圖床,我們寫的文章是要釋出出去的,MD中的圖片是以路徑形式儲存,本地的路徑釋出出去可沒法訪問,所以我們需要給MD編輯器接入圖床的功能。

我之前用Typora+PicGo+Gitee搭建了一版圖床,後來Gitee出了那檔子事,又換成了Typora+PicGo+Github,我們也照這個思路,在VS Code上搭建一版圖床。

1.GitHub倉庫配置

2.1. 建立一個新的倉庫

建立一個新的GitHub倉庫:

  • 公開,必須的,防止訪問不到
  • 新增一個READM檔案,防止倉庫沒有主幹分支

建立倉庫

2.2. 生成token

  • 進入settings

進入settings

  • 找到developer settings

    developer settings

    • 建立新的Personal access tokens,時間設定為永不過期,給repo許可權就可以了

    建立新的Personal access tokens

    • 生成的Token要記下來,只顯示一次

    生成的Token

2. 安裝配置PicGo

2.1.安裝PicGO外掛

在VS Code裡搜尋PicGo,安裝:

PicGo外掛

2.2.配置PicGO

  • 開啟PicGo的擴充套件配置

  • 配置uploader,選擇github

選擇github

  • GitHub相關配置,以我的配置為例:

  • Branch:main,分支

  • Path:空,也可以配置一個相對路徑

  • Custome Url:空,

    其實可以配置一個CDN加速的url,jsDeliver,它是一個免費的CDN,最近似乎不可用了,大家也可以試一下,它的使用方法:https://cdn.jsdelivr.net/gh/你的github使用者名稱/你的倉庫名@釋出的版本號——https://cdn.jsdelivr.net/gh/fighter3/picgo-win/fighter3/picgo-win/pic

  • Repo:fighter3/picgo-win,使用者名稱/倉庫格式

  • Token:填之前儲存的就行了

    GitHub相關配置

3.圖床使用

  • 開啟MD檔案,從別的地方貼上一個圖片,使用 Ctrl + Alt + U,可以看到檔案成功上傳,並且可以預覽

圖床使用

圖片上傳相關的快捷鍵:

| OS | 從貼上版上傳圖片 | 從瀏覽器上傳圖片 | 從輸入框上傳圖片 | | ------------ | ---------------- | ---------------- | ---------------- | | Windows/Unix | Ctrl + Alt + U | Ctrl + Alt + E | Ctrl + Alt + O | | OsX | Cmd + Opt + U | Cmd + Opt + E | Cmd + Opt + O |



用GitHub當圖床整體上還是不太理想,上傳和訪問都不太穩定,我們也可以在PicGo外掛裡把圖床換成七牛、或者騰訊雲、阿里雲,大體上過程類似,也比較簡單。



參考:

[1]. 將 VS Code 打造成一個體驗舒適的 Markdown 編輯器

[2]. vscode 秒變 全功能 所見即所得 markdown 編輯器

[3].在VS Code中使用 Picgo + jsDelivr + Github搭建高速穩定圖床


⭐面渣逆襲系列: