Code highlighting with Prism.js

For this styleguide we use prism.js as a syntax highlighter and it's already included in the Volta package along with our theme. Prism.js is a good lightweight code highlighter, well customiseable. Our version includes Copy to Clipboard and the option of line numbers, command line indicators and keeping markup (to enhance or style from within the snippet). If you are using any other system, please refer to our colour guide on the Notes.

How to use

Remember to call prism.js and volta-prism.css

<script src="[path-to-volta]/js/prism.js"></script>
<link rel="stylesheet" href="[path-to-volta]/css/volta-prism.css">

Then use the following structure

<pre class="language-[language]">
    <code>
        <!-- The code to display -->
    </code>
</pre>

For a more indepth guide, please visit the Prism.js website.

Our package contains:

Languages

HTML
CSS
JavaScript
Bash
Git
Groovy
Java
JSON
Kotlin
Objective-C
PHP
Python
Ruby
Swift
C#
XML

Prism plugins

Line highlight
Line numbers
Keep markup
Command line
Toolbar
Copy to Clipboard

Color schemes

We have a dark and a light scheme, to be used at your discretion or as indicated by your designer

Light: default
Dark: just add .Vlt-prism--dark to the pre

Examples:

Html / Plain

<pre class="language-html"><code>...

<div class="Vlt-grid">
	<div class="Vlt-col">
		<!-- First column content -->
	</div>
	<div class="Vlt-col">
		<!-- Second column content -->
	</div>
</div>

<pre class="language-html Vlt-prism--dark"><code>...

<div class="Vlt-grid">
	<div class="Vlt-col">
		<!-- First column content -->
	</div>
	<div class="Vlt-col">
		<!-- Second column content -->
	</div>
</div>

Javascript / Line numbers

<pre class="language-javascript line-numbers"><code>...

$(".Vlt-accordion__trigger").click(function(){
	$(this).parent().toggleClass("Vlt-accordion--expanded");
	$(this).parent().siblings("Vlt-accordion--expanded").removeClass("Vlt-accordion--expanded")
})

<pre class="language-javascript line-numbers Vlt-prism--dark"><code>...

$(".Vlt-accordion__trigger").click(function(){
	$(this).parent().toggleClass("Vlt-accordion--expanded");
	$(this).parent().siblings("Vlt-accordion--expanded").removeClass("Vlt-accordion--expanded")
})

Php / Command line / Copy button disabled

<pre class="language-php command-line Vlt-prism--copy-disabled" data-prompt="$"><code>...

$message = $client->message()->send([
    'to' => TO_NUMBER,
    'from' => 'Acme Inc',
    'text' => 'A text message sent using the Nexmo SMS API'
]);

<pre class="language-php command-line Vlt-prism--copy-disabled Vlt-prism--dark" data-prompt="$"><code>...

$message = $client->message()->send([
    'to' => TO_NUMBER,
    'from' => 'Acme Inc',
    'text' => 'A text message sent using the Nexmo SMS API'
]);

For a more indepth guide, please visit the Prism.js website.