Feature: Added CodeBlock Component Using Syntax Highlighter (#241)

* Using SyntaxHighlighter package

* Added CodeBlock Component

package.json

@@ -20,26 +20,28 @@
     "@mui/system": "^5.14.15",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
+    "@types/react-syntax-highlighter": "^15.5.11",
     "@types/webpack-env": "^1.18.1",
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
     "eslint-plugin-prettier": "^4.2.1",
     "katex": "^0.16.4",
     "prettier": "^2.8.7",
     "react": "^18.2.0",
-    "react-code-blocks": "^0.1.5",
     "react-confetti-explosion": "^2.1.2",
     "react-dom": "^18.2.0",
     "react-latex-next": "^2.2.0",
     "react-router-dom": "^6.12.0",
     "react-select": "^5.7.2",
+    "react-syntax-highlighter": "^15.5.0",
     "stylelint-config-prettier": "^9.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.22.14",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.11",
+    "@types/react-syntax-highlighter": "^15.5.11",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
     "babel-loader": "^9.1.2",
@@ -74,6 +76,6 @@
     "webpack-manifest-plugin": "^5.0.0",
     "webpack-merge": "^5.8.0",
     "webpack-nano": "^1.1.1",
-    "webpack-pwa-manifest": "^4.3.0"
+    "webpack-pwa-manifest": "^4.0.0"
   }
 }

src/components/binary-comps/BinaryCode.tsx

@@ -112,6 +112,7 @@ function BinaryCode(): JSX.Element {
   return (
     <>
       <FinishCodeCard
+        name=""
         description="Your answer will be tested with the given words array at the start with the target word 'pear'."
         correct_answer={[
           givenBinarySearch(arr, 'pear', 0, arr.length - 1) ===

src/components/dining-comps/DiningUnderstand.tsx

@@ -1,10 +1,14 @@
 import DiningTree from './DiningTree';
-import Blue from '../shared/Blue';
+import CodeBlock from '../shared/CodeBlock';
 import Goal from '../shared/Goal';
-import Gold from '../shared/Gold';
-import Tab from '../shared/Tab';
 import '../../pages/Problem2.scss';
 
+const code = `class Friend:
+    def __init__(self, val, left = None, right = None):
+        self.val = val
+        self.left = left
+        self.right = right`;
+
 function DiningUnderstand(): JSX.Element {
   return (
     <div>
@@ -21,42 +25,7 @@ function DiningUnderstand(): JSX.Element {
       <br />
       <div className="goal-container" style={{ gap: '50px' }}>
         <div className="left-align">
-          <Blue>class Friend</Blue>:
-          <br />
-          <Tab>
-            <>
-              <Blue>def </Blue>
-              <span
-                style={{
-                  textDecoration: 'underline #736000',
-                  whiteSpace: 'pre',
-                }}
-              >
-                {'    '}
-              </span>
-              <Gold>init</Gold>
-              <span
-                style={{
-                  textDecoration: 'underline #736000',
-                  whiteSpace: 'pre',
-                }}
-              >
-                {'    '}
-              </span>
-              (self, val, <br />
-              left = <Blue>None</Blue>, right = <Blue>None</Blue>):
-              <br />
-              <Tab>
-                <>
-                  self.val = val
-                  <br />
-                  self.left = left
-                  <br />
-                  self.right = right
-                </>
-              </Tab>
-            </>
-          </Tab>
+          <CodeBlock language="python" code={code}></CodeBlock>
         </div>
         <table className="left-align">
           <thead>

src/components/shared/CodeBlock.tsx

@@ -0,0 +1,29 @@
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/default-highlight';
+import { atomOneLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+
+interface CodeBlockProps {
+  code: string;
+  language: string;
+}
+
+const customStyle = {
+  lineHeight: '1.5',
+  fontSize: '1rem',
+};
+
+const CodeBlock = (props: CodeBlockProps): JSX.Element => {
+  return (
+    <div>
+      <SyntaxHighlighter
+        language={props.language}
+        showLineNumbers={false}
+        style={atomOneLight}
+        customStyle={customStyle}
+      >
+        {props.code}
+      </SyntaxHighlighter>
+    </div>
+  );
+};
+
+export default CodeBlock;

src/pages/Intro.tsx

@@ -1,12 +1,11 @@
 import { faGreaterThan, faLessThan } from '@fortawesome/free-solid-svg-icons';
 import { FC } from 'react';
-import { CodeBlock, dracula } from 'react-code-blocks';
 import Latex from 'react-latex-next';
-
 import FactorialQuestion from '../components/intro_comps/FactorialQuestion';
 import IntroCode from '../components/intro_comps/intro_code';
 import AppWrapper from '../components/shared/AppWrapper';
 import Button from '../components/shared/Button';
+import CodeBlock from '../components/shared/CodeBlock';
 import { HeaderSections } from '../components/shared/globalTypes';
 import './intro.scss';
 
@@ -24,29 +23,14 @@ const slides: { url: string }[] = importAll(
   require.context('../assets/', false, /Variant\d\.(png|jpe?g|svg)$/)
 );
 
-function recursionCodeBlock(
-  code: string,
-  language: string,
-  showLineNumbers: boolean,
-  startingLineNumber: number
-) {
-  return (
-    <CodeBlock
-      text={code}
-      language={language}
-      showLineNumbers={showLineNumbers}
-      startingLineNumber={startingLineNumber}
-      theme={dracula}
-    />
-  );
+function recursionCodeBlock(code: string) {
+  return <CodeBlock language="python" code={code}></CodeBlock>;
 }
-const code = `void doSomething() {
-    //---- do stuff ----
-    cout << "did something" << endl;
-    //------------------
-
-    doSomething();
-}`;
+const code = `def doSomething():
+    #---- do stuff ----
+    print("did something")
+    #------------------
+    doSomething()`;
 
 const Intro: FC = () => {
   return (
@@ -81,7 +65,7 @@ const Intro: FC = () => {
                     fontFamily: 'monospace',
                   }}
                 >
-                  {recursionCodeBlock(code, 'cpp', true, 1)}
+                  {recursionCodeBlock(code)}
                 </div>
                 <Latex>
                   {`