Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
# These were set with GFM-rouge-configuation.html
kramdown:
input: GFM
syntax_highlighter: rouge
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>
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>
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.