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.pull/18188/head
parent
15ae4827ec
commit
02b009fd42
|
@ -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;
|
||||
|
|
|
@ -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;
|
|
@ -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('');
|
||||
|
|
|
@ -0,0 +1,6 @@
|
|||
.MathJax,
|
||||
.MathJax_SVG,
|
||||
.MathJax_Display {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
Loading…
Reference in New Issue