Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. To highlight code syntax, add .language-* class to the <code> element. By default, highlighter displays a small text block with current language on the top right corner. This functionality is an extra option, provided by "Show language" prism.js addon.

Example

<!-- Navbar markup -->
<div class="navbar navbar-inverse">
	<div class="navbar-header">
		<a href="index.html" class="navbar-brand">
			<img src="assets/images/logo_light.png" alt="Logo">
		</a>
	</div>

	<div class="navbar-collapse collapse" id="navbar-mobile">
		<ul class="nav navbar-nav">
			<li>...</li>
			<li class="dropdown">...</li>
		</ul>

		<div class="navbar-right">
			<ul class="nav navbar-nav navbar-left">
				<li>...</li>
				<li class="dropdown">...</li>
			</ul>
		</div>
	</div>
</div>
<!-- /navbar markup -->

Highlights specific lines and/or line ranges with light green color and displays start and end line numbers. To highlight specific line, add data-line="*" attribute, to highlight line ranges add data-line="*-*" attribute. Multiple lines or ranges are also supported, to use just separate values with comma: data-line="*, *-*". This prism addon is included to the current plugin build by default.

Example

<!-- Navbar markup -->
<div class="navbar navbar-inverse">
	<div class="navbar-header">
		<a href="index.html" class="navbar-brand">
			<img src="assets/images/logo_light.png" alt="Logo">
		</a>
	</div>

	<div class="navbar-collapse collapse" id="navbar-mobile">
		<ul class="nav navbar-nav">
			<li>...</li>
			<li class="dropdown">...</li>
		</ul>

		<div class="navbar-right">
			<ul class="nav navbar-nav navbar-left">
				<li>...</li>
				<li class="dropdown">...</li>
			</ul>
		</div>
	</div>
</div>
<!-- /navbar markup -->

Line number at the beginning of code lines. Obviously, this is supposed to work only for code blocks - <pre><code> - and not for inline code. To use this feature, add .line-numbers class to your desired <pre> element and line-numbers plugin will take care. This prism addon is included to the current plugin build by default.

Example

<!-- Navbar markup -->
<div class="navbar navbar-inverse">
	<div class="navbar-header">
		<a href="index.html" class="navbar-brand">
			<img src="assets/images/logo_light.png" alt="Logo">
		</a>
	</div>

	<div class="navbar-collapse collapse" id="navbar-mobile">
		<ul class="nav navbar-nav">
			<li>...</li>
			<li class="dropdown">...</li>
		</ul>

		<div class="navbar-right">
			<ul class="nav navbar-nav navbar-left">
				<li>...</li>
				<li class="dropdown">...</li>
			</ul>
		</div>
	</div>
</div>
<!-- /navbar markup -->

Defines starting line number at the beginning of code lines. This feature works as an optional addition to the line number plugin. To set a custom starting line number, add data-start="*" attribute to the code block markup and it will shift the line counter. Negative values are also supported. This prism feature is also included by default.

Example

<!-- Navbar markup -->
<div class="navbar navbar-inverse">
	<div class="navbar-header">
		<a href="index.html" class="navbar-brand">
			<img src="assets/images/logo_light.png" alt="Logo">
		</a>
	</div>

	<div class="navbar-collapse collapse" id="navbar-mobile">
		<ul class="nav navbar-nav">
			<li>...</li>
			<li class="dropdown">...</li>
		</ul>

		<div class="navbar-right">
			<ul class="nav navbar-nav navbar-left">
				<li>...</li>
				<li class="dropdown">...</li>
			</ul>
		</div>
	</div>
</div>
<!-- /navbar markup -->

By default, a complete prism.js build allows you to add up to 38 languages. Current build includes 21: markup, css, css-extras, clike, javascript, java, php, php-extras, coffeescript, scss, c, python, sql, ruby, csharp, aspnet, swift, objectivec, git, perl and handlebars. Available addons: line-highlight, line-numbers, autolinker, file-highlight and show-language. For a custom build, please go to this page.

/* CSS highlight */
.line-highlight {
	position: absolute;
	left: 0;
	right: 0;
	margin-top: 12px;
	background: rgba(133, 238, 149, 0.12);  
	pointer-events: none;
	white-space: pre;
}

.line-highlight:before,
.line-highlight[data-end]:after {
	content: attr(data-start);
	position: absolute;
	top: 0px;
	left: 10px;
	padding: 2px;
	text-align: center;
	font-size: 10px;
	color: #999;
}

/* JS highlight */
$('[data-action=reload]').on('click', function (e) {
    e.preventDefault();
    var block = $(this).parent();
    $(block).block({ 
        message: '<i class="icon-spinner3 spinner"></i>',
        overlayCSS: {
            backgroundColor: '#fff',
            opacity: 0.8,
            cursor: 'wait',
            'box-shadow': '0 0 0 1px #ddd'
        },
        css: {
            border: 0,
            backgroundColor: 'none'
        }
    });

    window.setTimeout(function () {
       $(block).unblock();
    }, 2000); 
});