https://github.com/highlightjs-plugins/highlightjs-lang.js
Display language of syntax highlighting
https://github.com/highlightjs-plugins/highlightjs-lang.js
code-highlight highlight highlight-js javascript vanilla-javascript
Last synced: about 1 month ago
JSON representation
Display language of syntax highlighting
- Host: GitHub
- URL: https://github.com/highlightjs-plugins/highlightjs-lang.js
- Owner: highlightjs-plugins
- License: mit
- Created: 2016-01-25T19:27:41.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-02-26T21:48:31.000Z (almost 3 years ago)
- Last Synced: 2025-03-15T03:47:16.045Z (10 months ago)
- Topics: code-highlight, highlight, highlight-js, javascript, vanilla-javascript
- Language: HTML
- Homepage: http://wcoder.github.io/highlightjs-lang.js/
- Size: 196 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# highlightjs-lang.js [](https://www.npmjs.com/package/highlightjs-lang.js) 
[Highlight.js](https://github.com/highlightjs/highlight.js) plugin for display language of syntax highlight.
[DEMO](https://wcoder.github.io/highlightjs-lang.js/)
## Install
### Npm
```bash
npm i highlightjs-lang.js
```
#### Getting the library from CDN
```html
```
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:
```html
```
Add styles:
```css
.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:
```js
hljs.highlightAll();
hljs.initLangOnLoad(); // <-- init plugin
```
Here’s an equivalent way to calling `initLangBlock` using jQuery:
```js
$(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](#overrideNames)
v1.1.1 | fallback | func(str): str | (lang) => lang | [Fallback to convert unknown names](#fallback)
### Examples of using
Options can be used in these calls:
```js
hljs.initLangOnLoad(myOptions);
```
```js
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:
```js
var myOptions = {
// ...
overrideNames: {
cs: 'C#',
},
// ...
};
```
- Specifying the desired value in `data-lang-name` attribute of `code` element, as in:
```html
...
```
In both cases language name will be `C#`.
> [List of default language names](https://github.com/wcoder/highlightjs-lang.js/blob/master/src/highlightjs-lang.js#L4-L10)
### fallback
Specifying the desired format for undeclared language names:
```js
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](https://github.com/wcoder/highlightjs-line-numbers.js) — Line numbering plugin.
---
© 2015 Yauheni Pakala | MIT License