logo

Code

Make your creation easy and intuitive with the code highlight component.

Simple highlight

Laudantium magni ea cupiditate vero sunt voluptatum tempora molestiae reiciendis. Facere, deleniti.

copy 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://path.com/to/the/compiled/style.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://path.com/to/the/chosen/theme.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://path.com/to/the/JavaScript/library.js"></script>

Mixed code highlight

Illo assumenda delectus tempora consequatur, in, perferendis harum atque animi laboriosam a explicabo.

copy 
<script src="jquery.js"></script>
<script src="dist/jquery.plugin.min.js"></script>
<script>
	jQuery(function($) {
		// more options are listed below.
		$('#elem').plugin(); 
	});
</script>

Highlight with label

Porro accusantium dolor, sed iste totam officia optio veritatis veniam provident quam!

copy 
.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

Code highlight attached

Impedit officiis nisi velit id officia molestias cumque, labore architecto? Neque, voluptatum.

copy 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://path.com/to/the/compiled/style.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://path.com/to/the/chosen/theme.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://path.com/to/the/JavaScript/library.js"></script>
copy 
.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}
copy 
var InteractiveSteps = (function(){
	var steps = $('.js-steps-interactive');

	steps.each(function() {
		var step = $(this);
		var config = config = {
			headerTag: "h4",
		    transitionEffect: "fade",
		    labels: {
		    	current: ''
		    }
		}
		var userConfig = step.data('config');

		$.extend(true, config, userConfig);
		steps.steps(config);
	});
})();

Code tabs

Vero blanditiis neque quis maiores, qui. Dicta, itaque, similique. Quod, voluptas incidunt.

HTML

copy 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://path.com/to/the/compiled/style.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://path.com/to/the/chosen/theme.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://path.com/to/the/JavaScript/library.js"></script>

CSS

copy 
.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

JavaScript

copy 
var InteractiveSteps = (function(){
	var steps = $('.js-steps-interactive');

	steps.each(function() {
		var step = $(this);
		var config = config = {
			headerTag: "h4",
		    transitionEffect: "fade",
		    labels: {
		    	current: ''
		    }
		}
		var userConfig = step.data('config');

		$.extend(true, config, userConfig);
		steps.steps(config);
	});
})();

Show code button

Exercitationem dolores magnam, amet, veniam eligendi voluptatibus.

Example

box icon

Layouts

This is the first example of boxes with Title, Content and a small image-icon. Icon is aligned left.

box icon

Colors

This is the second example of boxes with Title, Content and a small image-icon. Icon is aligned left.

box icon

Components

This is the third example of boxes with Title, Content and a small image-icon. Icon is aligned left.

Code

copy 
<div class="row">
	<div class="col-md-4">
		<!-- Box -->
		<div class="box box-small-icon helper m0">
			<img src="img/demos/boxes/1.png" class="box-icon"  alt="box icon">
			<h4 class="box-title">Layouts</h4>
			<p class="box-description">This is the first example of boxes with Title, Content and a small image-icon. Icon is aligned left.</p>
		</div>
		<!-- End of Box -->
	</div>
	<div class="col-md-4">
		<!-- Box -->
		<div class="box box-small-icon helper m0">
			<img src="img/demos/boxes/2.png" class="box-icon"  alt="box icon">
			<h4 class="box-title">Colors</h4>
			<p class="box-description">This is the second example of boxes with Title, Content and a small image-icon. Icon is aligned left.</p>
		</div>
		<!-- End of Box -->
	</div>
	<div class="col-md-4">
		<!-- Box -->
		<div class="box box-small-icon helper m0">
			<img src="img/demos/boxes/3.png" class="box-icon"  alt="box icon">
			<h4 class="box-title">Components</h4>
			<p class="box-description">This is the third example of boxes with Title, Content and a small image-icon. Icon is aligned left.</p>
		</div>
		<!-- End of Box -->
	</div>
</div>

List of supported languages

Here's the full list of languages supported by our template.

Language Included
Markup yes
CSS yes
C-like yes
JavaScript yes
ActionScript no
Apache Configuration no
AppleScript yes
ASP.NET (C#) yes
AutoHotkey no
Bash no
C no
C# yes
C++ yes
CoffeeScript yes
CSS Extras yes
Dart no
Eiffel no
Erlang no
F# no
Fortran no
Gherkin no
Language Included
Git yes
Go no
Groovy no
Haml yes
Handlebars yes
Haskell no
HTTP no
Ini no
Jade yes
Java yes
Julia no
LaTeX no
Less yes
LOLCODE no
Markdown yes
MATLAB no
NASM no
NSIS no
Objective-C yes
Pascal no
Perl yes
Language Included
PHP Extras yes
PowerShell no
Python yes
R no
React JSX yes
reST (reStructuredText) no
Rip no
Ruby yes
Rust no
SAS no
Sass (Scss) yes
Scala no
Scheme yes
Smalltalk no
Smarty yes
SQL yes
Stylus yes
Swift yes
Twig no
TypeScript yes
Wiki markup no