Code highlighting

If you need to showcase snippets of code, here's how to.


Inline code highlighting

If you want to do a bit of inline-code, use the the <code> element or span.code.

Generic code block

Use a nested combination of <pre> and <code> for a code block.

<h1>This is a sample code block</h1>
<p>I'm text!</p>

Stylised code block

If you use Pygments code formatting you can use ebi-code.css for syntax highlighting, like so:

<h1>This is a sample HTML code block</h1>
<p>I'm text!</p>

function text() {
  print '<h1>This is a sample PHP code block</h1>' . '<p>I'm text!</p>';
  return true;

Code highlighting HTML

<p><span class="tag">v1.2</span></p>

<h3 id="inline-code-highlighting">Inline code highlighting</h3>

<p>If you want to do a bit of <code class="highlighter-rouge">inline-code</code>, use the the <code class="highlighter-rouge">&lt;code&gt;</code> element or <code class="highlighter-rouge">span.code</code>.</p>

<h3 id="generic-code-block">Generic code block</h3>

<p>Use a nested combination of <code class="highlighter-rouge">&lt;pre&gt;</code> and <code class="highlighter-rouge">&lt;code&gt;</code> for a code block.</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;h1&gt;This is a sample code block&lt;/h1&gt;
&lt;p&gt;I'm text!&lt;/p&gt;
<p><br /></p>

<h4 id="stylised-code-block">Stylised code block</h4>

<p>If you use <a href="">Pygments code formatting</a> you can use <a href="">ebi-code.css</a> for syntax highlighting, like so:</p>

<link rel="stylesheet" href="//" />

<p><br /></p>

<h5 id="html">HTML</h5>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;h1&gt;</span>This is a sample HTML code block<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;p&gt;</span>I'm text!<span class="nt">&lt;/p&gt;</span>
<p><br /></p>

<h5 id="php">PHP</h5>

<div class="language-php highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">function</span> <span class="nf">text</span><span class="p">()</span> <span class="p">{</span>
  <span class="k">print</span> <span class="s1">'&lt;h1&gt;This is a sample PHP code block&lt;/h1&gt;'</span> <span class="o">.</span> <span class="s1">'&lt;p&gt;I'</span><span class="nx">m</span> <span class="nx">text</span><span class="o">!&lt;/</span><span class="nx">p</span><span class="o">&gt;</span><span class="err">'</span><span class="p">;</span>
  <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>

Code highlighting Style

You can find the original source of the CSS as .scss

Code highlighting

Have a use case that's not covered?

Please open an issue in the tracker. We'll update this living pattern library with your feedback.