Typora charges? Build vs Code markdown writing environment

Hello everyone , I'm the third , I am most used to it MarkDown Writing is Typora, WYSIWYG user experience , Plus a wealth of themes , People can't help shouting “ It's delicious ”.

But everybody knows that ,Typora1.0 after , It starts charging , Recently, my Mac It's on the computer Typora, Has started prompting me to upgrade . and , Organize my 《 Counter attack Manual of flour dregs 》 When , Because the file is too big ,Typora Very Caton , therefore , reasoning , I decided to use it. VS Code Build a set of MarkDwon Writing environment .

One 、VS Code install

VS Code We don't need to talk about the installation of , Download the installation package of the corresponding version from the official website , Can be installed .

Official website download address ：https://code.visualstudio.com/Download

This is my Windows It's installed on the computer VS Code, Look for the , My top bar 、 The sidebars are all in Chinese , Because Chinese plug-ins are installed ：

Two 、MarkDown Plug in enhancements

Let's take a look at the direct use of VS Code open MarkDown The effect of the document ：

Double column preview can be opened in the upper right corner ：

look , just so so , But there is still room for improvement , We can install some plug-ins to make it better .

1. Markdown All in One

Markdown All in One It is a multi in one MardDown Add ons ：

It claims to support Markdown All the functions required , Including keyboard shortcuts 、 Catalog 、 Auto preview, etc , You can take a look at its extension page , Or warehouse documentation ：

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

2.Markdown Image

Markdown Image It's mainly about MarkDown Insert an extension of the picture in , Support to store pictures in local or third-party drawing beds or objects .

Using this plug-in , You can do something like that Typora Direct copy of local pictures , Then paste in MarkDown, By default, image files are placed locally , It can also be configured to support Imgur, Seven cattle ,SM.MS,Coding Isograph bed .

After installing the plug-in , Some configurations can be made , Go to the configuration page , Search for ：markdown-image, You can configure the relative path , The default picture file is saved in /res Under the path .

Using shortcut keys Shift+Alt+V You can directly paste the copied picture from the clipboard into the document ：

3.Markdown Preview Enhanced

Markdown Preview Enhanced It's right VS Code Preview enhancements , Can improve VS Code Preview experience for .

After installing this plug-in , Click the preview button , Enhanced preview will be used ：

You can also display the contents in the sidebar , But it shows the directory , The whole interface is somewhat cramped .

It also provides multiple preview topics ：

4.Word Count CJK

Word Count CJK Is a plug-in for counting Chinese characters ：

For a man like me, who loves long words , See the number of words in the article , It's also full of sense of achievement .

5.MarkDown Editor

If we just want to Typora What about the WYSIWYG experience ？

I also found a plug-in MarkDown Editor：

After installation , Yes MD File selection Open with MarkDown Editor You can open it WYSIWYG MD The file .

There are other plug-ins ：

• markdownlint：markdow Format checking
• Markdown Preview Github Styling：GitHub Theme preview

You can also experience it .

3、 ... and 、 Drawing bed construction

Use MarkDown writing , There is another important requirement , It's a drawing bed , The article we wrote is to be published ,MD The picture in is saved as a path , The local path cannot be accessed when it is published , So we need to give MD Editor access map bed function .

I used it before. Typora+PicGo+Gitee Set up a picture bed , later Gitee What happened , It's changed to Typora+PicGo+Github, We also follow this line of thought , stay VS Code Build a picture bed on the .

1.GitHub Warehouse configuration

2.1. Create a new warehouse

Create a new GitHub Warehouse ：

• Open , necessary , Prevent access to
• Add one READM file , Prevent the warehouse from having no trunk branches

2.2. Generate token

• Get into settings

  

  • find developer settings

    

    • Create a new Personal access tokens, The time is set to never expire , to repo Authority is enough

      

    • Generated Token Write it down. , Show only once

      

2. Installation configuration PicGo

2.1. install PicGO plug-in unit

stay VS Code Search inside PicGo, install ：

2.2. To configure PicGO

• open PicGo Extended configuration for

• To configure uploader, choice github

• GitHub Related configuration , Take my configuration as an example ：

  • Branch：main, Branch

  • Path： empty , You can also configure a relative path

  • Custome Url： empty ,

    In fact, you can configure one CDN Accelerated url,jsDeliver, It's a free CDN, It seems that it is not available recently , You can also try , How to use it ：https://cdn.jsdelivr.net/gh/ Yours github user name / Your warehouse name @ Released version number ——https://cdn.jsdelivr.net/gh/fighter3/picgo-win/fighter3/picgo-win/pic

  • Repo：fighter3/picgo-win, user name / Warehouse format

  • Token： Just fill in the ones saved before

    

3. Use the drawing bed

• open MD file , Paste a picture from somewhere else , Use Ctrl + Alt + U, You can see that the file was successfully uploaded , And you can preview

Image upload related shortcut keys ：

OS	Upload pictures from the pasted version	Upload pictures from the browser	Upload a picture from the input box
Windows/Unix	Ctrl + Alt + U	Ctrl + Alt + E	Ctrl + Alt + O
OsX	Cmd + Opt + U	Cmd + Opt + E	Cmd + Opt + O

---

use GitHub When the overall picture bed is still not ideal , Upload and access are not stable , We can also do that PicGo In the plug-in, replace the drawing bed with seven cows 、 Or Tencent cloud 、 Alibaba cloud , In general, the process is similar , It's easier .

---

Reference resources ：

[1]. take VS Code Create a comfortable Markdown Editor

[2]. vscode By second Full function What you see is what you get markdown Editor

[3]. stay VS Code Use in Picgo + jsDelivr + Github Build a high-speed stable drawing bed

---

Face slag counter attack series ：

• Face slag counter attack ：Java Basic fifty-three questions
• Face slag counter attack ：Java Set up a series of thirty questions
• Face slag counter attack ：JVM Classic fifty questions , Now the interview is stable ！
• Face slag counter attack ：Java Ask
• Face slag counter attack ：Spring Thirty five questions , 40000 words + Fifty pictures in detail ！
• Face slag counter attack ： Figure 22 、 Eight thousand words 、 Twenty ask , Get it all done MyBatis！
• Face slag counter attack ： Computer network 62 ask , 30000 word graphic explanation ！ Collect quickly ！
• Interview byte , Hung up by the operating system
• Face slag counter attack ：RocketMQ Twenty three questions

---