highlightjs-lang.js

Highlight.js plugin for display language of syntax highlight.

DEMO

Install

Npm

npm i highlightjs-lang.js

Bower

bower install highlightjs-lang

Getting the library from CDN

<script src="//cdn.jsdelivr.net/npm/[email protected]/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>

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

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:

version	name	type	default value	description
v1.1.0	overrideNames	object	{}	Override the default language names

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

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