Syntax highlighting

Author: CodeStix

articles/Array-fields.md

@@ -1,7 +1,9 @@
+# Array fields
+
 To create dynamic array fields, you should use the [`ArrayForm`](https://github.com/CodeStix/typed-react-form/wiki/ArrayForm) component or [`useArrayForm`](https://github.com/CodeStix/typed-react-form/wiki/useArrayForm) hook. These are wrappers around [`useChildForm`](https://github.com/CodeStix/typed-react-form/wiki/useChildForm) which provide useful functions and optimizations for arrays.
 
-- [ArrayForm](https://github.com/CodeStix/typed-react-form/wiki/ArrayForm)
-- [useArrayForm](https://github.com/CodeStix/typed-react-form/wiki/useArrayForm)
+-   [ArrayForm](https://github.com/CodeStix/typed-react-form/wiki/ArrayForm)
+-   [useArrayForm](https://github.com/CodeStix/typed-react-form/wiki/useArrayForm)
 
 If you have an array field with a constant size, you should probably just use [`ChildForm`](https://github.com/CodeStix/typed-react-form/wiki/ChildForm). (See bottom for examples)
 
@@ -10,24 +12,27 @@ If you have an array field with a constant size, you should probably just use [`
 ## Dynamic array examples
 
 ✔️ **Dynamic string array field using `ArrayForm`**
+
 ```jsx
 function NotesList() {
     const form = useForm({
-        notes: ["Do the dishes", "Go outside", "Drink some water"]
+        notes: ["Do the dishes", "Go outside", "Drink some water"],
     });
     return (
         <form
             onSubmit={(ev) => {
                 ev.preventDefault();
                 console.log("submit", form.values);
-            }}
-        >
+            }}>
             <ArrayForm
                 parent={form}
                 name="notes"
                 render={({ form, values, append, remove }) => (
                     <>
-                        {values.map((_, i) => ( // You SHOULD use index as key. See top for info.
+                        {values.map((
+                            _,
+                            i // You SHOULD use index as key. See top for info.
+                        ) => (
                             <div key={i}>
                                 <FormInput form={form} name={i} />
                                 <button type="button" onClick={() => remove(i)}>
@@ -55,16 +60,15 @@ Remember: this is all type checked!
 function ShoppingListForm() {
     const form = useForm({
         title: "My shopping list",
-        items: [{ name: "Coffee", amount: 1 }]
+        items: [{ name: "Coffee", amount: 1 }],
     });
 
     return (
         <form
             onSubmit={(ev) => {
                 ev.preventDefault();
                 console.log("submit", form.values);
-            }}
-        >
+            }}>
             <h2>Title</h2>
             <FormInput form={form} type="text" name="title" />
 
@@ -108,6 +112,7 @@ function ShoppingListForm() {
 ```
 
 ✔️ **Dynamic object array field with seperate component for each child form and using `useArrayForm`**
+
 ```jsx
 interface ShoppingListItem {
     name: string;
@@ -119,17 +124,19 @@ interface ShoppingList {
 }
 
 function ShoppingListForm() {
-    const form = useForm<ShoppingList>({
-        title: "My shopping list",
-        items: [{ name: "Coffee", amount: 1 }]
-    });
+    const form =
+        useForm <
+        ShoppingList >
+        {
+            title: "My shopping list",
+            items: [{ name: "Coffee", amount: 1 }],
+        };
     return (
         <form
             onSubmit={(ev) => {
                 ev.preventDefault();
                 console.log("submit", form.values);
-            }}
-        >
+            }}>
             <h2>Title</h2>
             <FormInput form={form} type="text" name="title" />
             <h2>Items</h2>
@@ -154,7 +161,7 @@ function ShoppingListItemsForm(props: { parent: FormState<ShoppingList> }) {
     );
 }
 
-function ShoppingListItemForm(props: { parent: FormState<ShoppingListItem[]>; index: number; remove: (i: number) => void }) {
+function ShoppingListItemForm(props: { parent: FormState<ShoppingListItem[]>, index: number, remove: (i: number) => void }) {
     const form = useChildForm(props.parent, props.index);
     return (
         <div>
@@ -173,19 +180,19 @@ function ShoppingListItemForm(props: { parent: FormState<ShoppingListItem[]>; in
 A fixed array always has the same size, [`ChildForm`](https://github.com/CodeStix/typed-react-form/wiki/ChildForm) is used, and the index into the array is given using the name prop.
 
 ✔️ **Fixed array field containing strings**
+
 ```jsx
 function AnswerForm() {
     const form = useForm({
         // Always 3 items in array
-        answers: ["", "", ""]
+        answers: ["", "", ""],
     });
     return (
         <form
             onSubmit={(ev) => {
                 ev.preventDefault();
                 console.log("submit", form.values);
-            }}
-        >
+            }}>
             <ChildForm
                 parent={form}
                 name="answers"
@@ -208,27 +215,27 @@ function AnswerForm() {
 ```
 
 ✔️ **Fixed array field containing objects**
+
 ```jsx
 function SettingsForm() {
     const form = useForm({
         settings: [
             { name: "Enable email", value: true },
-            { name: "Enable notifications", value: false }
-        ]
+            { name: "Enable notifications", value: false },
+        ],
     });
     return (
         <form
             onSubmit={(ev) => {
                 ev.preventDefault();
                 console.log("submit", form.values);
-            }}
-        >
+            }}>
             <ChildForm // First child form is array
                 parent={form}
                 name="settings"
                 render={(form) =>
                     form.values.map((_, i) => (
-                        <ChildForm // Second child form is object in array 
+                        <ChildForm // Second child form is object in array
                             key={i}
                             parent={form}
                             name={i}
@@ -246,4 +253,4 @@ function SettingsForm() {
         </form>
     );
 }
-```
+```

package.json

@@ -12,11 +12,13 @@
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-markdown": "^5.0.3",
+    "react-syntax-highlighter": "^15.4.3",
     "styled-components": "^5.2.1"
   },
   "devDependencies": {
     "@types/node": "^14.14.34",
     "@types/react": "^17.0.3",
+    "@types/react-syntax-highlighter": "^13.5.0",
     "@types/styled-components": "^5.1.8",
     "typescript": "^4.2.3"
   }

pages/docs/[doc].tsx

@@ -7,6 +7,8 @@ import { CenterContainer } from "../../components/CenterContainer";
 import { NavBar } from "../../components/NavBar";
 import { SideBar } from "../../components/SideBar";
 import styled from "styled-components";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { materialOceanic } from "react-syntax-highlighter/dist/cjs/styles/prism";
 
 const ARTICLES_PATH = path.join(process.cwd(), "articles");
 
@@ -30,7 +32,14 @@ export default function DocPage(props: Props) {
                         <SideBar />
                     </div>
                     <div style={{ overflow: "hidden" }}>
-                        <ReactMarkdown>{props.content}</ReactMarkdown>;
+                        <ReactMarkdown
+                            renderers={{
+                                code: ({ language, value }) => {
+                                    return <SyntaxHighlighter style={materialOceanic} language={language} children={value} />;
+                                },
+                            }}>
+                            {props.content}
+                        </ReactMarkdown>
                     </div>
                 </Container>
             </CenterContainer>
@@ -39,7 +48,8 @@ export default function DocPage(props: Props) {
 }
 
 export const getStaticProps: GetStaticProps<Props> = async function (props) {
-    let file = path.join(ARTICLES_PATH, props.params!.doc + ".md");
+    let title = props.params!.doc as string;
+    let file = path.join(ARTICLES_PATH, title + ".md");
     return {
         props: {
             content: await fs.readFile(file, "utf-8"),