.editorconfig

@@ -1,2 +1,5 @@
 [*.js]
 indent_size = 2
+
+[*.css]
+indent_size = 2

.eleventy.js

@@ -2,6 +2,7 @@ const { mkdirSync } = require('fs')
 const cagovBuildSystem = require('@cagov/11ty-build-system')
 const svgContents = require('eleventy-plugin-svg-contents')
 const faviconPlugin = require('eleventy-favicon')
+const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
 
 module.exports = (eleventyConfig) => {
   eleventyConfig.setUseGitIgnore(false)
@@ -29,6 +30,8 @@ module.exports = (eleventyConfig) => {
     destination: './dist'
   })
 
+  eleventyConfig.addPlugin(syntaxHighlight)
+
   eleventyConfig.addCollection('notes', function (collectionApi) {
     return collectionApi.getFilteredByGlob('src/notes/**/*.md')
   })

package-lock.json

@@ -48,6 +48,36 @@
                 "recursive-copy": "^2.0.14",
                 "semver": "^7.3.7",
                 "slugify": "^1.6.5"
+            },
+            "dependencies": {
+                "argparse": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+                    "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+                    "dev": true
+                },
+                "linkify-it": {
+                    "version": "3.0.3",
+                    "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+                    "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+                    "dev": true,
+                    "requires": {
+                        "uc.micro": "^1.0.1"
+                    }
+                },
+                "markdown-it": {
+                    "version": "12.3.2",
+                    "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz",
+                    "integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==",
+                    "dev": true,
+                    "requires": {
+                        "argparse": "^2.0.1",
+                        "entities": "~2.1.0",
+                        "linkify-it": "^3.0.1",
+                        "mdurl": "^1.0.1",
+                        "uc.micro": "^1.0.5"
+                    }
+                }
             }
         },
         "@11ty/eleventy-fetch": {
@@ -75,6 +105,49 @@
                 "sharp": "^0.30.3"
             }
         },
+        "@11ty/eleventy-plugin-syntaxhighlight": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-4.0.0.tgz",
+            "integrity": "sha512-t95DIZQ7MnaspgpmXyKIgz2TpyN7EshMt9+SFfqVUYKTISU3+T3FTXFscoLownyNWb/5EC0od69BnCZwEcMzCg==",
+            "dev": true,
+            "requires": {
+                "linkedom": "^0.13.2",
+                "prismjs": "^1.26.0"
+            },
+            "dependencies": {
+                "entities": {
+                    "version": "3.0.1",
+                    "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+                    "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+                    "dev": true
+                },
+                "htmlparser2": {
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
+                    "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
+                    "dev": true,
+                    "requires": {
+                        "domelementtype": "^2.0.1",
+                        "domhandler": "^4.2.2",
+                        "domutils": "^2.8.0",
+                        "entities": "^3.0.1"
+                    }
+                },
+                "linkedom": {
+                    "version": "0.13.7",
+                    "resolved": "https://registry.npmjs.org/linkedom/-/linkedom-0.13.7.tgz",
+                    "integrity": "sha512-We9cyPHV/exsrC43KXtItjqSTxwrK9pLpOnG6TLzqXrmqwe/wqd3Gi6eAAU4YCqfTgy79R8g75hY2fS7723XUg==",
+                    "dev": true,
+                    "requires": {
+                        "css-select": "^4.2.1",
+                        "cssom": "^0.5.0",
+                        "html-escaper": "^3.0.3",
+                        "htmlparser2": "^7.2.0",
+                        "uhyphen": "^0.1.0"
+                    }
+                }
+            }
+        },
         "@11ty/eleventy-utils": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.1.tgz",
@@ -1491,6 +1564,12 @@
                 "css-tree": "^1.1.2"
             }
         },
+        "cssom": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
+            "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==",
+            "dev": true
+        },
         "dashdash": {
             "version": "1.14.1",
             "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -3151,6 +3230,12 @@
                 }
             }
         },
+        "html-escaper": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",
+            "integrity": "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==",
+            "dev": true
+        },
         "html-minifier": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-4.0.0.tgz",
@@ -3890,15 +3975,6 @@
             "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
             "dev": true
         },
-        "linkify-it": {
-            "version": "3.0.3",
-            "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
-            "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
-            "dev": true,
-            "requires": {
-                "uc.micro": "^1.0.1"
-            }
-        },
         "liquidjs": {
             "version": "9.37.0",
             "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-9.37.0.tgz",
@@ -4045,27 +4121,6 @@
             "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
             "dev": true
         },
-        "markdown-it": {
-            "version": "12.3.2",
-            "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz",
-            "integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==",
-            "dev": true,
-            "requires": {
-                "argparse": "^2.0.1",
-                "entities": "~2.1.0",
-                "linkify-it": "^3.0.1",
-                "mdurl": "^1.0.1",
-                "uc.micro": "^1.0.5"
-            },
-            "dependencies": {
-                "argparse": {
-                    "version": "2.0.1",
-                    "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-                    "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-                    "dev": true
-                }
-            }
-        },
         "mathml-tag-names": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -5185,6 +5240,12 @@
                 "js-beautify": "^1.6.12"
             }
         },
+        "prismjs": {
+            "version": "1.28.0",
+            "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz",
+            "integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==",
+            "dev": true
+        },
         "process": {
             "version": "0.11.10",
             "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -6989,6 +7050,12 @@
             "integrity": "sha512-hNM5q5GbBRB5xB+PMqVRcgYe4c8jbyZ1pzZhS6jbq54/4F2gFK869ZheiE5A8/t+W5jtTNpWef/5Q9zk639FNQ==",
             "dev": true
         },
+        "uhyphen": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/uhyphen/-/uhyphen-0.1.0.tgz",
+            "integrity": "sha512-o0QVGuFg24FK765Qdd5kk0zU/U4dEsCtN/GSiwNI9i8xsSVtjIAOdTaVhLwZ1nrbWxFVMxNDDl+9fednsOMsBw==",
+            "dev": true
+        },
         "unbox-primitive": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",

package.json

@@ -11,6 +11,7 @@
     "devDependencies": {
         "@11ty/eleventy": "^1.0.1",
         "@11ty/eleventy-img": "^2.0.0",
+        "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
         "@cagov/11ty-build-system": "^0.3.0",
         "@rollup/plugin-node-resolve": "^13.3.0",
         "autoprefixer": "^10.4.7",
@@ -26,11 +27,13 @@
         "nano-staged": "^0.8.0",
         "postcss": "^8.4.13",
         "postcss-import": "^14.1.0",
+        "prismjs": "^1.28.0",
         "rollup": "^2.72.1",
         "rollup-plugin-terser": "^7.0.2",
         "simple-git-hooks": "^2.7.0",
         "stylelint": "^14.8.2",
         "stylelint-config-standard": "^25.0.0",
         "tailwindcss": "^3.0.24"
-    }
+    },
+    "dependencies": {}
 }

src/css/components/article-content.css

@@ -0,0 +1,19 @@
+.article-content {
+  @apply px-12;
+}
+
+.article-content h1 {
+  @apply text-5xl font-semibold py-4;
+}
+
+.article-content h2 {
+  @apply text-3xl py-4;
+}
+
+.article-content p {
+  @apply py-1;
+}
+
+.article-content code {
+  @apply font-mono;
+}

src/css/components/index.css

@@ -0,0 +1 @@
+@import "article-content.css";

src/css/index.css

@@ -1,4 +1,6 @@
 @import "fonts.css";
+@import "prismjs/themes/prism-okaidia.css";
 @import "tailwindcss/base";
 @import "tailwindcss/components";
+@import "components";
 @import "tailwindcss/utilities";

src/pages/note.njk

@@ -1 +1,6 @@
+<main>
+    <article class="article-content">
+        <h1>{{ note.data.title | safe }}</h1>
         {{ note.templateContent | safe }}
+    </article>
+</main>