Article Directory
1. What is Markdown?
When it comes to Markdown, you may often hear this sentence:
Markdown is a lightweight web markup language.
But in fact, just look at this definition, or do not understand, then we look at Markdown inventor John Gruber how the introduction of 1 :
Markdown is a tool for web writers to convert text to HTML. You can write in a plain text format that is easy to read and write, and Markdown will convert it into XHTML (or HTML) format.
From this, we can simply understand that Markdown is a document editing tool, just like using Word.
2. Why use Markdown?
Seeing this, you must have a question in your mind: Since it is also an editing tool, is it good to use Word?
Recall that when writing an article in Word,
- Does it take a lot of time to set the title, font size, spacing, bold and other typesetting work?
- If you need to insert code, is the displayed effect unsatisfactory? We hope to highlight functions and some statements like in a code editor, and look comfortable;
- Insert a URL link to display a long list of URLs, which is not concise and beautiful enough. It is best to display as a text description of the link, and click on the link to reach the URL.
Now don't worry about these problems anymore, just use Markdown to solve them perfectly. In addition, Markdown has the following benefits:
-
The Markdown editor platform is unified. If you have used an online writing platform, you may find that on platforms that use a rich text editor, such as Douban, you need to edit and adjust the title, link, etc. after entering the document, and platforms that support the Markdown editor, such as CSDN, after entering the document, the display is more consistent, the title, bold, link, etc. are all used unified grammar, no need to edit the content twice.
-
There are many tools that can help us easily convert Markdown documents into pdf or word documents . In this way, writing in Markdown, easy typesetting, and then converting, saves a lot of time for typesetting and editing.
3. How to use Markdown?
To use Markdown well, you must first learn its syntax. Don't worry, the content is not much and easy to remember. Of course, a better way is to master it in practice: you can refer to my example format and type in the content yourself and practice several times . Where to practice? Don't worry, the next section will introduce the use of the editor. You can browse the content of this section first to get a general impression of the use of Markdown.
3.1 Title
To use #, add a few headings to the front #, and the display effect is shown in the figure below. Here to explain, I used the contrast mode, the left side is the editing input, the right side is the preview display, and the following example is the same.
You can compare the font size and line spacing of titles at all levels. In addition, you may notice that #there is a space between the text. In use, I found that some editors require a space, and some editors do not require it and can recognize it. Therefore, it is recommended to add a space.
3.2 Bold, Italic
The *specific method and display effect are shown in the figure:
3.3 Reference, code
Reference use >.
Inline code display, use `symbol before and after the code (corresponding to the keyboard position above the Tab key). Code block display, use ``` symbol before and after the code. In addition, the language used as a comment (such as python) can be added in front of the code block for better display. The specific method and display effect are shown in the figure:
Sometimes we need to display the results of running the program in the article, then we can use the method shown in the figure, adding text comments before the results.
3.4 List
Use -or *+ space format, the specific method and display effect are as shown in the figure:
pay attention to the ordered list, first, if we use the 数字+ .+ 空格format to input, the editor will recognize it as an ordered list, and subsequent lines will be automatically numbered. Secondly, if you always enter 1+ .+ space, the actual displayed effect is also the sequential number.
3.5 Official
Before and after the formula $, you can see the example in the figure below. For more formulas, please refer to the Latex grammar on the Internet.
3.6 Form
The example in the figure shows the writing of the table. Please pay attention to one point. If you want to convert the document later, especially the conversion to word, you must first check whether the table can be converted normally. I have encountered the display after the conversion to word The table is the original editing format on the left side of the figure.
3.7 Insert URL link and picture
As shown in the example in the figure, fill in the text description in [] and fill in the link address in (). There is one more image link before the URL link !. The text description of the image link is generally not displayed, but it is recommended to fill in, because sometimes there may be problems with the image loading, then the text description will be displayed, at least a little image information can be provided.
If you are careful, you may find that the picture link is easy to handle if it is a network. If it is a local picture, when the document is imported into a network platform (such as CSDN), the picture cannot be displayed normally. You need to re-upload the picture to import and generate the link. The solution to this problem is to store the pictures on a network server, so that the local pictures "turn" into a network picture. We can refer to the network link to view the picture. This is the principle of the image bed. But I'm sorry, I haven't used the picture bed yet. After I use it, I will write an article to share with you.
3.8 Typesetting specifications
Finally, I want to add that when writing in Markdown, it is helpful for us to understand a little typographical specification, so that the displayed article is neat and beautiful, and the reader is comfortable to read. I recommend to everyone a good article that I read about typesetting standards: it is not enough to know how to use Markdown. You must know the typesetting standards .
4. Where to use Markdown?
To write Markdown documents, a handy editor is essential. Based on the introductions and recommendations of netizens, I have experienced several well-received editors. Let’s introduce them one by one and see which one you like?
4.1 Write and display: Typora
Click on Typora official website to download Typora.
The biggest feature of Typora is that it is displayed when you write it, a bit like the effect of a typewriter (Typewriter), so it seems that the name is very appropriate. Please take a look at the -27-second short video of Typora's use to show more about this editing experience.
Typora's pages are clean and tidy, and it is very convenient to insert pictures, formulas, etc., so it is loved by many Markdown writers.
1. One-click to insert a picture.
Using Typora, you can easily insert a picture. If it is a screenshot, use the Ctrl+ Alt+ Vkey to paste it into the document; if it is a local picture, you can drag the picture from the storage folder to the editing position in the document. Then, don’t worry about the rest, Typora will do it all for us, including automatically copying the image to the current file name.assets folder (if not, it will automatically create a new one), and the image link will also be generated in the Markdown document. Is it very caring?
2. Document conversion
As shown in the figure below, click File> Export on the menu bar, and then select the file type you want to convert.
However, I don't use Typora often now, mainly because I still don't adapt to write and display, and I can't compare the original editing settings. If you have a small partner who is as used to me, you can check out the next two editors.
4.2 Control display: Atom, VSCode
These two editors are similar, both can be previewed and displayed in comparison. Atom is produced by Github and can be downloaded from the Atom official website . VSCode, the full name is Visual Studio Code, is produced by Microsoft and can be downloaded from the VSCode official website .
One thing, please note that to make these two editors play the best performance, you need to install plug-ins (Packages/Extensions). The following is an example of VSCode that I am using.
1. Install extensions (Extensions)
Click on the menu bar File> Preferences> Extensions, as shown in:
then search for and install the extension in the search field: Markdown All in One, Markdown Preview Enhanced, Paste Image. I give an example in the figure below. Enter "markdown preview enhanced" in the search bar, and there will be a installgreen button shown as in the lower right corner of the uninstalled extension . Click to install. Here because I have installed the extension, it is not displayed, and the installbutton is displayed below the extension that I have not installed .
2. Extended settings
In addition, the Paste Image extension needs to be set after installation. Click File> Preferences> Settings, enter "Paste Image" in the search bar, and find in the results:
Fill in the Name Prefix column; fill ${currentFileNameWithoutExt}in the
Path column, ${currentFileDir}/imgsas shown in the figure below.
3. Preview view and article directory
Reopen the document, you can see the preview button appears on the upper right, click the first button indicated by the arrow in the figure below, and the Preview pane will appear.
In the preview view, click the first button indicated by the arrow in the figure below to display the content of the article. The right side of the figure shows the content of this article. The directory display is the outline of the article, which is very helpful for us to clarify the context of the article when reading and construct the article frame when writing.
There is another way to display the article catalog, which is to add it at the beginning of the article [TOC]. The display effect is similar to the catalog view in the above figure. The catalog at the beginning of this article is generated in this way. You may wish to give it a try to see how it works.
4. Quick map
Because the Paste Image extension is installed, screenshots and stickers are very convenient. Take the Windows system I use as an example. You can directly use the Windows+ Shift+ Skey to take a screenshot , or use the Alt+ Akey after opening WeChat , and then open the document where you want to insert the picture. Use the Ctrl+ Alt+ Vkey, the screenshot will be automatically copied to the Markdown document directory In the imgs folder, an image link is automatically generated in the document.
But compared with Typora, VSCode still has a shortcoming: you can’t drag the local picture to the document to automatically insert the picture, or it may be that I haven’t installed the required extensions. If you know, please tell me, thank you!
5. Document conversion
In the preview view, click the right mouse button, and the menu bar shown in the figure below will appear. At this time, you can select the desired file type to convert.
4.3 Multi-platform collaboration: Evernote
Sometimes we may write a little text on this computer, and then change the place or computer. Do we have to transfer the document to edit it?
Of course, you can use a multi-platform tool: Evernote. Evernote now incorporates the functions of Marxico and can edit Markdown articles. In this way, it is more convenient to collect inspiration and creativity for writing. The first draft of my article was written on Evernote.
As shown in the figure below, after opening Evernote, there is a pane icon on the right of the new note (the arrow in the figure indicates the position). After clicking it, there are multiple document formats. Select "Markdown" to create a new Markdown document.
After opening the document, there is an edit/preview switch button on the upper right. The arrow indicates the position in the figure below. After clicking, the document can be in the control editing mode (similar to the display mode of VSCode) and preview mode (similar to the display mode of Typora, but cannot be edited ), so that if you only look at the document display effect, you can click this button to switch to the preview mode.
Please note that you can edit and write Markdown documents on Evernote computer, but you can only see the preview effect of Markdown documents on mobile phone, but you cannot edit and modify them.
5. My Markdown experience and experience
Many people who read this article may intend to use the Markdown editor, or just start using it and hesitate to learn Markdown in depth. Therefore, I will talk about how I started to learn to use Markdown and provide you with a reference.
At first I saw recommendations and introductions to the Markdown editor on the Internet, but in practice I didn't use it, so I haven't learned it for a long time.
Later, I studied and watched open source projects on Github, and the Readme documents were all written in Markdown format. I still remember that I just downloaded a project and saw the original Markdown editing document, which was full of various markup symbols, and the head was so big... However, after learning to use the preview, the display effect was different. It was concise and focused. Later, I practiced small projects, imitated the format of these documents, and wrote Readme documents according to Markdown syntax, and thus started the road of using Markdown.
At the same time, I have some notes and experiences in the programming study, and I want to write them to share with you. At this time, I realize the importance of the Markdown editor. It is very convenient to insert codes, formulas, links, pictures, etc. in Markdown documents, and the title, bold, etc. can be set while writing, and the edited article layout is simple and clear. As a result, I also extended to the writing of other articles, such as book reviews , English audio book recommendations, etc.
In addition, I found that you can also convert Markdown documents into WeChat official account article format. Share the online converter I use: WeChat official account formatting editor . If you find a good online document conversion tool, don’t forget to share it. Oh, thank you!
In the process of use, I think Markdown is an editing tool that can save a lot of time in the follow-up as long as a small amount of time is spent in the initial mastery of simple grammar. The most important thing is to start using it, starting from editing the first simple Markdown document .
If you feel good article, please thumbs up support, thank you!
John Gruber's blog page: https://daringfireball.net/projects/markdown/ ↩︎