_config.yml

# These were set with GFM-rouge-configuation.html
kramdown:
    input: GFM
    syntax_highlighter: rouge

GFM-rouge-configuation.html

Liquid highlight with language type: {% hightlight html %}

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;html&gt;</span>
	<span class="nt">&lt;p&gt;</span>Hi world<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/html&gt;</span></code><button class="button--copy">Copy <span class="octicon octicon-clippy"></span></button></pre></figure>


Backticks with language type: ``` html

<div class="highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;html&gt;</span>
	<span class="nt">&lt;p&gt;</span>Hi world<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre>
</div>


Backticks without language type: ```

<div class="highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;html&gt;</span>
	<span class="nt">&lt;p&gt;</span>Hi world<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre>
</div>

Tildes with language type: ~~~ html

<div class="highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;html&gt;</span>
	<span class="nt">&lt;p&gt;</span>Hi world<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre>
</div>

Tildes without language type: ~~~

<div class="highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;html&gt;</span>
	<span class="nt">&lt;p&gt;</span>Hi world<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre>
</div>

github-comments.html

Backticks with language type: ``` html

<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">html</span>&gt;
  &lt;<span class="pl-ent">p</span>&gt;Hello world&lt;/<span class="pl-ent">p</span>&gt;
&lt;/<span class="pl-ent">html</span>&gt;</pre></div>

no-configuation.html

Liquid highlight with language type: {% hightlight html %}

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;html&gt;</span>
	<span class="nt">&lt;p&gt;</span>Hi world<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/html&gt;</span></code></pre></figure>


Backticks with language type: ``` html

<p>```html</p>

	<p>Hi world</p>

<p>```</p>


Backticks without language type: ```

<p>```</p>

	<p>Hi world</p>

<p>```</p>


Tildes with language type: ~~~ html

<div class="highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;html&gt;</span>
	<span class="nt">&lt;p&gt;</span>Hi world<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre>
</div>

Tildes without language type: ~~~

<div class="highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;html&gt;</span>
	<span class="nt">&lt;p&gt;</span>Hi world<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre>
</div>