Code block with server-side highlighting

app/[slug]/page.tsx

@@ -1,8 +1,10 @@
 import { Metadata } from "next"
+import { Code } from "bright"
 import { getPostSlugs, loadSinglePage } from "~/utils/post"
-import Markdown from 'markdown-to-jsx'
+import MarkdownToJSX from 'markdown-to-jsx'
 
 import styles from "~/styles/post.module.css"
+import { ReactElement } from "react"
 
 export async function generateMetadata({ params: { slug } }: { params: { slug: string } }): Promise<Metadata> {
   const post = await loadSinglePage(slug)
@@ -36,3 +38,32 @@ export default async function Post({ params: { slug } }: { params: { slug: strin
   );
 }
 
+function Markdown({ children }: { children: string }) {
+  const options = {
+    overrides: {
+      pre: {
+        component: CodeBlock,
+        props: {}
+      }
+    }
+  }
+
+  return <MarkdownToJSX children={children} options={options} />
+}
+
+Code.theme = {
+  dark: "github-dark",
+  light: "github-light",
+  lightSelector: ':root.light'
+}
+
+function CodeBlock({ children }: { children: ReactElement }) {
+  console.log(children)
+
+  // extract props normally passed to pre element
+  const { className: langKey, children: sourceText, ...rest } = children?.props ?? {}
+  const language = langKey?.replace(/^lang-/i, '')
+
+  {/* @ts-expect-error Async Server Component */ }
+  return <Code lang={language} children={sourceText} {...rest} />
+}

package.json

@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "bright": "^0.8.4",
     "front-matter": "^4.0.2",
     "markdown-to-jsx": "^7.2.0",
     "next": "^13.4.1",

posts/2019-12-04_html-beginners-guide.md

@@ -43,7 +43,7 @@ Generally speaking: block elements are elements which the browser renders as a b
 Block elements are typically things like <div>, <ul>, and header (<h1>…<h6>) elements - although most HTML elements can be rendered as a block if you enforce it with the `display: block` rule.  Here’s a quick example:
 
 
-```
+```html
 <div style="
     padding: 10px;
     background: gray;
@@ -61,7 +61,7 @@ Block elements are typically things like &lt;div&gt;, &lt;ul&gt;, and header (&l
 
 See how this box automatically takes the full width?  We can give it a fixed width and it will behave slightly differently:
 
-```
+```html
 <div style="
     width:200px;
     padding: 10px;
@@ -108,7 +108,7 @@ So if that’s block elements, how are inline elements different?
 
 Inline elements are things like &lt;a&gt;, &lt;b&gt;, &lt;i&gt;, and &lt;span&gt; tags.  These are effectively treated as text, they wrap at the end of the line, and generally flow like you would expect text to in a word processor, although they don’t necessarily have to be text:
 
-```
+```html
 <img src="https://placekitten.com/250/100"/>
 <img src="https://placekitten.com/250/100"/>
 <img src="https://placekitten.com/250/100"/>
@@ -128,7 +128,7 @@ One downside to inline display elements like this is that we have very little co
 
 Because these images are treated as very tall text, other text immediately before or after the kittens can also get weird - inline elements **don’t** clear space beside them like block elements:
 
-```
+```html
 Text immediately before an image
 <img src="https://placekitten.com/100/100"/>
 <img src="https://placekitten.com/100/100"/>
@@ -144,7 +144,7 @@ Text immediately after
 
 But remember we said before that any of these `display` properties can be overwritten?!  If we instead set our kittens to be `display: block` then we see that our kittens suddenly behave much more like our space-clearing box from earlier:
 
-```
+```html
 Text immediately before an image
 <img style="display: block" src="https://placekitten.com/250/300"/>
 Text immediately after
@@ -159,7 +159,7 @@ Text immediately after
 **Note:** This technique of setting images to be `display: block` is often used for illustrations on the web - just add an `auto` side margin and it’s even centered:
 
 
-```
+```html
 Illustration of a kitten:
 <img style="display: block; margin: 20px auto" src="https://placekitten.com/200/300"/>
 (Text after the kitten)
@@ -175,7 +175,7 @@ Now you might be thinking _“Couldn’t I just use &lt;p&gt; tags for my text a
 
 It’s true that if you put your text in &lt;p&gt; tags then you get a nice result more or less for free:
 
-```
+```html
 <p>Text in a &lt;p&gt; before an image</p>
 <img src="https://placekitten.com/300/200"/>
 <p>Text in a &lt;p&gt; after</p>
@@ -197,7 +197,7 @@ So it should come as no surprise to you that an element with the style rule `dis
 
 This kind of element is commonly used for photo galleries or navigation menus like this:
 
-```
+```html
 <a style="display: inline-block; margin: 10px; padding: 10px; border: solid 1px white; border-radius: 3px;" href="#">Home</a>
 <a style="display: inline-block; margin: 10px; padding: 10px; border: solid 1px white; border-radius: 3px;" href="#">Posts</a>
 <a style="display: inline-block; margin: 10px; padding: 10px; border: solid 1px white; border-radius: 3px;" href="#">Contact</a>