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