title: How to load custom prismjs syntax file in react?
body: <p><strong>Question Desp</strong>: How could I highlight a custom syntax with prismjs in a react project?</p>
  
  <p>I've created an extending syntax file (let's call it <code>newlang</code>) by following the <a href="https://prismjs.com/extending.html" rel="nofollow noreferrer">guide</a>. </p>
  
  <p>And I know in prismjs there are three ways to highlight code: </p>
  
  <ul>
  <li><code>highlightElement()</code></li>
  <li><code>highlightAll()</code></li>
  <li><code>highlight()</code></li>
  </ul>
  
  <p>First, I tried to require my custom syntax file in my app.</p>
  
  <p><code>import 'utils/highlight/prism-newlang';</code></p>
  
  <p>Then, in my highlighting component,</p>
  
  <ul>
  <li>Method 1: <code>highlightElement()</code> : ❌<strong>CANNOT</strong> get my code highlighting</li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>import Prism from 'prismjs';
  
  function CodeHighlight({ value, language }) {
    const codeEle = useRef(null);
  
    useEffect(() =&gt; {
      Prism.highlightElement(codeEle.current, false);
    }, []);
  
    return (
      &lt;pre className={`language-${language}`}&gt;
        &lt;code ref={codeEle} className={`language-${language}`}&gt;
          {value}
        &lt;/code&gt;
      &lt;/pre&gt;
    );
  }
  </code></pre>
  
  <ul>
  <li>Method 2: <code>highlightAll()</code> : ❌<strong>CANNOT</strong> get my code highlighting</li>
  <li>Method 3: <code>highlight()</code> : ✅<strong>CAN</strong> get my code highlighting</li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>import { highlight, languages } from 'prismjs/components/prism-core';
  
  function CodeHighlight({ value, language }) {
    const codeNode = useRef(null);
  
    useEffect(() =&gt; {
      const code = codeNode.current.textContent;
      const highlightHTML = highlightCode(code, language);
      codeNode.current.innerHTML = highlightHTML;
    });
  
    return (
      &lt;pre className={`language-${language}`}&gt;
        &lt;code ref={codeNode} className={`language-${language}`}&gt;
          {value}
        &lt;/code&gt;
      &lt;/pre&gt;
    );
  }
  </code></pre>
  
  <p>I wonder what's the problem of Method 1 &amp; 2. (Will be the matter of the loading order of custom syntax file?)</p>