NEXT - Format Code Blocks on Blog Posts (#373)

* initial changes to allow formatting of content in blog

* basic solution without syntax highlighting

* potential fix to pipeline error (?)

* basic code block with syntax highlighting complete

* temp fix for scrolling lines in codeblocks

* fixed wrapping issue

* removed php support - issue with PrismJs library

* fix to word wrap issue

* added margin to footer to add some space when a blogpost ends with a code block

* removed rogue print statement

* removed rogue print statement (again)

* removed deprecated code

---------

Co-authored-by: Josh Ramos <josh.ramos@student.unsw.edu.au>

Author: josh-ramos-22

frontend/src/packages/editor/components/CodeBlock.tsx

@@ -26,7 +26,6 @@ import 'prismjs/components/prism-typescript';
 import 'prismjs/components/prism-tsx';
 import 'prismjs/components/prism-markdown';
 import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-php';
 import 'prismjs/components/prism-sql';
 import 'prismjs/components/prism-java';
 import 'prismjs/components/prism-c';
@@ -87,7 +86,6 @@ const LanguageSelect = (props: JSX.IntrinsicElements['select']) => {
       <option value="markdown">Markdown</option>
       <option value="c">C</option>
       <option value="cpp">C++</option>
-      <option value="php">PHP</option>
       <option value="python">Python</option>
       <option value="sql">SQL</option>
       <option value="bash">Shell</option>

next/package-lock.json

@@ -13,12 +13,15 @@
     "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "@mui/material": "5.10.6",
+    "@types/prismjs": "^1.26.0",
     "@types/styled-components": "5.1.25",
     "framer-motion": "7.3.6",
     "next": "12.3.1",
+    "prismjs": "^1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-is": "18.2.0",
+    "redux-persist": "^6.0.0",
     "sharp": "0.31.0",
     "styled-components": "5.3.5"
   },

next/package.json

@@ -50,6 +50,27 @@ const ParagraphContainer = styled.div`
   }
 `;
 
+const CodeContainer = styled.div`
+  margin: 0em;
+  padding-left: 0.5em;
+  font-family: monospace;
+  background: #f5f2f0;
+`
+
+const CodeLineWrapper = styled.pre`
+  margin: 0px !important;
+  padding: 1.5px !important; 
+  overflow: hide !important;
+  `
+  
+  const CodeLine = styled.code`
+  margin: 0px !important;
+  padding: 0px !important;
+  font-size: 0.85rem !important;
+  white-space: pre-wrap !important;
+  word-break: break-word !important;
+  `
+
 const BlogContainer = styled.div`
   font-size: 1.25rem;
   margin: 0px 60px;
@@ -77,4 +98,7 @@ export {
   BlogContainer,
   BlogHeading,
   ParagraphContainer,
+  CodeContainer,
+  CodeLine,
+  CodeLineWrapper
 };

next/src/components/blog/Blog-styled.tsx

@@ -6,13 +6,63 @@ import {
   ImagePlaceholder,
   AlignedText,
   BlogContainer,
+  CodeContainer,
+  CodeLine,
+  CodeLineWrapper,
 } from "./Blog-styled";
 import type { Element, Block } from "./types";
 
+import Prism from 'prismjs';
+import 'prismjs/themes/prism.css';
+import { useEffect } from "react";
+
+// Supported Languages
+//
+// For all languages supported by Prism, visit https://prismjs.com/
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-tsx';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-prolog';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-latex';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-go'
+import 'prismjs/components/prism-haskell';
+import 'prismjs/components/prism-perl';
+
 const Block = ({ element }: { element: Element }) => {
+  useEffect(() => {
+    Prism.highlightAll();
+  }, []);
+  
   if (element.type === "image") {
     return <ImagePlaceholder>{element.url}</ImagePlaceholder>;
   }
+
+  if (element.type === "code") {
+    const language = "language-" + (element.language ?? "python");
+
+    return (
+      <CodeContainer>
+          {element.children.map(({ text, ...textStyle }, idx) => (
+            <CodeLineWrapper key={idx}> 
+              <CodeLine className={language}>
+                {text}
+              </CodeLine>
+            </CodeLineWrapper>
+        ))}
+        </CodeContainer>
+    )
+  }
+
   return (
     <ParagraphContainer>
       {element.children.map(({ text, link, ...textStyle }, idx) => (

next/src/components/blog/Blog.tsx

@@ -6,7 +6,7 @@ export interface Document {
 
 export type Block = Element[];
 
-export type Element = Paragraph | Image;
+export type Element = Paragraph | Image | Code;
 
 interface Paragraph {
   type: "paragraph";
@@ -18,11 +18,22 @@ interface Image {
   url: string;
 }
 
+interface Code {
+  type: "code";
+  language: String;
+  children: CodeLine[]
+}
+
 interface Text extends TextStyle {
   text: string;
   link?: string;
 }
 
+interface CodeLine extends TextStyle {
+  text: string;
+  language: string;
+}
+
 export interface TextStyle {
   bold?: boolean;
   italic?: boolean;

next/src/components/blog/types.ts

@@ -29,6 +29,7 @@ const FooterComponent = styled.footer`
   background-color: #A09FE3;
   padding: 2rem;
   display: flex;
+  margin-top: 1.5em;
   flex-direction: column;
 
   @media ${device.tablet} {

next/src/components/footer/Footer.tsx

@@ -49,6 +49,7 @@ export const getServerSideProps: GetServerSideProps = async ({ params }) => {
       method: "GET",
     }
   ).then((res) => res.text());
+
   return { props: { data: JSON.parse(data).Contents } };
 };