feat(client): Add syntax highlighting to challenge instructions

client/src/templates/Challenges/components/Challenge-Description.js

@@ -1,4 +1,5 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, Component } from 'react';
+import Prism from 'prismjs';
 import PropTypes from 'prop-types';
 
 import './challenge-description.css';
@@ -9,19 +10,37 @@ const propTypes = {
   section: PropTypes.string
 };
 
-function ChallengeDescription({ description, instructions, section }) {
-  return (
-    <div className={`challenge-instructions ${section}`}>
-      <div dangerouslySetInnerHTML={{ __html: description }} />
-      {instructions && (
-        <Fragment>
-          <hr />
-          <div dangerouslySetInnerHTML={{ __html: instructions }} />
-        </Fragment>
-      )}
-      <hr />
-    </div>
-  );
+class ChallengeDescription extends Component {
+  componentDidMount() {
+    // Just in case 'current' has not been created, though it should have been.
+    if (this.instructionsRef.current) {
+      Prism.highlightAllUnder(this.instructionsRef.current);
+    }
+  }
+
+  constructor(props) {
+    super(props);
+    this.instructionsRef = React.createRef();
+  }
+
+  render() {
+    const { description, instructions, section } = this.props;
+    return (
+      <div
+        className={`challenge-instructions ${section}`}
+        ref={this.instructionsRef}
+      >
+        <div dangerouslySetInnerHTML={{ __html: description }} />
+        {instructions && (
+          <Fragment>
+            <hr />
+            <div dangerouslySetInnerHTML={{ __html: instructions }} />
+          </Fragment>
+        )}
+        <hr />
+      </div>
+    );
+  }
 }
 
 ChallengeDescription.displayName = 'ChallengeDescription';