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,9 +10,26 @@ const propTypes = {
   section: PropTypes.string
 };
 
-function ChallengeDescription({ description, instructions, section }) {
+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}`}>
+      <div
+        className={`challenge-instructions ${section}`}
+        ref={this.instructionsRef}
+      >
         <div dangerouslySetInnerHTML={{ __html: description }} />
         {instructions && (
           <Fragment>
@@ -23,6 +41,7 @@ function ChallengeDescription({ description, instructions, section }) {
       </div>
     );
   }
+}
 
 ChallengeDescription.displayName = 'ChallengeDescription';
 ChallengeDescription.propTypes = propTypes;