feat: Hydras code highlighted

next/.nvmrc

+12

next/package.json

@@ -20,6 +20,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-player": "^2.9.0",
+    "react-syntax-highlighter": "^15.4.3",
     "remark": "^13.0.0",
     "remark-html": "^13.0.1"
   },

next/pages/hydra/[id].js

+import SyntaxHighlighter from "react-syntax-highlighter";
 import Head from "next/head";
 import Layout from "../../components/layout";
 import HydraSynth from "../../components/hydra";
 import Date from "../../components/date";
-const https = require('https')
+const https = require("https");
 
 import utilStyles from "../../styles/utils.module.css";
 import { getAllHydraIds, getHydraData } from "../../lib/hydras";
@@ -12,7 +13,7 @@ export async function getStaticProps({ params }) {
 
   const response = await fetch(hydraData.source);
   const source = await response.text();
-  const sourceCode = source.replace(/(?:\r\n|\r|\n)/g, '<br>');
+  const sourceCode = source.replace(/(?:\r\n|\r|\n)/g, "<br>");
   console.log(sourceCode);
 
   hydraData.source = source;
@@ -20,7 +21,7 @@ export async function getStaticProps({ params }) {
   return {
     props: {
       hydraData,
-      sourceCode
+      sourceCode,
     },
   };
 }
@@ -41,12 +42,15 @@ export default function Hydra({ hydraData, sourceCode }) {
       </Head>
       <article>
         <h1 className={utilStyles.headingXl}>{hydraData.title}</h1>
-        <p className="code" dangerouslySetInnerHTML={{ __html: sourceCode }} />
-      </article>
-      <HydraSynth
+        <SyntaxHighlighter width="64em" language="javascript" wrapLongLines={true}
+          >
+            {hydraData.source}
+        </SyntaxHighlighter>
+        {/*<HydraSynth
       width={700}
       height={475}
-      source={hydraData.source}/>
+      source={hydraData.source}/>*/}
+      </article>
     </Layout>
   );
 }

next/styles/main.css

@@ -68,6 +68,7 @@ h1 a, h2 a, h3 a, h4 a, h5 a {
   text-decoration: underline;
 }
 
+
 .player-wrapper {
   padding: 12em 0;
   position: relative;