Code

Different type of components and elements to display a code block.

Simple code blocks

Here is basic usage of tags like code, pre, kbd, var and samp.

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline. 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

Sample text here...
<pre>Sample text here...</pre>

You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.

User input

Use the <kbd> to indicate input that is typically entered via keyboard.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + , 
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Variables

For indicating variables use the <var> tag.

y = mx + b 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Sample output

For indicating blocks sample output from a program use the <samp> tag.

This text is meant to be treated as sample output from a computer program. 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

Syntax highlighter

Styles for inline code snippets and longer, multiline blocks of code.

Overview

We use PrismJs to syntax highlight code snippets. You have to put your code inside <pre><code class="language-xxxx"> which xxxx is the name of language.

<p>Something to show in <strong>bold</strong> text.</p>
...
<i>Italic text</i>

If you need to include line numbers, add class .line-numbers to the <pre> tag.

<p>Something to show in <strong>bold</strong> text.</p>
...
<i>Italic text</i>

If you need to have a dark styled code, add class .code-dark to the <pre> tag.

<p>Something to show in <strong>bold</strong> text.</p>
...
<i>Italic text</i>

If you don't want to show language name, add .no-language to <pre> tag.

<p>Something to show in <strong>bold</strong> text.</p>
...
<i>Italic text</i>

If you want to remove the copy-to-clipboard button, just add a .no-copy to <pre> tag.

<p>Something to show in <strong>bold</strong> text.</p>
...
<i>Italic text</i>

If you want to remove both language name and copy-to-clipboard button, you can add .no-toolbar to <pre> tag instead of adding two classes.

<p>Something to show in <strong>bold</strong> text.</p>
...
<i>Italic text</i>

Code preview

If you're writing HTML codes or want to display an image as an output of your code, you can place it inside .code-preview element, right before the <pre> tag. Something like the following code:

<div class="code-preview">The preview content</div>
<pre class="language-markup"><code>Your code</code></pre>

Which results in:

The preview content
Your code

Supported languages

This is the list of all languages currently supported by Prism, with their corresponding alias, to use in place of xxxx in the language-xxxx class:

  • HTML/XML markup
  • CSS css
  • C-like clike
  • JavaScript javascript
  • ASP.NET (C#) aspnet
  • Bash bash
  • C c
  • CoffeeScript coffeescript
  • C++ cpp
  • C# csharp
  • Git git
  • Go go
  • HTTP http
  • Java java
  • JSON json
  • LaTeX latex
  • Less less
  • Markdown markdown
  • MATLAB matlab
  • Objective-C objectivec
  • Perl perl
  • PHP php
  • Python python
  • React JSX jsx
  • Ruby ruby
  • Sass (Sass) sass
  • Sass (Scss) scss
  • SQL sql
  • Swift swift

Line highlight

You specify the lines to be highlighted through the data-line attribute on the <pre> element, in the following simple format:

  • A single number refers to the line with that number
  • Ranges are denoted by two numbers, separated with a hyphen (-)
  • Multiple line numbers or ranges are separated by commas.
  • Whitespace is allowed anywhere and will be stripped off.

Examples:

  • data-line="5" The 5th line
  • data-line="1-5" Lines 1 through 5
  • data-line="1,4" Line 1 and line 4
  • data-line="1-2, 5, 9-20" Lines 1 through 2, line 5, lines 9 through 20

You can also link to specific lines on any code snippet, by using the following as a url hash: #{element-id}.{lines} where {element-id} is the id of the <pre> element and {lines} is one or more lines or line ranges that follow the format outlined above. For example, if there is an element with id="highlighter" on the page, you can link to lines 7-8 by linking to #highlighter.7-8

<p>This is a normal paragraph without any contextual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-purple">A paragraph with .text-purple class.</p>
<p class="text-teal">A paragraph with .text-teal class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>