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

feat(client): Add syntax highlighting to challenge instructions

Browse Source
This commit is contained in:
Oliver Eyton-Williams
2019-05-17 17:43:05 +02:00
committed by Mrugesh Mohapatra
parent 31536daf5e
commit 38c7fdfb23
1 changed files with 33 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
client/src/templates/Challenges/components/Challenge-Description.js
View File

@ -1,4 +1,5 @@
import React, { Fragment } from 'react'; import React, { Fragment, Component } from 'react';
import Prism from 'prismjs';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './challenge-description.css'; import './challenge-description.css';
@ -9,19 +10,37 @@ const propTypes = {
section: PropTypes.string section: PropTypes.string
}; };
function ChallengeDescription({ description, instructions, section }) { class ChallengeDescription extends Component {
return ( componentDidMount() {
<div className={`challenge-instructions ${section}`}> // Just in case 'current' has not been created, though it should have been.
<div dangerouslySetInnerHTML={{ __html: description }} /> if (this.instructionsRef.current) {
{instructions && ( Prism.highlightAllUnder(this.instructionsRef.current);
<Fragment> }
<hr /> }
<div dangerouslySetInnerHTML={{ __html: instructions }} />
</Fragment> constructor(props) {
)} super(props);
<hr /> this.instructionsRef = React.createRef();
</div> }
);
render() {
const { description, instructions, section } = this.props;
return (
<div
className={`challenge-instructions ${section}`}
ref={this.instructionsRef}
>
<div dangerouslySetInnerHTML={{ __html: description }} />
{instructions && (
<Fragment>
<hr />
<div dangerouslySetInnerHTML={{ __html: instructions }} />
</Fragment>
)}
<hr />
</div>
);
}
} }
ChallengeDescription.displayName = 'ChallengeDescription'; ChallengeDescription.displayName = 'ChallengeDescription';