highlightjs-lang.js

Highlight.js plugin for display language of syntax highlight.

DEMO

Install

Npm

npm i highlightjs-lang.js

Getting the library from CDN

<script src="https://cdn.jsdelivr.net/npm/highlightjs-lang.js@latest/dist/highlightjs-lang.min.js"></script>

highlightjs-lang.js 1.1.0 is known to work with highlight.js 11.3.1+

Usage

Download plugin and include file after highlight.js:

<script src="path/to/highlight.min.js"></script>

<!-- Load plugin: -->
<script src="path/to/highlightjs-lang.min.js"></script>

Add styles:

.hljs-lang {
    background: #333;
    text-align: center;
    color: #fff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Initialize plugin after highlight.js:

hljs.highlightAll();

hljs.initLangOnLoad();  //  <-- init plugin

Here’s an equivalent way to calling initLangBlock using jQuery:

$(document).ready(function() {
    $('code.hljs').each(function(i, block) {
        hljs.initLangBlock(block);
    });
});

Options

After version 1.1.0 plugin has optional parameter options - for custom setup:

Examples of using

Options can be used in these calls:

hljs.initLangOnLoad(myOptions);

hljs.initLangBlock(myCodeBlock, myOptions);

overrideNames

If you want to override the default language name, you can specify a overridden language names, in one of the following ways:

• Specifying the desired value in js code, as in:

var myOptions = {
    // ...
    overrideNames: {
        cs: 'C#',
    },
    // ...
};

• Specifying the desired value in data-lang-name attribute of code element, as in:

<pre>
    <code class="cs" data-lang-name="C#">
    ...
    </code>
</pre>

In both cases language name will be C#.

List of default language names

fallback

Specifying the desired format for undeclared language names:

var myOptions = {
  // ...
  fallback: function (lang) {
    return '~~' + lang;
  },
  // ...
};

Convert all undeclared language names to names with ~~ prefix:

xyz -> ~~xyz

Skipping some blocks

(Applies to hljs.initLangOnLoad() initialization only.)

If you want to skip some of your code blocks (to leave them unnumbered), you can mark them with .nohljslang class.

More plugins

• highlightjs-line-numbers.js — Line numbering plugin.

© 2015 Yauheni Pakala | MIT License