From 8601b5244f853ec10e7a9d6261554f7985d1a174 Mon Sep 17 00:00:00 2001
From: Jasper Borsboom <firecai2@gmail.com>
Date: Tue, 20 Apr 2021 11:13:21 +0200
Subject: [PATCH 1/2] Update code for modern react

using newer version of prop-types, refs, and highlight.js 10 since older versions are deprecated
---
 src/Highlight.js | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/Highlight.js b/src/Highlight.js
index 980ba24..45834c4 100644
--- a/src/Highlight.js
+++ b/src/Highlight.js
@@ -1,27 +1,25 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { findDOMNode } from 'react-dom'
-import highlight from 'highlight.js'
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import highlight from 'highlight.js';
 
 export default class Highlight extends Component {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    className: PropTypes.string,
-    language: PropTypes.string,
-    style: PropTypes.object
+
+  constructor(props) {
+    super(props);
+    this.code = React.createRef();
   }
 
   componentDidMount () {
-    highlight.highlightBlock(findDOMNode(this.refs.code))
+    highlight.highlightElement(this.code.current);
   }
 
   componentDidUpdate () {
-    highlight.initHighlighting.called = false
-    highlight.highlightBlock(findDOMNode(this.refs.code))
+    highlight.initHighlighting.called = false;
+    highlight.highlightElement(this.code.current);
   }
 
   render () {
-    const { children, className, language, style } = this.props
+    const { children, className, language, style } = this.props;
 
     return (
       <pre
@@ -30,7 +28,7 @@ export default class Highlight extends Component {
       >
         <code
           className={language}
-          ref='code'
+          ref={this.code}
         >
           {children}
         </code>
@@ -38,3 +36,10 @@ export default class Highlight extends Component {
     )
   }
 }
+
+Highlight.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  language: PropTypes.string,
+  style: PropTypes.object
+}

From 4ff7fbd2894086c53649a2ede574f09befb312f5 Mon Sep 17 00:00:00 2001
From: Jasper Borsboom <firecai2@gmail.com>
Date: Tue, 31 Aug 2021 11:44:13 +0200
Subject: [PATCH 2/2] Update to function component

also fixes lifecycle to be up to new highlight.js standard
---
 src/Highlight.js | 49 +++++++++++++++++++-----------------------------
 1 file changed, 19 insertions(+), 30 deletions(-)

diff --git a/src/Highlight.js b/src/Highlight.js
index 45834c4..49a730f 100644
--- a/src/Highlight.js
+++ b/src/Highlight.js
@@ -1,44 +1,33 @@
-import React, { Component } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import highlight from 'highlight.js';
 
-export default class Highlight extends Component {
+export default function Highlight(props) {
 
-  constructor(props) {
-    super(props);
-    this.code = React.createRef();
-  }
+  const { text, className, language, style } = props;
 
-  componentDidMount () {
-    highlight.highlightElement(this.code.current);
-  }
+  const code = useRef(null);
 
-  componentDidUpdate () {
-    highlight.initHighlighting.called = false;
-    highlight.highlightElement(this.code.current);
-  }
+  useEffect(() => highlight.highlightElement(code.current), [text])
 
-  render () {
-    const { children, className, language, style } = this.props;
-
-    return (
-      <pre
-        className={className}
-        style={style}
+  return (
+    <pre
+      className={className}
+      style={style}
+    >
+      <code
+        className={language}
+        ref={code}
       >
-        <code
-          className={language}
-          ref={this.code}
-        >
-          {children}
-        </code>
-      </pre>
-    )
-  }
+        {text}
+      </code>
+    </pre>
+  )
+  
 }
 
 Highlight.propTypes = {
-  children: PropTypes.node.isRequired,
+  text: PropTypes.string.isRequired,
   className: PropTypes.string,
   language: PropTypes.string,
   style: PropTypes.object