How to use the refractor.highlight function in refractor

const className = getLangClass(node);
    const { highlightLines, splitLanguage } = parseLineNumberRange(className);
    const lang = getLanguage(splitLanguage);
    const markers = highlightLines;

    if (lang === null) {
      return;
    }

    let result;
    try {
      parent.properties.className = (parent.properties.className || []).concat(
        "language-" + lang
      );

      result = refractor.highlight(nodeToString(node), lang);

      if (markers && markers.length > 0) {
        // This blocks attempts this fix:
        // https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-prismjs/src/directives.js#L113-L119
        const PLAIN_TEXT_WITH_LF_TEST = /<span class="token plain-text">[^&lt;]*\n[^&lt;]*&lt;\/span&gt;/g;

        // AST to HTML
        let html_ = rehype()
          .stringify({ type: "root", children: result })
          .toString();

        // Fix JSX issue
        html_ = html_.replace(PLAIN_TEXT_WITH_LF_TEST, match =&gt; {
          return match.replace(
            /\n/g,
            '</span>\n<span class="token plain-text">'</span>

export default ({ children, className }) => (
  <pre>    {className ? (
      <code>
    ) : (
      <code>{children}</code>
    )}

    <style>
      {`
        pre {
          background-color: var(--lighter-gray);
          color: var(--fg);
          padding: 1rem;
          border-radius: 5px;
          font-size: 1rem;</style></code></pre>

if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code') {
      return
    }

    const lang = getLanguage(node, options.aliases || aliases)

    if (lang === null) {
      return
    }

    let result = node
    try {
      parent.properties.className = (parent.properties.className || []).concat(
        'language-' + lang,
      )
      result = refractor.highlight(nodeToString(node), lang)
    } catch (err) {
      if (/Unknown language/.test(err.message)) {
        return
      }
      throw err
    }

    node.children = []
    node.properties.dangerouslySetInnerHTML = {
      __html: nodeToHTML({
        type: 'root',
        children: result,
      }),
    }
  }
}

function visitor(node, index, parent) {
    if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code') {
      return;
    }

    const lang = getLanguage(node);

    if (lang === null) {
      return;
    }

    let result;
    try {
      parent.properties.className = (parent.properties.className || [])
        .concat('language-' + lang);
      result = refractor.highlight(nodeToString(node), lang);
    } catch (err) {
      if (options.ignoreMissing && /Unknown language/.test(err.message)) {
        return;
      }
      throw err;
    }

    node.children = result;
  }
};

if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code') {
      return
    }

    const lang = getLanguage(node, options.aliases || aliases)

    if (lang === null) {
      return
    }

    let result = node
    try {
      parent.properties.className = (parent.properties.className || []).concat(
        'language-' + lang,
      )
      result = refractor.highlight(nodeToString(node), lang)
    } catch (err) {
      if (/Unknown language/.test(err.message)) {
        return
      }
      throw err
    }

    node.children = []
    node.properties.dangerouslySetInnerHTML = {
      __html: nodeToHTML({
        type: 'root',
        children: result,
      }),
    }
  }
}

const getHast = (code: string, lang: string): RefractorNode[] | null => {
  if (!lang) return null;
  if (!refractor.registered(lang)) {
    try {
      refractor.register(require(`refractor/lang/${lang}.js`));
    } catch (ex) {}
  }
  if (refractor.registered(lang)) {
    return refractor.highlight(code, lang);
  }
  return null;
};