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

client/src/components/settings/SolutionViewer.js

@@ -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,11 +12,10 @@ 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}>
@@ -60,15 +58,6 @@ function SolutionViewer({
       </Panel.Body>
     </Panel>
   );
-  return (
-    <div>
-      <Helmet>
-        <link href='/css/prism.css' rel='stylesheet' />
-      </Helmet>
-      {solutions}
-    </div>
-  );
-}
 
 SolutionViewer.displayName = 'SolutionViewer';
 SolutionViewer.propTypes = {

client/static/css/prism.css

@@ -1,138 +0,0 @@
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-
- code[class*="language-"],
- pre[class*="language-"] {
-   color: black;
-   background: none;
-   text-shadow: 0 1px white;
-   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-   text-align: left;
-   white-space: pre;
-   word-spacing: normal;
-   word-break: normal;
-   word-wrap: normal;
-   line-height: 1.5;
-
-   -moz-tab-size: 4;
-   -o-tab-size: 4;
-   tab-size: 4;
-
-   -webkit-hyphens: none;
-   -moz-hyphens: none;
-   -ms-hyphens: none;
-   hyphens: none;
- }
-
- pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
- code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-   text-shadow: none;
-   background: #b3d4fc;
- }
-
- pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
- code[class*="language-"]::selection, code[class*="language-"] ::selection {
-   text-shadow: none;
-   background: #b3d4fc;
- }
-
- @media print {
-   code[class*="language-"],
-   pre[class*="language-"] {
-     text-shadow: none;
-   }
- }
-
- /* Code blocks */
- pre[class*="language-"] {
-   padding: 1em;
-   margin: .5em 0;
-   overflow: auto;
- }
-
- :not(pre) > code[class*="language-"],
- pre[class*="language-"] {
-   background: #f5f2f0;
- }
-
- /* Inline code */
- :not(pre) > code[class*="language-"] {
-   padding: .1em;
-   border-radius: .3em;
-   white-space: normal;
- }
-
- .token.comment,
- .token.prolog,
- .token.doctype,
- .token.cdata {
-   color: slategray;
- }
-
- .token.punctuation {
-   color: #999;
- }
-
- .namespace {
-   opacity: .7;
- }
-
- .token.property,
- .token.tag,
- .token.boolean,
- .token.number,
- .token.constant,
- .token.symbol,
- .token.deleted {
-   color: #905;
- }
-
- .token.selector,
- .token.attr-name,
- .token.string,
- .token.char,
- .token.builtin,
- .token.inserted {
-   color: #690;
- }
-
- .token.operator,
- .token.entity,
- .token.url,
- .language-css .token.string,
- .style .token.string {
-   color: #9a6e3a;
-   background: hsla(0, 0%, 100%, .5);
- }
-
- .token.atrule,
- .token.attr-value,
- .token.keyword {
-   color: #07a;
- }
-
- .token.function,
- .token.class-name {
-   color: #DD4A68;
- }
-
- .token.regex,
- .token.important,
- .token.variable {
-   color: #e90;
- }
-
- .token.important,
- .token.bold {
-   font-weight: bold;
- }
- .token.italic {
-   font-style: italic;
- }
-
- .token.entity {
-   cursor: help;
- }