Prism

Unformatted

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Formatted

CSS

.example-gradient {
  background: -webkit-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Chrome10+, Safari5.1+ */
  background:    -moz-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
  background:     -ms-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* IE10+ */
  background:      -o-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Opera 11.10+ */
  background:         linear-gradient(to right, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* W3C */
}
.example-angle {
  transform: rotate(15deg);
}
.example-color {
  color: rgba(255, 0, 0, 0.2);
  background: purple;
  border: 1px solid hsl(100, 70%, 40%);
}
.example-easing {
  transition-timing-function: ease-in-out;
}
.example-time {
  transition-duration: 3s;
}

Javascript

function jsSep() {
  return src( jsSepSRC )
    // .pipe( cache( 'scriptsSeparate' ) )
    // .pipe( plumber() )
    .pipe( rename( { suffix: '.min' } ) )
    .pipe( gulpif( options.has( 'production' ), stripDebug() ) )
    .pipe( sourcemaps.init({ loadMaps: true }) )
    .pipe( uglify() )
    .pipe( sourcemaps.write( mapURL ) )
    .pipe( dest( jsURL ) )
    .pipe( browserSync.stream() );
};

Plugins

match-braces

https://prismjs.com/plugins/match-braces/

To enable this plugin add the match-braces class to a code block:

The plugin will highlight brace pairs when the cursor hovers over one of the braces. The highlighting effect will disappear as soon as the cursor leaves the brace pair.
The hover effect can be disabled by adding the no-brace-hover to the code block. This class can also be inherited.

function determineResizeAnim() {
  var current_size = window.innerWidth + window.innerHeight;

  if (Math.abs(last_resize_size - current_size) > 100) {
    root.classList.remove('show-resize-anim');
  } else {
    root.classList.add('show-resize-anim');
  }

  last_resize_size = current_size;
}

no-whitespace-normalization

https://prismjs.com/plugins/normalize-whitespace/

Obviously, this is supposed to work only for code blocks (<pre><code>) and not for inline code.

By default the plugin trims all leading and trailing whitespace of every code block. It also removes extra indents and trailing whitespace on every line.

The plugin can be disabled for a particular code block by adding the class no-whitespace-normalization to either the <pre> or <code> tag.


    function getScrollY() {
      return window.scrollY || document.documentElement.scrollTop;
    }

Download Button

https://prismjs.com/plugins/download-button/

Use the data-src and data-download-link attribute on a <pre> elements similar to Autoloader, like so:

<pre data-src="myfile.js" data-download-link></pre>

Optionally, the text of the button can also be customized by using a data-download-link-label attribute.

<pre data-src="myfile.js" data-download-link data-download-link-label="Download this file"></pre>

line-numbers

Default line-numbers

https://prismjs.com/plugins/line-numbers/

Obviously, this is supposed to work only for code blocks (<pre><code>) and not for inline code.

Add the line-numbers class to your desired <pre> or any of its ancestors, and the Line Numbers plugin will take care of the rest. To give all code blocks line numbers, add the line-numbers class to the <body> of the page. This is part of a general activation mechanism where adding the line-numbers (or no-line-numbers) class to any element will enable (or disable) the Line Numbers plugin for all code blocks in that element.
Example:

h1, h2, h3, h4, h5, h6 {
  line-height: 1.5em;
}

h1:after {
  content: " ";
  display: block;
  background: #000;
  height: 0.05em;
  margin-top: 0.375em;
}

img {
  max-width: 100%;
  width: map-get($breakpoints, "tablet") * 0.675;
}

linkable-line-numbers

.line-numbers .line-numbers-rows {
  background: adjust-color( $body_bg_color, $lightness: -7%, $alpha: -0.075 );
  border-top-left-radius: $radius_content;
  border-bottom-left-radius: $radius_content;
}

.backdropfilter .line-numbers .line-numbers-rows {
  background: adjust-color( $body_bg_color, $lightness: -7%, $alpha: -0.25 );
  backdrop-filter: blur(10px);
}

line-highlight

Without Line Numbers

document.addEventListener("keydown", function(event) {
  if ( event.keyCode == 9 ) {
    root.classList.add('show-nav-outline');
  }
});

document.addEventListener('click', ()=>{
  root.classList.remove('show-nav-outline');
});

With Line Numbers

document.addEventListener("keydown", function(event) {
  if ( event.keyCode == 9 ) {
    root.classList.add('show-nav-outline');
  }
});

document.addEventListener('click', ()=>{
  root.classList.remove('show-nav-outline');
});

Special Thanks

This page is comprised of my own additions and either partially or heavily modified elements from the following source(s):

Source: https://prismjs.com/