Use React Markdown

components/SyntaxHighlighter.tsx

@@ -0,0 +1,14 @@
+import {LightAsync} from "react-syntax-highlighter";
+import {a11yDark} from "react-syntax-highlighter/dist/cjs/styles/hljs";
+
+function SyntaxHighlighter(props) {
+    return (
+        <LightAsync
+            language={props.language}
+            style={a11yDark}
+            children={props.value || ""}
+        />
+    );
+}
+
+export default SyntaxHighlighter;

components/Template.tsx

@@ -0,0 +1,80 @@
+import {useState} from "react";
+import ReactMarkdown from "react-markdown";
+import TextareaAutosize from "react-textarea-autosize";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+
+const initialTemplate = `# Foobar
+
+Foobar is a Python library for dealing with word pluralization.
+
+## Installation
+
+Use the package manager [pip](https://pip.pypa.io/en/stable/) to install foobar.
+
+\`\`\`bash
+pip install foobar
+\`\`\`
+
+## Usage
+
+\`\`\`python
+import foobar
+
+# returns 'words'
+foobar.pluralize('word')
+
+# returns 'geese'
+foobar.pluralize('goose')
+
+# returns 'phenomenon'
+foobar.singularize('phenomena')
+\`\`\`
+
+## Contributing
+Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
+
+Please make sure to update tests as appropriate.
+
+## License
+[MIT](https://choosealicense.com/licenses/mit/)`;
+
+export function Template() {
+    const [template, setTemplate] = useState(initialTemplate);
+
+    return (
+        <section id="template" className="bg-medium-gray pb-10">
+            <h2 className="text-white pt-10">Template</h2>
+
+            <div className="flex justify-center flex-wrap">
+                <div className="flex-1 m-3 max-w-5xl">
+                    <p className="text-white text-center text-xl font-bold mt-0 mb-4">
+                        <label htmlFor="markdown-input">
+                            Markdown Input (editable)
+                        </label>
+                    </p>
+                    <TextareaAutosize
+                        id="markdown-input"
+                        className="bg-white w-full px-4 py-6 rounded-lg font-mono text-sm"
+                        value={template}
+                        onChange={(event) => {
+                            setTemplate(event.target.value);
+                        }}
+                    />
+                </div>
+                <div className="flex-1 m-3 max-w-5xl">
+                    <p className="text-white text-center text-xl font-bold mt-0 mb-4">
+                        Rendered
+                    </p>
+                    <div
+                        id="rendered"
+                        className="markdown-body bg-white p-4 rounded-lg"
+                    >
+                        <ReactMarkdown renderers={{code: SyntaxHighlighter}}>
+                            {template}
+                        </ReactMarkdown>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

package.json

@@ -18,14 +18,16 @@
         "@fortawesome/free-solid-svg-icons": "5.15.3",
         "@fortawesome/react-fontawesome": "0.1.14",
         "github-markdown-css": "4.0.0",
-        "highlight.js": "11.0.1",
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "react-github-corner": "2.5.0",
+        "react-markdown": "5.0.3",
+        "react-syntax-highlighter": "15.4.3",
         "react-textarea-autosize": "8.3.3"
     },
     "devDependencies": {
         "@types/react": "17.0.11",
+        "@types/react-syntax-highlighter": "13.5.2",
         "autoprefixer": "10.2.6",
         "next": "11.0.1",
         "postcss": "8.3.5",

pages/_app.tsx

@@ -1,6 +1,5 @@
-import "../global.css";
 import "github-markdown-css/github-markdown.css";
-import "highlight.js/styles/a11y-light.css";
+import "../global.css";
 
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import {config} from "@fortawesome/fontawesome-svg-core";

pages/index.tsx

@@ -3,9 +3,10 @@ import Script from "next/script";
 import GitHubCorner from "react-github-corner";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faCircle, faFileAlt} from "@fortawesome/free-solid-svg-icons";
-import TextareaAutosize from "react-textarea-autosize";
 import {PropsWithChildren} from "react";
 
+import {Template} from "../components/Template";
+
 type SectionProps = PropsWithChildren<{
     heading: string;
 }>;
@@ -296,67 +297,7 @@ export default function Home() {
                 </SectionItem>
             </Section>
 
-            <section id="template" className="bg-medium-gray pb-10">
-                <h2 className="text-white pt-10">Template</h2>
-
-                <div className="flex justify-center flex-wrap">
-                    <div className="flex-1 m-3 max-w-5xl">
-                        <p className="text-white text-center text-xl font-bold mt-0 mb-4">
-                            <label htmlFor="markdown-input">
-                                Markdown Input (editable)
-                            </label>
-                        </p>
-                        <TextareaAutosize
-                            id="markdown-input"
-                            className="bg-white w-full p-4 rounded-lg pt-0 pb-4 font-mono text-sm"
-                            defaultValue={`
-# Foobar
-
-Foobar is a Python library for dealing with word pluralization.
-
-## Installation
-
-Use the package manager [pip](https://pip.pypa.io/en/stable/) to install foobar.
-
-\`\`\`bash
-pip install foobar
-\`\`\`
-
-## Usage
-
-\`\`\`python
-import foobar
-
-# returns 'words'
-foobar.pluralize('word')
-
-# returns 'geese'
-foobar.pluralize('goose')
-
-# returns 'phenomenon'
-foobar.singularize('phenomena')
-\`\`\`
-
-## Contributing
-Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
-
-Please make sure to update tests as appropriate.
-
-## License
-[MIT](https://choosealicense.com/licenses/mit/)`}
-                        />
-                    </div>
-                    <div className="flex-1 m-3 max-w-5xl">
-                        <p className="text-white text-center text-xl font-bold mt-0 mb-4">
-                            Rendered
-                        </p>
-                        <div
-                            id="rendered"
-                            className="markdown-body bg-white p-4 rounded-lg"
-                        ></div>
-                    </div>
-                </div>
-            </section>
+            <Template />
 
             <Section heading="Suggestions for a good README">
                 <p className="mb-8 mx-4">
@@ -737,18 +678,15 @@ Please make sure to update tests as appropriate.
                 strategy="beforeInteractive"
                 src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.1/anchor.min.js"
             />
-            <Script
-                strategy="beforeInteractive"
-                src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"
-            />
-            <Script
-                strategy="beforeInteractive"
-                src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"
-            />
-            <Script src="index.js" />
-            <Script src="https://www.googletagmanager.com/gtag/js?id=UA-104519836-1" />
             <Script>
                 {`
+                    window.anchors.options.placement = "left";
+                    // One of the longer FAQ questions doesn't work with the default
+                    // truncate value. The anchor link looks fine, but Chrome doesn't
+                    // jump to it when loading in a new tab.
+                    window.anchors.options.truncate = 50;
+                    window.anchors.add();
+
                     window.dataLayer = window.dataLayer || [];
                     function gtag() {
                         dataLayer.push(arguments);
@@ -757,6 +695,7 @@ Please make sure to update tests as appropriate.
                     gtag("config", "UA-104519836-1");
                 `}
             </Script>
+            <Script src="https://www.googletagmanager.com/gtag/js?id=UA-104519836-1" />
         </>
     );
 }