How to use the highlightBlock function from highlight.js

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

+ 3 other calls in file

vuenut.vue

GitHub: lusaxweb/vuenut

152
153
154
155
156
157
158
159
160
161
  console.log("paso por aqui");
  this.storeVuenut = this.store
  console.dir(this.store);
  setTimeout( ()=> {
    // [object Object]
    hljs.highlightBlock(this.$refs.codex);
  }, 300);
},
fontSize(){
  console.log("cambio size");

19

306

8

+ 5 other calls in file

PreviewMode.js

GitHub: teesloane/snippet-bar

54
55
56
57
58
59
60
61
62
63
<div className="selected-mode">
  <div className="preview-snippet-mode">
    <pre className={"snippet-text copy-text " + language}
      ref={
        preElement => {
          if (preElement) hljs.highlightBlock(preElement);
        }
      }>
      <code>{text}</code>
    </pre>

10

112

0

script.js

GitHub: ericlink/mdp

26
27
28
29
30
31
32
33
34
35
const emojified = emoji.emojify(data.toString());
// marked
document.querySelector('.md').innerHTML = marked(emojified);
// highlight.js - here is cleaner than marked function, to avoid mermaid
Array.from(document.querySelectorAll('pre code:not(.language-mermaid)')).forEach(
  block => hljs.highlightBlock(block)
);
// mermaid
Array.from(document.querySelectorAll('pre code.language-mermaid')).forEach(
  block => mermaid.init(undefined, block)

6

42

5

index.js

GitHub: s0nskar/gitty

120
121
122
123
124
125
126
127
128
  cardWrapper.appendChild(cardBox);


  const codeBlocks = document.querySelectorAll('pre.insert, pre.delete, pre.context');
  console.log('pre', codeBlocks);
  codeBlocks.forEach((line) => {
    hljs.highlightBlock(line);
  })
});

2

7

0

code.js

GitHub: yutakahoulette-zz/commons.css

-2
h('pre', [h(`code.${type}`, {hook: {insert: highlight}}, code.trim())])

1

2

1

index.js

GitHub: sumight/dedoc

102
103
104
105
106
107
108
109
110
// 渲染 js 代码
if (!_.isUndefined(jsStr)) {
    var $jsCode = $examplePost.find('.bs-lang-js code');
    jsStr = beautify_js(jsStr);
    $jsCode.html(jsStr);
    hljs.highlightBlock($jsCode.get(0));
} else {
    $('.bs-lang-js').remove();
}

0

0

2