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

refactor(learn): remove static prism css (#39981)

Browse Source
This commit is contained in:
Oliver Eyton-Williams
2020-10-15 14:43:51 +02:00
committed by GitHub
parent 6de5144c8c
commit 89737e1406
2 changed files with 32 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
client/src/components/settings/SolutionViewer.js
View File

@@ -2,7 +2,6 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Panel } from '@freecodecamp/react-bootstrap';
import Prism from 'prismjs';
import Helmet from 'react-helmet';
import './solution-viewer.css';
@@ -13,62 +12,52 @@ const prismLang = {
html: 'markup'
};
function SolutionViewer({
const SolutionViewer = ({
files,
solution = '// The solution is not available for this project'
}) {
const solutions =
files && Array.isArray(files) && files.length ? (
files.map(file => (
<Panel bsStyle='primary' className='solution-viewer' key={file.ext}>
<Panel.Heading>{file.ext.toUpperCase()}</Panel.Heading>
<Panel.Body>
<pre>
<code
className={`language-${prismLang[file.ext]}`}
dangerouslySetInnerHTML={{
__html: Prism.highlight(
file.contents.trim(),
Prism.languages[prismLang[file.ext]]
)
}}
/>
</pre>
</Panel.Body>
</Panel>
))
) : (
<Panel
bsStyle='primary'
className='solution-viewer'
key={solution.slice(0, 10)}
>
<Panel.Heading>JS</Panel.Heading>
}) =>
files && Array.isArray(files) && files.length ? (
files.map(file => (
<Panel bsStyle='primary' className='solution-viewer' key={file.ext}>
<Panel.Heading>{file.ext.toUpperCase()}</Panel.Heading>
<Panel.Body>
<pre>
<code
className='language-markup'
className={`language-${prismLang[file.ext]}`}
dangerouslySetInnerHTML={{
__html: Prism.highlight(
solution.trim(),
Prism.languages.js,
'javascript'
file.contents.trim(),
Prism.languages[prismLang[file.ext]]
)
}}
/>
</pre>
</Panel.Body>
</Panel>
);
return (
<div>
<Helmet>
<link href='/css/prism.css' rel='stylesheet' />
</Helmet>
{solutions}
</div>
))
) : (
<Panel
bsStyle='primary'
className='solution-viewer'
key={solution.slice(0, 10)}
>
<Panel.Heading>JS</Panel.Heading>
<Panel.Body>
<pre>
<code
className='language-markup'
dangerouslySetInnerHTML={{
__html: Prism.highlight(
solution.trim(),
Prism.languages.js,
'javascript'
)
}}
/>
</pre>
</Panel.Body>
</Panel>
);
}
SolutionViewer.displayName = 'SolutionViewer';
SolutionViewer.propTypes = {