fix: wrapper for latex rendering and adjust formatting

Author: ben-brooker

.circleci/config.yml

@@ -102,6 +102,7 @@ workflows:
           aws-secret-access-key: $OPS_AWS_SECRET_ACCESS_KEY
           account-url: $OPS_ECR_URL
           puller-account-ids: '["301258414863", "487088987264"]'
+          docker-version: 20.10.2
       - datacamp-deploy/deploy: # Staging
           environment: staging
           aws-access-key-id: $STAGING_AWS_ACCESS_KEY_ID

Dockerfile

@@ -1,4 +1,4 @@
-ARG NODE_VERSION=12.14-alpine3.9
+ARG NODE_VERSION=16.4-alpine3.11
 
 FROM node:${NODE_VERSION} as dependencies
 
@@ -7,7 +7,7 @@ WORKDIR /usr/app
 # First copy only package.json & yarn.lock and run yarn install, this will make
 # docker cache these steps if those files didn't change
 COPY package.json yarn.lock ./
-RUN yarn install
+RUN yarn install --frozen-lock-file
 
 # Copy all the other source files we need to build
 COPY . . 

components/Html.tsx

@@ -1,13 +1,20 @@
+import { MathJax, MathJaxContext } from "better-react-mathjax";
+
 type Props = {
   children: string;
   className?: string;
 };
 
 export default function Html({ children, className }: Props) {
   return (
-    <span
-      className={className}
-      dangerouslySetInnerHTML={{ __html: children }}
-    />
+    <MathJaxContext>
+      <MathJax>
+        <span
+          className={className}
+          dangerouslySetInnerHTML={{ __html: children }}
+        />
+      </MathJax>
+    </MathJaxContext>
+    
   );
 }