Code highlighting
If you need to showcase snippets of code, here's how to.
v1.2
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:
HTML
<h1>This is a sample HTML code block</h1>
<p>I'm text!</p>
PHP
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"><code></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"><pre></code> and <code class="highlighter-rouge"><code></code> for a code block.</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><h1>This is a sample code block</h1>
<p>I'm text!</p>
</code></pre></div></div>
<p><br /></p>
<h4 id="stylised-code-block">Stylised code block</h4>
<p>If you use <a href="http://pygments.org/">Pygments code formatting</a> you can use <a href="http://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/css/ebi-code.css">ebi-code.css</a> for syntax highlighting, like so:</p>
<link rel="stylesheet" href="//wwwdev.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/css/ebi-code.css" />
<p><br /></p>
<h5 id="html">HTML</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h1></span>This is a sample HTML code block<span class="nt"></h1></span>
<span class="nt"><p></span>I'm text!<span class="nt"></p></span>
</code></pre></div></div>
<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">'<h1>This is a sample PHP code block</h1>'</span> <span class="o">.</span> <span class="s1">'<p>I'</span><span class="nx">m</span> <span class="nx">text</span><span class="o">!</</span><span class="nx">p</span><span class="o">></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></pre></div></div>
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.