Markdown Syntax

Markdown Syntax Tutorials

Markdown Code Block Syntax

December 26, 2016 by Murali Shankar Leave a Comment

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

<pre><code>To Add Markdown Code Block Indent 4 Spaces or 1 tab</code></pre>
HTML content or any code content (e.g. angle brackets < > ) within the code block will be considered as HTML entities, which means while converting the markdown to HTML it does loose the actual code output unlike HTML content.
For example:

    <div class="markdown">
       To Add Markdown Code Block Syntax Indent 4 Spaces
    </div>

will be turn into the below HTML code content

<pre><code>&lt;div class="markdown"&gt;
To Add Markdown Code Block Syntax Indent 4 Spaces
&lt;/div&gt;
</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.

Filed Under: markdown, markdown-syntax, markdown-tutorials

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Markdown Code Block Syntax
  • Markdown getting started

Archives

  • December 2016
  • August 2016

Categories

  • markdown
  • markdown-syntax
  • markdown-tutorials

Copyright © 2018 · Beautiful Pro Theme on Genesis Framework · WordPress · Log in