Just start a block with {% highlight %} and end it with {% endhighlight %}.

Example for myLinter Syntax Highlighting in post markdown, myLinter needs to be replaced with a value of the table below:

{% highlight myLinter %}
echo "Hello KargWare in Jekyll"
{% endhighlight %}

The Output will be


<pre>
    echo "Hello KargWare in Jekyll"
</pre>

Table of Supported Syntax. See the full list Jekyll - Syntax Highlighting, supported languages.

Name Aliase Description
console terminal A generic lexer for shell sessions
csharp c#,cs a multi-paradigm language targeting .NET
docker dockerfile Dockerfile syntax
html - HTML, the markup language of the web
javascript js JavaScript, the browser scripting language
markdown md, mkd Markdown, a light-weight markup language for authors
php php3, php4, php5 The PHP scripting language (php.net)
plaintext text A boring lexer that doesn’t highlight anything
powershell posh, msshell PowerShell
shell bash, zsh, ksh, sh Linux / Unix shell
typescript ts TypeScript, a superset of JavaScript
xml - XML
yaml yml Yaml Ain’t Markup Language (yaml.org)

Example for console (Windows terminal) Syntax Highlighting:


{% highlight console %}
echo "Hello KargWare in Jekyll"
{% endhighlight %}

Example for shell (Linux terminal) Syntax Highlighting:


{% highlight shell %}
echo "Hello KargWare in Jekyll"
{% endhighlight %}

Example for powershell Syntax Highlighting:


{% highlight powershell %}
Write-Host "Hello KargWare in Jekyll"
{% endhighlight %}

Use code fence inside another code fence block

There are two ways to start a code fence block:

  • ``` Three times a back tick
  • ~~~ Three times a tilde

When it is needed to use a code fence inside a code block you need to encode it. The idea is to combine both code fence start elements. Use the 3x tilde as outer block and the 3x back tick as inner block.

When the code fence styles are mixed, the rule MD048 needs to be disables.

Syntax Highlighting in Jekyll > v4.0

Code-Fencing: code block surrounded with ` ``` `

  • TODO 1: _config.yaml
  • TODO 2: Steps (Download css, copy to _sass, include css in post-layout)
  • TODO 3: line numbers
  • TODO 4: Add html output with <samp> element
  • TODO 5: Add screenshot of result
  • TODO 6: Frontmatter uses-codesyntax: true, line-numbers-codesyntax: hidden
  • TODO 7: {: #customID .customClass customAttr=”value”}

The custom attributes codelabel and filename will be add to the output <table> element, together with the custom ID #code-example-1. Additional classes have an leading ., here it would be the class myCustomClass.

{:codelabel="XML" filename="example.xml" .myCustomClass #code-example-1}
```
<?xml version="1.0" encoding="UTF-8"?>
<MyXML>
    <FirstElement />
    <SecondElement attr1="true" attr2="100.8">
        <ThirdElement />
    </SecondElement>
</MyXML>
```

The block from above in real usage

<?xml version="1.0" encoding="UTF-8"?>
<MyXML>
    <FirstElement />
    <SecondElement attr1="true" attr2="100.8">
        <ThirdElement />
    </SecondElement>
</MyXML>

The result (in rendered html) of the code block above (line numbers will be generated, but the column is invisible)

<div class="language-xml myCustomClass highlighter-rouge" codelabel="XML" filename="example.xml" id="code-example-1"><div class="highlight"><pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
</pre></td><td class="rouge-code"><pre><span class="cp">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span>
<span class="nt">&lt;MyXML&gt;</span>
    <span class="nt">&lt;FirstElement</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;SecondElement</span> <span class="na">attr1=</span><span class="s">"true"</span> <span class="na">attr2=</span><span class="s">"100.8"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;ThirdElement</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;/SecondElement&gt;</span>
<span class="nt">&lt;/MyXML&gt;</span>
</pre></td></tr></tbody></table></code></pre></div></div>

Visual Studio Markdown linter

  • MD031 Fenced code blocks should be surrounded by blank lines
{: codelabel="plain" #customID .customClass customAttr="value"}
{% comment %}<!-- markdownlint-disable MD031 -->{% endcomment %}

```plaintext
My fenced code
```

{% comment %}<!-- markdownlint-enable MD031 -->{% endcomment %}

Other Blog Posts to Syntax Highlighting