A Step-by-Step Guide to Adding Code Fenced Blocks with GitHub and Bitbucket Examples

Sometimes, programming blogs or repositories such as GitHub and bitbucket need to display programming code to preview code and with nice color formatting styles.

code can be Java,json, CSS or HTML, or Python.

Markdown code fenced blocks

Markdown has support for code fence blocks as part of the native build.

Code block always starts with three backticks ````code type in a new line end with three backticks in a new line.

Here is an example of code block syntax

```java
This is an example of markdown code fence blocks.
\```

example

java is an optional language name and is used to highlight code syntax colors for a given code.

Markdown only supports code fence blocks but does no support code type natively.

Many engines such as GitHub and bitbucket supports code type for beautiful syntax color highlight. Here is an example code fence block


\```

example markdown code fenced blocks.

\```

Renders on the web page

example markdown code fenced blocks.

It generates the following HTML

<div class="highlight">
    <pre tabindex="0" class="chroma">
        <code class="language-fallback" data-lang="fallback">
            example markdown code fence blocks.
        </code>
    </pre>
</div>

Write syntax highlight code in Markdown

Codetype is used to highlight the source code with formatting and syntax colors.

It supports the following code languages.

codetype	Language
javascript,ECMAScript,js,jsx, node	javascript
html	html
console, shell	Shell programming
bash,sh,zsh	bash commands programming
dos,cmd,bat	DOS commands and programming
ps, powershell	powershell commands programming
properties	properties files
python	python language
xml	xml,xslt
json	json content
yaml,yml	yaml content
toml	toml
php	php code
cs	C#, .net code
rs,rust	Rust programming code
swift	Swift programming
ts,typescript	Typescript program code
scala	Scala
jsx	React
R	R programming
objectivec,objc	Objective C
lua	Lua
julia,jl	Julia
ocaml,ml	OCaml
pl,perl	Perl

Example for display C# code in markdown


``` cs
Console.WriteLine("Markdown fenced code example");
\```

Render on page

Console.WriteLine("Markdown fenced code example");

Generates html

<code class="language-cs" data-lang="cs">
    <span class="n">Console</span>
    <span class="p">.</span>
    <span class="n">WriteLine</span>
    <span class="p">(</span>
        <span class="s">
            "Markdown fenced code example"
            </span>
        <span class="p">);</span>
</code>

Markdown - Code Fenced

Markdown code fenced blocks

Write syntax highlight code in Markdown