gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Kris Koishigawa
2018-07-22 11:29:17 +09:00
committed by Mrugesh Mohapatra
parent 670fe4194e
commit b9d38ff901
4 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/learn/src/html.js
View File

@ -50,6 +50,7 @@ function HTML(props) {
<body {...bodyAttributes}>
{preBodyComponents}
<div
className='tex2jax_ignore'
dangerouslySetInnerHTML={{ __html: body }}
id='___gatsby'
key={'body'}

2
packages/learn/src/templates/Challenges/classic/Show.js
View File

@ -19,6 +19,7 @@ import { randomCompliment } from '../utils/get-words';
import { createGuideUrl } from '../utils';
import { challengeTypes } from '../../../../utils/challengeTypes';
import { ChallengeNode } from '../../../redux/propTypes';
import { dasherize } from '../../../../utils';
import {
createFiles,
challengeFilesSelector,
@ -220,6 +221,7 @@ class ShowClassic extends PureComponent {
className='full-height'
description={description}
guideUrl={createGuideUrl(slug)}
section={dasherize(blockName)}
title={blockNameTitle}
/>
</ReflexElement>

7
packages/learn/src/templates/Challenges/components/Challenge-Description.js
View File

@ -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 (
<Row>
<Col className='challenge-instructions' xs={12}>
<Col className={`challenge-instructions ${section}`} xs={12}>
{renderDescription(description)}
</Col>
</Row>

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

@ -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 (
<div className='instructions-panel' role='complementary'>
<div ref={this.bindTopDiv} />
<Spacer />
<div>
<ChallengeTitle>{title}</ChallengeTitle>
<ChallengeDescription description={description} />
<ChallengeDescription section={section} description={description} />
</div>
<ToolPanel guideUrl={guideUrl} />
<TestSuite tests={tests} />