refactor: migrate to react-syntax-highlighter

- maintained library
- enables SSR syntax highlighting
- fixes syntax highlighting for alarm-clock
- easier to customize (e.g. add line markers)

Author: urish

components/annotated-source.tsx

@@ -1,7 +1,8 @@
-import { IGACAnnotation } from '../services/gac-annotations';
-import Highlight from 'react-highlight';
-import { useRef, useState, useMemo, useLayoutEffect } from 'react';
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown/with-html';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { arduinoLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+import { IGACAnnotation } from '../services/gac-annotations';
 
 interface IAnnotatedSourceProps {
   code: string;
@@ -39,7 +40,6 @@ export function AnnotatedSource({ code, annotations }: IAnnotatedSourceProps) {
 
   const [activeAnnotation, setActiveAnnotation] = useState<IGACAnnotation | null>(null);
 
-  const highlightedCode = useMemo(() => <Highlight>{code}</Highlight>, [code]);
   const annotatedLines = useMemo(() => {
     const result = new Map<number, IGACAnnotation>();
     for (const annotation of annotations) {
@@ -112,7 +112,17 @@ export function AnnotatedSource({ code, annotations }: IAnnotatedSourceProps) {
       <div className="annotation-markers" ref={markersRef}>
         <AnnotationMarkers annotations={annotations} />
       </div>
-      {highlightedCode}
+      <SyntaxHighlighter
+        language="arduino"
+        style={arduinoLight}
+        customStyle={{
+          marginTop: 0,
+          padding: 0,
+          background: 'transparent',
+        }}
+      >
+        {code}
+      </SyntaxHighlighter>
       {activeAnnotation && (
         <div
           className="annotation-info"
@@ -133,13 +143,6 @@ export function AnnotatedSource({ code, annotations }: IAnnotatedSourceProps) {
           position: relative;
           display: flex;
         }
-        .code-box > :global(pre) {
-          margin-top: 0;
-        }
-        .code-box > :global(pre > code) {
-          background: transparent;
-          padding: 0;
-        }
 
         .annotation-markers {
           width: 8px;

package-lock.json

@@ -17,9 +17,9 @@
     "puppeteer": "^5.2.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-highlight": "^0.12.0",
     "react-markdown": "^4.3.1",
     "react-scrollspy": "^3.4.3",
+    "react-syntax-highlighter": "^13.2.1",
     "remark-parse": "^8.0.3",
     "unified": "^9.1.0",
     "zip-stream": "^4.0.2"
@@ -29,8 +29,8 @@
     "@types/node": "^14.0.27",
     "@types/puppeteer": "^3.0.1",
     "@types/react": "^16.9.43",
-    "@types/react-highlight": "^0.12.2",
     "@types/react-scrollspy": "^3.3.2",
+    "@types/react-syntax-highlighter": "^11.0.4",
     "@types/react-test-renderer": "^16.9.2",
     "@typescript-eslint/eslint-plugin": "^3.7.0",
     "@typescript-eslint/parser": "^3.7.0",

package.json

@@ -1,5 +1,4 @@
 import { AppPropsType } from 'next/dist/next-server/lib/utils';
-import '../node_modules/highlight.js/styles/arduino-light.css';
 import 'github-markdown-css';
 import { GoogleAnalyticsScript } from '../components/google-analytics';
 import Head from 'next/head';