#### Content - Syntax Highlighter

Statistics Invoices Schedule

##### Basic syntax highlighter

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-expand-md navbar-dark">
    	<div class="navbar-brand">
    		<a href="index.html" class="d-inline-block">
    			<img src="assets/images/logo.png" alt="Limitless">
    		</a>
    	</div>

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

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

##### Line highlight

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-expand-md navbar-dark">
    	<div class="navbar-brand">
    		<a href="index.html" class="d-inline-block">
    			<img src="assets/images/logo.png" alt="Limitless">
    		</a>
    	</div>

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

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

##### Line numbers

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-expand-md navbar-dark">
    	<div class="navbar-brand">
    		<a href="index.html" class="d-inline-block">
    			<img src="assets/images/logo.png" alt="Limitless">
    		</a>
    	</div>

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

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

##### Define starting line

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-expand-md navbar-dark">
    	<div class="navbar-brand">
    		<a href="index.html" class="d-inline-block">
    			<img src="assets/images/logo.png" alt="Limitless">
    		</a>
    	</div>

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

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

##### Available languages

By default, a complete prism.js build allows you to add up to 126 languages. Current build includes 27: markup, css, css-extras, c-like, javascript, java, C, C#, C++, coffescript, diff, git, haml, handlebars, json, less, markdown, perl, php, php extras, python, ruby, sass, sql, stylus, swift, twig. Available addons: line-highlight, line-numbers, autolinker, file-highlight and show-language. For a custom build, please go to this page.

CSS example

    /* 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;
    }

SASS example

    /* SASS highlight */
    .input-group-addon {
    	padding: $input-btn-padding-y $input-btn-padding-x;
    	margin-bottom: 0;
    	font-size: $font-size-base;
    	font-weight: $font-weight-normal;
    	line-height: $input-btn-line-height;
    	color: $input-color;
    	text-align: center;
    	background-color: $input-group-addon-bg;
    	border: $input-btn-border-width solid $input-group-addon-border-color;
    	@include border-radius($input-border-radius);

        // Sizing
        &.form-control-sm {
            padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
            font-size: $font-size-sm;
            @include border-radius($input-border-radius-sm);
        }

        &.form-control-lg {
            padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
            font-size: $font-size-lg;
            @include border-radius($input-border-radius-lg);
        }
    }

JS example

    /* 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);
    });

LESS example

    /* LESS highlight */
    .input-group-addon {
    	padding: @input-btn-padding-y @input-btn-padding-x;
    	margin-bottom: 0;
    	font-size: @font-size-base;
    	font-weight: @font-weight-normal;
    	line-height: @input-btn-line-height;
    	color: @input-color;
    	text-align: center;
    	background-color: @input-group-addon-bg;
    	border: @input-btn-border-width solid @input-group-addon-border-color;
    	.border-radius(@input-border-radius);

        // Sizing
        &.form-control-sm {
            padding: @input-btn-padding-y-sm @input-btn-padding-x-sm;
            font-size: @font-size-sm;
            .border-radius(@input-border-radius-sm);
        }

        &.form-control-lg {
            padding: @input-btn-padding-y-lg @input-btn-padding-x-lg;
            font-size: @font-size-lg;
            .border-radius(@input-border-radius-lg);
        }
    }