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

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 want to show language name, wrap your <pre> by a .code.show-language div.

<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>

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
• ActionScript actionscript
• ASP.NET (C#) aspnet
• Bash bash
• BASIC basic
• C c
• C# csharp
• C++ cpp
• CoffeeScript coffeescript
• F# fsharp
• Git git
• Go go
• Groovy groovy
• Haml haml
• Haskell haskell
• HTTP http
• Ini ini
• Jade jade
• Java java
• JSON json
• LaTeX latex
• Less less
• Makefile makefile
• Markdown markdown
• MATLAB matlab
• Objective-C objectivec
• Pascal pascal
• Perl perl
• PHP php
• Prolog prolog
• Python python
• R r
• React JSX jsx
• Ruby ruby
• Sass (Sass) sass
• Sass (Scss) scss
• Scalascala
• SQL sql
• Swift swift
• TypeScript typescript
• Wiki markup wiki
• YAML yaml

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>

Wrap your sample preview inside a .code-preview and place it right before the <pre>. You even can have a .code-title to write some description about the code.

When your <pre> comes with .code-title and/or .code-preview, you should wrap them inside a .code. So you'll have a structure as follow:

<div class="code show-language">
  <div class="code-title"></div>
  <div class="code-preview"></div>
  <pre><code class="language-markup"></code></pre>
</div>

Here's an example:

<p>Something to show in <strong>bold</strong> text.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<i>Italic text</i>

Code toggler

Following code instruct you on how to add a button to toggle your code area.

<div class="code code-fold show-language">
  <div class="code-title"></div>
  <div class="code-preview"></div>
  <pre><code class="language-markup"></code></pre>
  <div class="code-toggler">
    <button class="btn btn-square"><i class="ion-code"></i></button>
  </div>
</div>

Here's an example:

<p>Something to show in <strong>bold</strong> text.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<i>Italic text</i>