From b9d38ff901321a4ed534815cd3b88c4c146ff946 Mon Sep 17 00:00:00 2001 From: Kris Koishigawa Date: Sun, 22 Jul 2018 11:29:17 +0900 Subject: [PATCH] Did some retooling and was able to disable MathJax for the entire page from a top-level div by adding the class name tex2jax_ignore. Brought the dasherize function into Show.js and used it to pass a new prop section down through Side-Panel.js into Challenge-Description.js to add a section class name to each of the challenge-instructions divs. Then was able to use the delimiters that caused problems before, but only for the Rosetta Code challenges. --- packages/learn/src/html.js | 1 + .../src/templates/Challenges/classic/Show.js | 2 ++ .../components/Challenge-Description.js | 7 ++++--- .../templates/Challenges/components/Side-Panel.js | 15 ++++++++++----- 4 files changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/learn/src/html.js b/packages/learn/src/html.js index efdc49ff40..6d4ea869b5 100644 --- a/packages/learn/src/html.js +++ b/packages/learn/src/html.js @@ -50,6 +50,7 @@ function HTML(props) { {preBodyComponents}
diff --git a/packages/learn/src/templates/Challenges/components/Challenge-Description.js b/packages/learn/src/templates/Challenges/components/Challenge-Description.js index 871f138693..ae3c1bfd99 100644 --- a/packages/learn/src/templates/Challenges/components/Challenge-Description.js +++ b/packages/learn/src/templates/Challenges/components/Challenge-Description.js @@ -6,7 +6,8 @@ import { descriptionRegex } from '../../../../utils'; import './challenge-description.css'; const propTypes = { - description: PropTypes.arrayOf(PropTypes.string) + description: PropTypes.arrayOf(PropTypes.string), + section: PropTypes.string }; function renderDescription(description) { @@ -32,11 +33,11 @@ function renderDescription(description) { }); } -function ChallengeDescription({ description }) { +function ChallengeDescription({ description, section }) { // TODO: Remove bootstrap return ( - + {renderDescription(description)} diff --git a/packages/learn/src/templates/Challenges/components/Side-Panel.js b/packages/learn/src/templates/Challenges/components/Side-Panel.js index de29448840..db75231b70 100644 --- a/packages/learn/src/templates/Challenges/components/Side-Panel.js +++ b/packages/learn/src/templates/Challenges/components/Side-Panel.js @@ -32,6 +32,7 @@ const propTypes = { description: PropTypes.arrayOf(PropTypes.string), guideUrl: PropTypes.string, initConsole: PropTypes.func.isRequired, + section: PropTypes.string, tests: PropTypes.arrayOf(PropTypes.object), title: PropTypes.string }; @@ -41,19 +42,23 @@ export class SidePanel extends PureComponent { super(props); this.bindTopDiv = this.bindTopDiv.bind(this); MathJax.Hub.Config({ - tex2jax: { inlineMath: [['$inlineMath$', '$inlineMath$']] } + tex2jax: { + inlineMath: [['$', '$'], ['\\(', '\\)']], + processEscapes: true, + processClass: 'rosetta-code' + } }); } componentDidMount() { MathJax.Hub.Queue(['Typeset', MathJax.Hub, - document.querySelector('.challenge-instructions')]); + document.querySelector('.rosetta-code')]); this.props.initConsole(''); } componentDidUpdate(prevProps) { MathJax.Hub.Queue(['Typeset', MathJax.Hub, - document.querySelector('.challenge-instructions')]); + document.querySelector('.rosetta-code')]); const { title, initConsole } = this.props; if (title !== prevProps.title) { initConsole(''); @@ -69,14 +74,14 @@ export class SidePanel extends PureComponent { } render() { - const { title, description, guideUrl, tests } = this.props; + const { title, description, guideUrl, tests, section } = this.props; return (
{title} - +