How to use highlight.js

common.js

GitHub: holaplex/marketplace-docs

337
338
339
340
341
342
343
344
345
346
347
    })
    return current;
  },
}


// Configure highlight.js
highlight.configure({
  // "useBR": true
})

3

2

4

See more examples

2014-01-11-highlight.md?plain=1

GitHub: sungsoo/sungsoo.github.io

95
96
97
98
99
100
101
102
103
104
with some fixed number of spaces or with a `<span>` to give them special
styling:

```html
<script type="text/javascript">
  hljs.configure({tabReplace: '    '}); // 4 spaces
  // ... or
  hljs.configure({tabReplace: '<span class="indent">\t</span>'});

  hljs.initHighlightingOnLoad();

8

30

5

See more examples

build_highlight_alias.js

GitHub: liby/hexo-util-rs

1
2
3
4
5
6
7
8
9
10
11
12
13
14


const fs = require('fs')


const hljs = require('highlight.js')


const languages = hljs.listLanguages()


const result = {
  languages: languages,
  aliases: {},

6

13

0

See more examples

README.md?plain=1

GitHub: highlightjs/highlightjs-curl

13
14
15
16
17
18
19
20
21
22

```html
<script type="text/javascript" src="/path/to/highlight.min.js"></script>
<script type="text/javascript" src="/path/to/curl.min.js"></script>
<script type="text/javascript">
  hljs.highlightAll();
</script>
```

### Using directly from the UNPKG CDN

7

6

7

See more examples

README.md?plain=1

GitHub: pharo-mooc/PharoMooc

90
91
92
93
94
95
96
97
98
99
<script type="text/javascript">
  hljs.tabReplace = '    '; // 4 spaces
  // ... or
  hljs.tabReplace = '<span class="indent">\t</span>';

  hljs.initHighlightingOnLoad();
</script>
```

## Custom initialization

16

19

31

See more examples

db.js

GitHub: Tommy-LifeLongLearner/Knowledge

366
367
368
369
370
371
372
373
374
375
376
      <button class="fa fa-trash-o delete-button"></button>
    </div>
    ${converter.makeHtml(content)}
  `;
  // highlight the html code elements
  newArticleElement.querySelectorAll("code").forEach(code => hljs.highlightElement(code));
  document.querySelector("#articles").appendChild(newArticleElement);
}


function createArticleElements(articles) {

0

0

1

See more examples

1_gettingStarted.stories.js

GitHub: carbon-design-system/carbon-charts

23
24
25
26
27
28
29
30
31
// Add syntax highlighting
React.useEffect(() => {
    if (demoRef.current) {
        const container = demoRef.current;
        container.querySelectorAll('pre code').forEach((block) => {
            hljs.highlightBlock(block);
        });
    }
}, [demoRef]);

157

724

32

See more examples

radar.js

GitHub: AOEpeople/aoe_technology_radar

91
92
93
94
95
96
97
98
99
100
var model_1 = require("../../src/model");
var paths_1 = require("../paths");
var file_1 = require("./file");
var config_1 = require("../../src/config");
marked_1.marked.setOptions({
    highlight: function (code) { return highlight_js_1.default.highlightAuto(code).value; },
});
var createRadar = function () { return __awaiter(void 0, void 0, void 0, function () {
    var fileNames, revisions, filterdRevisions, allReleases, items, flaggedItems;
    return __generator(this, function (_a) {

68

127

25

See more examples

gen.js

GitHub: niltok/iota

14
15
16
17
18
19
20
21
22
23
24


hljs.registerLanguage('51asm', function(hljs) {
    return {
        case_insensitive: true,
        contains: [
            hljs.COMMENT(';', '\n'),
            {
                scope: 'built_in',
                match: /\b(a|b|c|ab|dptr|r[0-7]|p[0-7](\.[0-7])?|acc(.[0-7])?|scon|sbuf)\b/
            },

0

2

1

See more examples

index.js

GitHub: MarkBind/markbind

86
87
88
89
90
91
92
93
94
95
let highlightRules = [];
if (highlightLinesInput) {
  highlightRules = HighlightRule.parseAllRules(highlightLinesInput, -startFromZeroBased, str);
}

if (lang && hljs.getLanguage(lang)) {
  try {
    /* With highlightjs version >= v10.7.0, usage of continuation is deprecated

    For the purposes of line-by-line highlighting, we have to first highlight the

105

95

13

See more examples

README.md?plain=1

GitHub: pharo-mooc/PharoMooc

73
74
75
76
77
78
79
80
81

  // If you know the language
  hljs.highlight(lang, code).value;

  // Automatic language detection
  hljs.highlightAuto(code).value;
});
```

16

19

31

See more examples

doc-components.jsx

GitHub: craftyjs/craftyjs.github.com

12
13
14
15
16
17
18
19
20
21
markedConfig: {
    renderer: (function() {
        var r = new marked.Renderer();
        r.code = function(code, language){
          return '<pre><code class="hljs ' + (language || "") + '">' + 
              hljs.highlight("javascript", code).value +
            '</code></pre>';
        };
        return r;
    })()

75

85

16

See more examples