Types of Code Blocks
We have two types of code blocks in Markdown, and these are:
Indented Code Blocks
In the indented code block, we indent each line by putting four spaces before the text. If we add any blank line in this indented code block, then this line is also included in the indented code block. When we write a new line or paragraph that is not indented, then the indented code block ends and starts a new paragraph from this line.
Fenced Code Blocks
In the fenced code block, we have to place three (“`) backticks at the start and the end of the code block. We can also do this by putting tildes (~~~) in place of backticks. Remember one thing; you have to use the same symbol at the start and end of the code block and also put the same numbers of symbols at the starting and end of the code block.
Example # 01: Indented Code Block
The Visual Studio Code is utilized in this guide for doing the markdown codes. We have to open the new text file in Visual Studio Code and then select Markdown as the language. When we select this language, then the file extension, which is “.md,” is automatically added to this file when we save it. For doing the Markdown codes, we first install the extension of this Markdown. For this, we open the extensions from the setting which is present on the left bottom of Visual Studio Code and then install the “Markdown All in One”. Now, this extension is installed.
After this, for obtaining output, we required the preview window. We can easily open the preview window from the top right corner of the visual studio code. Now, both the text editor and the preview window are open in front of us. In the text editor, we are adding simple text and also the code block. We write a paragraph here, and we don’t indent that paragraph. As we have discussed, for creating the indented code block in Markdown, we have to indent the text or paragraph four spaces. We create four spaces and then add the text so that the second line will be inserted as the code block.
After this, we add another paragraph that is not indented, so it is not included in the above code block. Below this, we again add four spaces and then add a new paragraph, so it is also the indented code block. Then, we again place a simple paragraph without indenting, so the code block ends at the above line.
In the preview window, this outcome is rendered. Here, the indented lines are shown as a code block. We have generated these code blocks by adding four spaces before the paragraph. These are the indented code blocks.
Example # 02: Fenced Code Block
In this code, we are making fenced code blocks by putting three (“`) backticks at the point where we have to create the code block. In this fenced code block, we don’t need to indent the lines which we want to add to the code block. After adding (“`), we put the text and then again place (“`) at the end where we want to close this fenced code block. We add some text and a function in this fenced code block.
After this, we add one line outside the fenced code block and then again generate a new fenced code block by placing (“`). It contains all data which will add to this code block and then close the fenced code block with the help of (“`). So, we have generated two different fenced code blocks here.
Here, both fenced code blocks are shown, and all the data which we have added above is shown in the image. The text which was not added in between these (“`) backticks symbols is not shown inside the fenced code blocks. These lines are displayed separately where we have added them.
Example # 03
We first add a paragraph here which is not indented, and after this, we put a new line that is indented. So, it generates the code block here. The line or paragraph below this is also indented, so it will also add to this code block. Now, we insert a line space and then again place four spaces in indented lines. Here, this line space doesn’t affect the code block. The indented code block ends only when we have added a paragraph that is not indented. Below, we have added two-line spaces, and the code block will not end here. We add one more indented line after these two-line spaces. Now, we have added a paragraph that is not indented here. So, the indented code block ends here.
Here, you see that the line spaces are also added in the indented code block, and this indented code block ends where we have added the paragraph without indenting it.
Example # 04
Here, we apply some formatting to the simple paragraph and also to the paragraphs which we have indented. First, we add a paragraph that is not indented and place two asterisks at the start of the paragraph and two asterisks at the end of the paragraph to make this paragraph bold. After this, we have added the indented paragraph and also placed this indented paragraph inside four asterisks as we have added the above paragraph.
Now, we end this indented code block and write a paragraph inside two asterisks to make it italic. Then, we indent a new paragraph below this inside two asterisks. After this, we have inserted a paragraph that is not indented, so the above code block ends, and the simple paragraph is now added. We place three asterisks at the start and three at the end of this paragraph, so it will display in bold and italic. We also write the indented paragraph below this, in the same way as the above paragraph inside six asterisks. Now, check the output below.
Here, all formatting is applied to the simple paragraphs, but those paragraphs which are added in the indented code block are displayed without applying any formatting. The paragraphs inside the indented code blocks are not displayed in italic or not in bold but are displayed in a simple format. And the simple paragraphs which are not indented are formatted, and they are displayed in bold or italic format, as we have added in the code. All asterisks which we have added with the indented code block paragraphs are also displayed in the output.
Conclusion
The code blocks are discussed in this guide. We have explained two code blocks here, which are fenced code blocks and indented code blocks. We have also explained how to generate the “indented code block” in the Markdown as well as the “Fenced code block” in the Markdown. We have also created both code blocks in this guide and have shown here how to do that. We have presented proper guidelines here for creating the code blocks in the Markdown in this guide.
