Add MathJax (#150)

Added a script tag to the header of the page in src/head/index.js via src/head/mathjax.js. Modified Side-Panel.js so that mathematical functions are rendered properly in the Rosetta Code problems. Had to use the CDN because I couldn't get the NPM package working, and a local package like the one used in Arcade Mode would be ignored if put into the public folder. We could probably use that local package if there's a better place to store it.

Since MathJax is set up currently to interpret anything between $...$ or $$...$$ as a math function, we will need to check some of the other problems that use those symbols on the same line.

packages/learn/src/head/index.js

@@ -1,9 +1,10 @@
 import favicons from './favicons';
 import meta from './meta';
 import styleSheets from './styleSheets';
+import mathjax from './mathjax';
 
 const metaAndStyleSheets = meta
-  .concat(favicons, styleSheets)
+  .concat(favicons, styleSheets, mathjax)
   .map((element, i) => ({ ...element, key: `meta-stylesheet-${i}` }));
 
 export default metaAndStyleSheets;

packages/learn/src/head/mathjax.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const cdnAddr = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/' +
+'2.7.4/MathJax.js?config=TeX-AMS_HTML';
+
+const mathjax = [
+  <script
+    key='mathjax'
+    type='text/javascript'
+    src={cdnAddr}
+  />
+];
+  
+export default mathjax;

packages/learn/src/templates/Challenges/components/Side-Panel.js

@@ -12,6 +12,7 @@ import Spacer from '../../../components/util/Spacer';
 
 import { initConsole, challengeTestsSelector } from '../redux';
 import { createSelector } from 'reselect';
+import './side-panel.css';
 
 const mapStateToProps = createSelector(challengeTestsSelector, tests => ({
   tests
@@ -23,7 +24,9 @@ const mapDispatchToProps = dispatch =>
       initConsole
     },
     dispatch
-  );
+	);
+
+const MathJax = global.MathJax;
 
 const propTypes = {
   description: PropTypes.arrayOf(PropTypes.string),
@@ -36,14 +39,19 @@ const propTypes = {
 export class SidePanel extends PureComponent {
   constructor(props) {
     super(props);
-    this.bindTopDiv = this.bindTopDiv.bind(this);
+		this.bindTopDiv = this.bindTopDiv.bind(this);
+		MathJax.Hub.Config({
+      tex2jax: { inlineMath: [['$', '$'], ['\\(', '\\)']] }
+    });
   }
 
   componentDidMount() {
+		MathJax.Hub.Queue(['Typeset', MathJax.Hub, document.querySelector('.challenge-instructions')]);
     this.props.initConsole('');
   }
 
   componentDidUpdate(prevProps) {
+    MathJax.Hub.Queue(['Typeset', MathJax.Hub, document.querySelector('.challenge-instructions')]);
     const { title, initConsole } = this.props;
     if (title !== prevProps.title) {
       initConsole('');

packages/learn/src/templates/Challenges/components/side-panel.css

@@ -0,0 +1,6 @@
+.MathJax,
+.MathJax_SVG,
+.MathJax_Display {
+  max-width: 100%;
+  overflow-x: auto;
+}