Skip to content

Commit 27c8c74

Browse files
wcoderwcoder
committed
Add options & approach to override default names. Closes #1 
1 parent e9fc3bf commit 27c8c74

File tree

3 files changed

+176
-51
lines changed

3 files changed

+176
-51
lines changed

‎README.md

+80-18
Original file line numberDiff line numberDiff line change
@@ -6,62 +6,124 @@
66

77
## Install
88

9-
#### Npm
10-
```
9+
### Npm
10+
11+
```bash
1112
npm i highlightjs-lang.js
1213
```
1314

14-
#### Bower
15-
```
15+
### Bower
16+
17+
```bash
1618
bower install highlightjs-lang
1719
```
1820

1921
#### Getting the library from CDN
2022

2123
```html
22-
<script src="//cdn.jsdelivr.net/npm/highlightjs-lang.js@1.0.0/dist/highlightjs-lang.min.js"></script>
24+
<script src="//cdn.jsdelivr.net/npm/highlightjs-lang.js@1.1.0/dist/highlightjs-lang.min.js"></script>
2325
```
2426

27+
highlightjs-lang.js 1.1.0 is known to work with highlight.js 11.3.1.
28+
2529
## Usage
2630

2731
Download plugin and include file after highlight.js:
32+
2833
```html
2934
<script src="path/to/highlight.min.js"></script>
3035

3136
<script src="path/to/highlightjs-lang.min.js"></script>
3237
```
3338

3439
Add styles:
40+
3541
```css
3642
.hljs-lang {
37-
background: #333;
38-
text-align: center;
39-
color: #fff;
40-
-webkit-touch-callout: none;
41-
-webkit-user-select: none;
42-
-khtml-user-select: none;
43-
-moz-user-select: none;
44-
-ms-user-select: none;
45-
user-select: none;
43+
background: #333;
44+
text-align: center;
45+
color: #fff;
46+
-webkit-touch-callout: none;
47+
-webkit-user-select: none;
48+
-khtml-user-select: none;
49+
-moz-user-select: none;
50+
-ms-user-select: none;
51+
user-select: none;
4652
}
4753
```
4854

4955
Initialize plugin after highlight.js:
56+
5057
```js
51-
hljs.initHighlightingOnLoad();
58+
hljs.highlightAll();
5259

5360
hljs.initLangOnLoad();
5461
```
5562

5663
Here’s an equivalent way to calling `initLangBlock` using jQuery:
64+
5765
```js
5866
$(document).ready(function() {
59-
$('code.hljs').each(function(i, block) {
60-
hljs.initLangBlock(block);
61-
});
67+
$('code.hljs').each(function(i, block) {
68+
hljs.initLangBlock(block);
69+
});
6270
});
6371
```
6472

73+
## Options
74+
75+
After version 1.1.0 plugin has optional parameter `options` - for custom setup:
76+
77+
version | name | type | default value | description
78+
--------|---------------|---------|---------------|-----------------------
79+
v1.1.0 | overrideNames | object | {} | [Override the default language names](#overrideNames)
80+
81+
### Examples of using
82+
83+
Options can be used in these calls:
84+
85+
```js
86+
hljs.initLangOnLoad(myOptions);
87+
```
88+
89+
```js
90+
hljs.initLangBlock(myCodeBlock, myOptions);
91+
```
92+
93+
### overrideNames
94+
95+
If you want to override the default language name, you can specify a _overridden language names_, in one of the following ways:
96+
97+
- Specifying the desired value in js code, as in:
98+
99+
```js
100+
var myOptions = {
101+
overrideNames: {
102+
cs: 'C#',
103+
}
104+
};
105+
```
106+
107+
- Specifying the desired value in `data-lang-name` attribute of `code` element, as in:
108+
109+
```html
110+
<pre>
111+
<code class="cs" data-lang-name="C#">
112+
...
113+
</code>
114+
</pre>
115+
```
116+
117+
In both cases language name will be `C#`.
118+
119+
> [List of default language names](https://github.com/wcoder/highlightjs-lang.js/blob/master/src/highlightjs-lang.js#L4-L10)
120+
121+
## Skipping some blocks
122+
123+
(Applies to `hljs.initLangOnLoad()` initialization only.)
124+
125+
If you want to skip some of your `code` blocks (to leave them unnumbered), you can mark them with `.nohljslang` class.
126+
65127
## More plugins
66128

67129
- [highlightjs-line-numbers.js](https://github.com/wcoder/highlightjs-line-numbers.js) — Line numbering plugin.

‎dist/highlightjs-lang.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/highlightjs-lang.js

+95-32
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,101 @@
1-
(function (w) {
1+
(function (w, d) {
22
'use strict';
33

4+
// TODO: add more langs
5+
var defaultLangNamesMap = {
6+
cs: 'C#',
7+
csharp: 'C#',
8+
fsharp: 'F#',
9+
objectivec: 'Objective-C',
10+
};
11+
412
if (typeof w.hljs === 'undefined') {
513
console.error('highlight.js not detected!');
614
} else {
715
w.hljs.initLangOnLoad = initLangOnLoad;
816
w.hljs.initLangBlock = initLangBlock;
917
}
1018

11-
function initLangOnLoad () {
12-
w.addEventListener('load', function () {
13-
try {
14-
var blocks = document.querySelectorAll('code.hljs');
19+
function initLangOnLoad (options) {
20+
if (d.readyState === 'interactive' || d.readyState === 'complete') {
21+
documentReady(options);
22+
} else {
23+
w.addEventListener('DOMContentLoaded', function () {
24+
documentReady(options);
25+
});
26+
}
27+
}
28+
29+
function documentReady (options) {
30+
try {
31+
var blocks = d.querySelectorAll('code.hljs,code.nohighlight');
1532

16-
for (var i in blocks) {
17-
if (blocks.hasOwnProperty(i)) {
18-
initLangBlock(blocks[i]);
33+
for (var i in blocks) {
34+
if (blocks.hasOwnProperty(i)) {
35+
if (!isPluginDisabledForBlock(blocks[i])) {
36+
initLangBlock(blocks[i], options);
1937
}
2038
}
21-
} catch (e) {
22-
console.error('highlight-lang error: ', e);
2339
}
24-
});
40+
} catch (e) {
41+
w.console.error('hljs-lang error: ', e);
42+
}
43+
}
44+
45+
function isPluginDisabledForBlock(element) {
46+
return element.classList.contains('nohljslang');
2547
}
2648

27-
function initLangBlock (element) {
49+
function initLangBlock (element, options) {
2850
if (typeof element !== 'object') return;
2951

30-
var classes = element.className.split(' ');
31-
var lang = getLangNameFromClasses(classes);
52+
var lang = getLangNameFromElement(element);
53+
var internalOptions = mapOptions(element, lang, options);
3254

3355
if (lang !== '') {
3456
var langPanel = document.createElement('div');
3557
langPanel.className = 'hljs-lang';
36-
langPanel.textContent = convertLangName(lang);
58+
langPanel.textContent = convertLangName(lang, internalOptions.overrideNames);
3759
element.parentNode.insertBefore(langPanel, element);
3860
}
3961
}
4062

63+
/**
64+
* @param {HTMLElement} element Code block.
65+
* @param {Object} options External API options.
66+
* @returns {Object} Internal API options.
67+
*/
68+
function mapOptions (element, langKey, options) {
69+
options = options || {};
70+
return {
71+
overrideNames: getOverrideNamesOption(element, langKey, options),
72+
};
73+
}
74+
75+
function getOverrideNamesOption (element, langKey, options) {
76+
var overrideNames = {};
77+
78+
if (!!options.overrideNames) {
79+
overrideNames = options.overrideNames;
80+
}
81+
82+
// can be overridden because local option is priority
83+
var value = getAttribute(element, 'data-lang-name');
84+
if (!!value) {
85+
var opts = {};
86+
opts[langKey] = value;
87+
overrideNames = opts;
88+
}
89+
90+
return overrideNames;
91+
}
92+
93+
function getLangNameFromElement (element) {
94+
var classes = element.className.split(' ');
95+
var lang = getLangNameFromClasses(classes);
96+
return lang;
97+
}
98+
4199
function getLangNameFromClasses(classes) {
42100
// TODO: define lang for auto-syntax
43101
if (!!classes && classes.length > 1 && classes[1] === 'hljs') {
@@ -46,23 +104,28 @@
46104
return '';
47105
}
48106

49-
// TODO: rework this crap
50-
function convertLangName(lang)
107+
function convertLangName(langKey, overrideNamesMap)
51108
{
52-
// TODO: add more langs
53-
var map = [
54-
['C#', ['cs', 'csharp']],
55-
['F#', ['fsharp']],
56-
['Objective-C', ['objectivec']]
57-
];
58-
59-
map.forEach(function (e) {
60-
if (e[1].indexOf(lang) !== -1) {
61-
lang = e[0];
62-
return;
63-
}
64-
});
65-
return lang;
109+
var overriddenLangName = overrideNamesMap[langKey];
110+
if (!!overriddenLangName) {
111+
return overriddenLangName;
112+
}
113+
114+
var langName = defaultLangNamesMap[langKey];
115+
if (!!langName) {
116+
return langName;
117+
}
118+
119+
return langKey;
120+
}
121+
122+
/**
123+
* @param {HTMLElement} element Code block.
124+
* @param {String} attrName Attribute name.
125+
* @returns {String} Attribute value or empty.
126+
*/
127+
function getAttribute (element, attrName) {
128+
return element.hasAttribute(attrName) ? element.getAttribute(attrName) : null;
66129
}
67130

68-
}(window));
131+
}(window, document));

0 commit comments

Comments
 (0)