How to use the prismjs.hooks function in prismjs

if (!pre) {
      return
    }

    if (!pre.hasAttribute('data-line')) {
      pre.setAttribute('data-line', '')
    }

    highlightLines(pre, range, 'temporary ')

    document.querySelector('.temporary.line-highlight').scrollIntoView()
  }

  var fakeTimer = 0 // Hack to limit the number of times applyHash() runs

  Prism.hooks.add('before-sanity-check', function(env) {
    var pre = env.element.parentNode
    var lines = pre && pre.getAttribute('data-line')

    if (!pre || !lines || !/pre/i.test(pre.nodeName)) {
      return
    }

    /*
      * Cleanup for other plugins (e.g. autoloader).
       *
       * Sometimes <code> blocks are highlighted multiple times. It is necessary
       * to cleanup any left-over tags, because the whitespace inside of the <div>
       * tags change the content of the <code> tag.
       */
    var num = 0
    $$('.line-highlight', pre).forEach(function(line) {</code></div></code>

let code = $element.html()
          // & -> &
          code = escape.amp(code)
          // < -> '<', > -> '>'
          code = escape.tag(code)

          let env = {
            $element: $element,
            language: language,
            grammar: grammar,
            code: code,
            options: options,
          }

          Prism.hooks.run('before-sanity-check', env)

          if (!env.code || !env.grammar) {
            if (env.code) {
              env.element.textContent = env.code
            }
            Prism.hooks.run('complete', env)
            return
          }

          Prism.hooks.run('before-highlight', env)

          let highlightedCode = Prism.highlight(code, grammar)

          env.highlightedCode = highlightedCode
          Prism.hooks.run('before-insert', env)

// Disable spell checking in specific tokens
const noSpellcheckTokens = Object.create(null);
[
  'code',
  'pre',
  'pre gfm',
  'math block',
  'math inline',
  'math expr block',
  'math expr inline',
  'latex block',
]
  .forEach((key) => {
    noSpellcheckTokens[key] = true;
  });
Prism.hooks.add('wrap', (env) => {
  if (noSpellcheckTokens[env.type]) {
    env.attributes.spellcheck = 'false';
  }
});

function createFlagMap(arr) {
  return arr.reduce((map, type) => ({ ...map, [type]: true }), {});
}
const startSectionBlockTypeMap = createFlagMap([
  'paragraph_open',
  'blockquote_open',
  'heading_open',
  'code',
  'fence',
  'table_open',
  'html_block',

togglePlugin('line-numbers', true).then(() => {
        // We only need to register this callback once, but only after the
        // plugin has been loaded once.
        if (!init) {
          init = true;
          Prism.hooks.add('line-numbers', env => {
            const code = env.element;
            const pre = code?.parentNode as HTMLPreElement | null;

            if (pre == null || code == null) {
              return;
            }

            const incoming = code.querySelector('.line-numbers-rows');
            const outgoings = pre.querySelectorAll('.line-numbers-rows');

            for (let i = 0; i < outgoings.length; i++) {
              const outgoing = outgoings[i];

              if (outgoing !== incoming) {
                outgoing.remove();
              }

import {Injectable} from '@angular/core';

import * as prism from 'prismjs';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-bash';

// Prism tries to highlight the whole document on DOMContentLoad.
// Unfortunately with webpack the only way of disabling it
// is by simply forcing it to highlight no elements -> []
prism.hooks.add('before-highlightall', (env) => {
  env['elements'] = [];
});

@Injectable()
export class CodeHighlightService {

  highlight(code: string, lang: string) {
    return prism.highlight(code.trim(), prism.languages[lang], lang);
  }
}

function CodeBlock(props) {
  return (
    
      {props.literal}
    
  );
}

Prism.hooks.add('complete', function(env) {
  if (!env.code) {
    return;
  }
  var pre = env.element.parentNode;
  var clsReg = /\s*\bline-numbers\b\s*/;
  if (
    !pre ||
      !/pre/i.test(pre.nodeName) ||
      (!clsReg.test(pre.className) && !clsReg.test(env.element.className))
  ) {
    return;
  }

  if (env.element.querySelector('.line-numbers-rows')) {
    return;
  }

let $lineNumbersWrapper = $('<span>')
    .attr('aria-hidden', true)
    .addClass('line-numbers-rows')
  for (let i = 0; i &lt; linesNum; i++) {
    $lineNumbersWrapper.append('<span>')
  }

  if ($pre.data('start')) {
    let start = parseInt($pre.data('start'), 10) - 1
    $pre.css('counter-reset', 'linenumber ' + start)
  }

  env.$element.append($lineNumbersWrapper)
}

Prism.hooks.add('complete', lineNumber)

export default lineNumber
</span></span>

public hooks() {
    return Prism.hooks;
  }

const highlight = code => {
  const grammar = Prism.languages["jsx"];
  const language = null;
  const env = {
    code: code,
    grammar: grammar,
    language: language
  };
  Prism.hooks.run("before-tokenize", env);
  env.tokens = Prism.tokenize(env.code, env.grammar);
  Prism.hooks.run("after-tokenize", env);

  env.tokens = addCustomTokens(env.tokens);

  return Prism.Token.stringify(Prism.util.encode(env.tokens), env.language);
};

}
  },
  'td-load': {
    pattern: /td_load>:.*/,
    inside: {
      atrule: /td_load>/,
      punctuation: /:/,
      'td-load-value': {
        pattern: /(\s*).*/,
        lookbehind: true
      }
    }
  }
})

Prism.hooks.add('wrap', (env) => {
  if (env.type === 'td-run-value') {
    const queryId = model().getTDQueryIdFromName(env.content)
    if (queryId) {
      env.tag = 'a'
      env.attributes.target = '_blank'
      env.attributes.href = DIGDAG_CONFIG.td.queryUrl(queryId)
    }
  } else if (env.type === 'td-load-value') {
    env.tag = 'a'
    env.attributes.target = '_blank'
    env.attributes.href = DIGDAG_CONFIG.td.connectorUrl(env.con)
  }
})

type AuthItem = {
  key: string;