首頁 > 開發工具 > VSCode > 主體

聊聊VSCode中怎麼建構MarkDown寫作環境

青灯夜游
發布: 2022-07-07 20:42:33
轉載
3133 人瀏覽過

Typora收費了?以下這篇文章跟大家介紹一下VSCode中建構MarkDown寫作環境的方法, 開源軟體,完全值得信賴!強烈推薦!

聊聊VSCode中怎麼建構MarkDown寫作環境

我平常用的最習慣的MarkDown寫作工作是Typora,所見即所得的用戶體驗,再加上豐富的主題,讓人忍不住直呼「真香」。

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

一、VS Code安裝

VS Code的安裝就不用多說了,從官網下載對應版本的安裝包,安裝即可。 【推薦學習:《vscode入門教學》】

#官網下載位址:code.visualstudio.com/Download

聊聊VSCode中怎麼建構MarkDown寫作環境

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

聊聊VSCode中怎麼建構MarkDown寫作環境

二、MarkDown外掛增強

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

聊聊VSCode中怎麼建構MarkDown寫作環境

##右上角可以打開雙欄預覽:

聊聊VSCode中怎麼建構MarkDown寫作環境

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

1. Markdown All in One

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

聊聊VSCode中怎麼建構MarkDown寫作環境

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

    https: //marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

  • https://github.com/yzhang-gh/vscode-markdown/blob/master/ README.md

5-聊聊VSCode中怎麼建構MarkDown寫作環境

2.Markdown Image

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

使用這個插件,可以做到類似Typora的直接複製本地圖片,然後貼上進MarkDown,圖片檔案預設是放在本地,也可配置支援

Imgur七牛SM.MSCoding 等圖床。

聊聊VSCode中怎麼建構MarkDown寫作環境

安裝完這個外掛程式之後,可以做一些配置,進設定頁,搜尋:

markdown-image,可以設定相對路徑,預設圖片檔案保存在/res路徑下。

聊聊VSCode中怎麼建構MarkDown寫作環境

使用快速鍵

Shift Alt V就可以直接將剪貼簿裡面複製好的圖片貼進文件裡:

聊聊VSCode中怎麼建構MarkDown寫作環境

3.Markdown Preview Enhanced

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

聊聊VSCode中怎麼建構MarkDown寫作環境

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

聊聊VSCode中怎麼建構MarkDown寫作環境

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

1聊聊VSCode中怎麼建構MarkDown寫作環境

它也提供多個預覽主題:

1聊聊VSCode中怎麼建構MarkDown寫作環境

4.Word Count CJK

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

1聊聊VSCode中怎麼建構MarkDown寫作環境

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

1聊聊VSCode中怎麼建構MarkDown寫作環境

5.MarkDown Editor

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

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

1聊聊VSCode中怎麼建構MarkDown寫作環境

#安裝完成之後,對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文件,防止倉庫沒有主幹分支

1聊聊VSCode中怎麼建構MarkDown寫作環境

2.2. 產生token

  • 進入settings

1聊聊VSCode中怎麼建構MarkDown寫作環境

  • ##找到developer settings

1聊聊VSCode中怎麼建構MarkDown寫作環境

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

聊聊VSCode中怎麼建構MarkDown寫作環境

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

2聊聊VSCode中怎麼建構MarkDown寫作環境

2. 安裝設定PicGo

#2.1.安裝PicGO外掛程式

在VS Code裡搜尋PicGo ,安裝:

2聊聊VSCode中怎麼建構MarkDown寫作環境

2.2.設定PicGO

    開啟PicGo的擴充配置

2聊聊VSCode中怎麼建構MarkDown寫作環境

    #配置uploader,選擇github

2聊聊VSCode中怎麼建構MarkDown寫作環境

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

    • Branch:main,分支

    • Path:空,也可以設定一個相對路徑

    • Custome Url:空,

      其實可以配置一個CDN加速的url,jsDeliver,它是一個免費的CDN,最近似乎不可用了,大家也可以試一下,它的使用方法:

      https://cdn.jsdelivr.net/gh/你的github使用者名稱/你的倉庫名稱@發佈的版本號碼——cdn.jsdelivr.net/gh/fighter3…

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

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

2聊聊VSCode中怎麼建構MarkDown寫作環境

3.圖床使用

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

2聊聊VSCode中怎麼建構MarkDown寫作環境

圖片上傳相關的快捷鍵:

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

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

更多關於VSCode的相關知識,請造訪:vscode教學

以上是聊聊VSCode中怎麼建構MarkDown寫作環境的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!