Author: contr4l_
Introduction to VsCode #
VsCode is a text editor released by Microsoft. It has gradually become one of the favorite text editors for the new generation of programmers due to its free functionality, rich plugin support, and high level of customization. (Competitors include VIM with a steep learning curve, Sublime Text with licensing issues, Eclipse or NotePad++ with relatively outdated UI interfaces)
Introduction to Markdown #
Markdown itself is a syntax rule. We can simply understand that when we enter text in a certain format, a powerful rendering engine can display it as the desired display effect, such as bold, underline, quotes, chapter and paragraph hierarchy, hyperlinks, code blocks, and so on.
Compared to traditional Office operations, the biggest help of Markdown to writers is that it allows writers to focus on the content itself rather than the format. At the same time, it greatly reduces the frequency of mouse usage during the editing process.
In this tutorial, we will install the Markdown plugin in VsCode to meet our need for a text editor that supports Markdown syntax and real-time preview.
VsCode Installation #
Download link, supports Windows/Linux/MacOS
Double-clicking to run will display the following window (usually I would recommend not to localize the interface)
Common shortcuts:
- Ctrl+N, new file
- Ctrl+S, save file
- Ctrl+Shift+P, enter function selection
- Ctrl+P, enter file selection
- Ctrl+B, open/close sidebar
- Ctrl+F, search within text
- Ctrl+Shift+F, global search
Plugin Installation #
In VsCode, plugins (Extensions) are one of the most important features. They provide a large number of additional functions for ordinary text editors in a plug-and-play manner. They can greatly improve the efficiency of workers with specific purposes. At the same time, all interested developers can create their own plugins and publish them to the Market. Most of them are open source and free, and a few may provide additional paid functions (such as the code completion tool Tabnine).
In the VsCode interface, press Ctrl+Shift+X to enter the plugin interface, as shown in the figure below. The INSTALLED section shows the plugins currently installed on this machine.
In the search box above, enter "Markdown" and press Enter. We can query the Markdown-related plugins in the current plugin market. We select Markdown All in One and click Install to install it. (Here, because I have already completed the installation, it shows Uninstall, which means uninstallation 😄)
Markdown Real-time Preview #
First, press Ctrl+N to create a new document and save it as Example.md (VsCode can determine the syntax to execute highlighting based on the file extension)
We enter the following text in Markdown syntax:
# Heading 1
## Heading 2
This is the content
`This is inline code`
**Bold effect**
~~Strikethrough effect~~
> Quoted content
Then press Ctrl+Shift+P to bring up the function selection box:
We enter "Preview" and select "Markdown: Open Preview to the Side"
My judgment here is wrong. VsCode natively supports Markdown and does not require installing plugins, but the plugin functionality is worth introducing separately.
You will get the following effect:
Then you can freely edit the content in the left box, and the rendered effect will be displayed synchronously on the right side.
Exporting to Other Formats #
If we want to obtain a file (such as PDF) that has the same display effect as the right side, we can install the plugin shown in the figure below, and then use Ctrl+Shift+P to search for related functions and export.
This way, we can get the following file:
Others #
There are many other ways to play with VsCode and Markdown, such as support for LaTeX, manual input of formulas, and linkage with HTML syntax, etc. Interested friends can continue to search for knowledge and learn.