MarkDown + VSCode + PicGo: Build a simple writing platform

preface

In recent years, I have been using Markdown to write my blog. To be honest, I have seen that some online editing platforms of Markdown still prefer to use Markdown for writing, but In fact, Markdown has made a lot of fault tolerant processing for Markdown syntax. Although it seems very convenient, it is very troublesome once transferred to other platforms, so I will use Markdown in the next few days Use VSCode for writing. And then distributed to all platforms.

In fact, I switched to VSCode writing for the following reasons.

1. Jane book file review is too harsh for programmers, although a lot of that kind of training institutions to shield the publicity of the article, but like me a small white random chain directly to the extreme trial article lock, to tell the truth, is really uncomfortable.
2. MarkDown editors like the Nuggets are completely hand-me-down plugins, without the quick and easy drag-and-drop operation of uploading images.
3. The pictures of the article I wrote before are all uploaded to Jane book, but now Jane book has added anti-theft chain to the pictures, so it is not easy for the Internet to use these pictures to collect wool.
4. CSDN’s MarkDown has a lot of hints, but it is too messy in the writing area with different font sizes. Although it can quickly correspond with the preview area, the assumptions are too messy, which is absolutely unacceptable to me in the late stage of OBSessive-compulsive disorder.
5. VScode I have been used in the usual development, plus VScode plug-ins more, frequent updates, strong combination.
6. As for the map bed, I used the OSS storage of Ali Cloud when I was doing the project, and I feel ok. I happen to have a spare OSS, and the image processing of ALI Cloud OSS is also ok. After establishing the rules, I can play happily.

So, let’s talk about how to build our VSCode writing platform.

VSCode

The download process of VSCode will not be described, go directly to the official download of VSCode is OK.

VSCode supports MarkDown by default, but we need to download the following plug-ins to improve our writing happiness.

ICON	The plug-in	role
	Markdown All in One	Markdown’s large collection of shortcuts to operations
	Markdown Preview Github Styling	Markdown provides a GitHub style live preview within the editor
	Markdown PDF	Markdown documents are converted to various formats
	PicGo	Markdown chart bed plug-in
	Markdown Shortcuts	Markdown shortcut key

If you don’t have VSCode set up to autosave, it can be very difficult to use, because sometimes you forget to use CTRL + s to save, and you will have to start your blog all over again. In this case, you will probably just fly to….

OK, let’s see how we can set the autosave function. Click the Settings button in the lower right corner of VSCode, and then click Setting/ Settings to set it.

Then search Auto Save and set auto Save → afterDelay/Auto Save Delay → 1000 as shown in the figure below.

Photo

The above mentioned some Settings of VSCode, and how to add pictures in the blog. In fact, the schemes I found on the Internet are nothing more than the following ways.

1. The image upload directly to the corresponding blog platform, this approach is simple convenient and free, but has a fatal flaw, that is restricted platform, if the platform once the rules have changed, such as Jane books now add the image hotlinking prevention, so can’t you can forward more platform, restricted platform. But is not to say nothing ah, such as free white piao map bed not sweet?

2. The solution, which I found in the Ultimate Markdown tutorial, is simply to convert the image to Base64 and add it to the article. The advantage of this scheme is that the image does not depend on the network, but the operation steps are cumbersome, and this approach will make the article too cumbersome, the length of Base64 is daunting ~ 😂 🤣 😂

• First of all, I need to convert the image to Base64 format, here I directly get the image mentioned in the above article to Base64 website. Then right click to copy the address of the image as shown below.

  

• Then fill the picture address into the picture address location below.

<p> <img width="50" SRC ="50" > </p>Copy the code

• The specific effects are shown below.(This form is not supported by the simple book mining preview.)

• If you think that the Base64 image linking process can be folded in VSCode, the editor is much cleaner after folding.

3. Finally is a way to figure the bed, the so-called diagram is to find a bed can upload pictures of the Internet space, and then get the link of the picture, like a lot of figure of bed now, for example, many people do figure in CSDN bed, but the figure of the white piao bed is not so stable, and in recent years, as some seven NiuYun, tencent cloud OSS, ali cloud OSS on price are all very beautiful, And there are a lot of novice preferential activities, so you can choose a platform to build a map bed. For VSCode graph bed plug-in, I use PicGo here, it supports more platforms, and not only can be used in VSCode, it also supports multi-platform client, is relatively simple. Let’s take a look at how we build our chart bed based on Ali Cloud OSS.

• First of all, we need to go to ali Cloud official website to log in our account, enter the console, click object storage OSS in the left position, or find object storage OSS through product and service options to open. Since I have already opened the OSS, WHAT I bought is a 40GB space OSS, which is relatively cheap, and children can choose according to their actual use.

• Select create a Bucket as shown in the figure below.

• Read and write permissions to public read OK.

  

• After the Bucket is created, we don’t need to manipulate the Bucket yet, we need to add a Bucket management account. First, select the Access Key, as shown below.

• Then select the subuser Access Key, as shown.

• Create a user to fill in as shown, note to select the form of programmatic access.

• Once created, the AccessKey ID and AccessKey Secret should be saved. Note that you will never see these data again once you leave the current page. You’ll just have to create a new account.

• After creating the authorization management account, we go inside the Bucket to create a folder. Of course, you can create multiple folders for different management.

  

• Suppose we create a folder for blogs as follows.

  

• After the creation, we need to do some simple configuration. First, we need to configure the authorization management account. Select the Bucket authorization policy as shown in the figure below.

• Click Settings, then add Authorization, add a new authorization account. As shown in the figure below.

• Then add your previous account as shown in the figure. As shown in the figure below.

• At this time, we have actually completed the basic configuration of Ali Cloud OSS, but in order to make the use of more convenient, for example, a picture set different sizes, we also need to carry out image processing. Figure data processing → Picture processing Enter the picture processing module.

• And then here you can import styles, or create styles directly, and I’m going to share the styles THAT I use a lot with kids, and they just need to import styles.

  Style portal password: UL30

  

• After the import is complete, it should look like the following figure.

• So how do we use it? Let’s say we upload an image. Then we get the link, at which point we can customize the width of the image as follows. Assume the original link looks like this.

http://saodongblog.oss-cn-beijing.aliyuncs.com/blog/5.png
Copy the code

• To set the width of the image to 200, simply add /w200 to the suffix, as shown below.

http://saodongblog.oss-cn-beijing.aliyuncs.com/blog/5.png/w200
Copy the code

• Ali cloud oss related Settings have been completed, next we will configure PicGo in VSCode. Still open user Settings. As shown in the figure.

• Then choose extension → PicGo, first configure ali cloud OSS, here my Bucket name is dongdongblog, AccessKey ID and AccessKey Secret is our previous save, and then Pic Bed: Current is set to Aliyun, as shown below.

• Then, in order to ensure the uniqueness of the image Name, we try to add the timestamp when uploading the image. Here, we need to set the Custom Upload Name, as shown below.

${fileName}-${dateTime}${extName}
Copy the code

• Once that’s done, how do we upload our images quickly? The specific operations are as follows, which have been given by the authorities, as shown below.

The end of the

Ok, the article is basically over here, this blog is my first attempt to use VSCode for writing, the overall feeling is very comfortable, if you like the article welcome to like comments, SAO Dong here thank you boys shoes.