Prismjs syntax highlighting with React TypeScript example

react-typescript-prismjs.md

1. Install

npm i prismjs
npm i -D @types/prismjs

2. Import

import React, { useEffect } from 'react'
import Prism from 'prismjs'
import 'prismjs/components/prism-javascript' // Language
import 'prismjs/themes/prism-okaidia.css' // Theme

function App() {

  // Init
  useEffect(() => {
    Prism.highlightAll()
  }, [])
  
  // Usage
  return (
     <div className="App">
        <pre>
          <code className="language-javascript">
            &lt;div&gt; Markup here... &lt;/div&gt;
          </code>
        </pre>
     </div>
  )
}

export default App