From 02b009fd424916c3c745f88be4b75dea822affdb Mon Sep 17 00:00:00 2001
From: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>
Date: Fri, 15 Jun 2018 16:44:29 +0900
Subject: [PATCH] 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                   |  3 ++-
 packages/learn/src/head/mathjax.js                 | 14 ++++++++++++++
 .../templates/Challenges/components/Side-Panel.js  | 12 ++++++++++--
 .../templates/Challenges/components/side-panel.css |  6 ++++++
 4 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 packages/learn/src/head/mathjax.js
 create mode 100644 packages/learn/src/templates/Challenges/components/side-panel.css

diff --git a/packages/learn/src/head/index.js b/packages/learn/src/head/index.js
index 925c13f5f6..51da3baab3 100644
--- a/packages/learn/src/head/index.js
+++ b/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;
diff --git a/packages/learn/src/head/mathjax.js b/packages/learn/src/head/mathjax.js
new file mode 100644
index 0000000000..1b70ebacf2
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/packages/learn/src/templates/Challenges/components/Side-Panel.js b/packages/learn/src/templates/Challenges/components/Side-Panel.js
index ed5d303816..e5d636ac2e 100644
--- a/packages/learn/src/templates/Challenges/components/Side-Panel.js
+++ b/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('');
diff --git a/packages/learn/src/templates/Challenges/components/side-panel.css b/packages/learn/src/templates/Challenges/components/side-panel.css
new file mode 100644
index 0000000000..2820273da0
--- /dev/null
+++ b/packages/learn/src/templates/Challenges/components/side-panel.css
@@ -0,0 +1,6 @@
+.MathJax,
+.MathJax_SVG,
+.MathJax_Display {
+  max-width: 100%;
+  overflow-x: auto;
+}
\ No newline at end of file