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

We use PrismJsto syntax highlight code snippets. You have to put your code inside <pre><code class="language-xxxx">which xxxxis 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-numbersto 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-languagediv.

<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-copyto <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 xxxxin the language-xxxxclass:

• 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-lineattribute 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-previewand place it right before the <pre>. You even can have a .code-titleto write some description about the code.

When your <pre>comes with .code-titleand/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>