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 -->

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 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-numbersclass 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 -->

Defines starting line number at the beginning of code lines. This feature works as an optional addition to the line numberplugin. 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 -->

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