In the previous tutorial we have learned about what is markdown and getting started, and this tutorial we will learn about markdown code block syntax.
markdown code block syntax is used to indicate span of code, unlike the pre-formatted code it indicates the actual code within normal paragraph.
Default Markdown code block syntax
Code blocks are used for visualizing the programming or markup source code, though it is not highlight the syntax. The default markdown wraps a source code in both <pre> and <code> tags. But some of them (Markdown Here & Github Markdown) derived default markdown to highlight the syntax based on programming languages. First let us see the default markdown code and later will see the code highlight syntax.
In order to include a code block in Markdown, simply indent the line of block with 4 spaces or 1 tab.
Example Markdown code block syntax
This is an normal Paragraph
To Add Markdown Code Block Indent 4 Spaces or 1 tab
the above text will generate equivalent HTML content with code block, as mentioned in the the below.
Equivalent HTML content
<div class="markdown">
To Add Markdown Code Block Syntax Indent 4 Spaces
</div>
will be turn into the below HTML code content
<pre><code><div class="markdown">
To Add Markdown Code Block Syntax Indent 4 Spaces
</div>
</code></pre>
Markdown code block with syntax highlighter
The default markdown not supports the code block with syntax highlighter and the Markdown Here and GitHub Flavored Markdown supports code block with syntax highlighting for dozens of programming languages. Markdown code block syntax should starts with three single apostrophe character with programming language name and it should end with another three single apostrophe character.
Let us see simple markdown code block with syntax highlighter example
```javascript var s = "JavaScript syntax highlighting"; alert(s); ``` ```python s = "Python syntax highlighting" print s ```
The above markdown code block syntax will produce the output with syntax highlighted like below.
Markdown code block syntax output:
var s = "JavaScript syntax highlighting";
alert(s);
s = "Python syntax highlighting"
print s
From the above you will clearly know the markdown derived syntax highlighter will differentiate the syntax based which language you rendered.
Hope this tutorial will be useful to write markdown code block syntax, if you have any doubts please let us know in comments.
Leave a Reply