feat(blog): add code block component [INTORG-767] by JonathanMatthey · Pull Request #328 · interledger/interledger.org-v5

JonathanMatthey · 2026-06-04T21:28:37Z

Summary

Adds a code block component for blog posts, syntax highlighting via Shiki, copy button, optional title, 14 supported languages. Covers the Strapi component schema, MDX serializer, and Astro render component.

Related Issue

Fixes INTORG-767

Manual Test

Add a Code Block to a blog post in Strapi and run MDX sync
Check syntax highlighting and the copy button work in the browser

Checks

pnpm run format
pnpm run lint

PR Checklist

PR title follows Conventional Commits (e.g. feat: ..., fix: ...)
Linked issue included
Scope is focused (target ~10-20 files when possible)
Screenshots for UI changes (if applicable)

netlify · 2026-06-04T21:28:42Z

✅ Deploy Preview for interledger-org-v5 ready!

Name	Link
🔨 Latest commit	`07928bf`
🔍 Latest deploy log	https://app.netlify.com/projects/interledger-org-v5/deploys/6a3bb9bd3a814700087a6c2b
😎 Deploy Preview	https://deploy-preview-328--interledger-org-v5.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Infi-Knight

looks like there is no import handler for CodeBlock? i.e the export path works but the parser will hard-fail without a registered handler

JonathanMatthey · 2026-06-11T11:15:15Z

looks like there is no import handler for CodeBlock? i.e the export path works but the parser will hard-fail without a registered handler

very true - hadn't run the import

…INTORG-780]

Infi-Knight · 2026-06-24T11:09:48Z

@@ -0,0 +1,150 @@
+---
+import { codeToHtml } from 'shiki'


we should declare shiki in package.json

Infi-Knight · 2026-06-24T11:12:59Z

 <div class="flex flex-col gap-space-xl">
-  {
-    resolvedBlocks.map(({ Component, props }) => (
-      <div class="w-full">


please confirm before merge this doesn't break the wrapping behaviour for other components

Anca2022 · 2026-06-24T13:54:37Z

+function normalizeCodeIndent(code: string): string {
+  return code.replace(/^((?: {4})+)/gm, (indent) =>
+    '  '.repeat(indent.length / 4)
+  )
+}


this normalizeCodeIndent makes the round trip syncs asymetrical

Strapi -> Astro keeps original indent

Astro -> Strapi normalizes indent

Anca2022 · 2026-06-24T14:37:30Z

The component doesn't quite match the Figma design yet. Could you please update the styles to align more closely with the design specs?
Figma

vs branch

Anca2022 · 2026-06-24T14:37:35Z

+  data-component="code-block"
+>
+  <div
+    class="flex items-center gap-space-xs px-space-s py-space-2xs bg-[#f6f8fa] border-b border-neutral-25 rounded-t-lg"


Also, could you use the existing design tokens instead of Tailwind variables(gap-space-s, `text-step--2)?

Anca2022 · 2026-06-24T14:39:45Z

+---
+
+<figure
+  class="my-0 w-full min-w-0 rounded-lg border border-neutral-25 text-step--1"


Suggested change

class="my-0 w-full min-w-0 rounded-lg border border-neutral-25 text-step--1"

class="my-2xl w-full min-w-0 rounded-lg border border-neutral-25 text-step--1"

This needs some margin - 2xl matches the margin paragraphs use :)

Anca2022 · 2026-06-24T14:41:54Z

+      setTimeout(() => {
+        btn.textContent = copyLabel
+        btn.setAttribute('aria-label', copyLabel)
+      }, 2000)


This only sets the text, it looses the svg
=>

Anca2022

Left some comments, but great job! 🚀 🎉

JonathanMatthey self-assigned this Jun 4, 2026

JonathanMatthey had a problem deploying to strapi-staging June 4, 2026 21:28 — with GitHub Actions Failure

JonathanMatthey had a problem deploying to strapi-staging June 4, 2026 21:29 — with GitHub Actions Failure

JonathanMatthey had a problem deploying to strapi-staging June 4, 2026 22:07 — with GitHub Actions Failure

JonathanMatthey requested review from Infi-Knight and JoblersTune June 5, 2026 17:00

Infi-Knight reviewed Jun 8, 2026

View reviewed changes

JonathanMatthey force-pushed the jm/intorg-767-code-block branch from 98015bb to 8a35ac2 Compare June 11, 2026 09:37

JonathanMatthey had a problem deploying to strapi-staging June 11, 2026 09:37 — with GitHub Actions Failure

JonathanMatthey had a problem deploying to strapi-staging June 11, 2026 11:15 — with GitHub Actions Failure

JonathanMatthey force-pushed the jm/intorg-767-code-block branch from 404b291 to da453de Compare June 18, 2026 22:44

JonathanMatthey had a problem deploying to strapi-staging June 18, 2026 22:44 — with GitHub Actions Failure

JonathanMatthey force-pushed the jm/intorg-767-code-block branch from da453de to 8e20457 Compare June 22, 2026 08:34

JonathanMatthey had a problem deploying to strapi-staging June 22, 2026 08:34 — with GitHub Actions Failure

JonathanMatthey added 6 commits June 22, 2026 12:05

feat(blog): add code block with syntax highlighting and copy button […

e44936d

…INTORG-780]

style codeblock

c1a75df

pnpm format

b1791d9

fix(code-block): mobile horizontal scroll and line spacing [INTORG-767]

6726c4c

add codeblock

9801c5b

pnpm format

40e3cb2

JonathanMatthey force-pushed the jm/intorg-767-code-block branch from 8e20457 to 40e3cb2 Compare June 22, 2026 12:38

JonathanMatthey had a problem deploying to strapi-staging June 22, 2026 12:39 — with GitHub Actions Failure

JonathanMatthey added 2 commits June 22, 2026 20:09

improve codeblock formatting

e1c5849

fix export/import codeblock

4f25ac8

JonathanMatthey had a problem deploying to strapi-staging June 22, 2026 18:42 — with GitHub Actions Failure

fix shiki

07928bf

JonathanMatthey temporarily deployed to strapi-staging June 24, 2026 11:04 — with GitHub Actions Inactive

Infi-Knight reviewed Jun 24, 2026

View reviewed changes

Anca2022 reviewed Jun 24, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(blog): add code block component [INTORG-767]#328

feat(blog): add code block component [INTORG-767]#328
JonathanMatthey wants to merge 9 commits into
stagingfrom
jm/intorg-767-code-block

JonathanMatthey commented Jun 4, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Jun 4, 2026 •

edited

Loading

Uh oh!

Infi-Knight left a comment

Uh oh!

JonathanMatthey commented Jun 11, 2026

Uh oh!

Infi-Knight Jun 24, 2026

Uh oh!

Infi-Knight Jun 24, 2026

Uh oh!

Anca2022 Jun 24, 2026

Uh oh!

Anca2022 Jun 24, 2026 •

edited

Loading

Uh oh!

Anca2022 Jun 24, 2026

Uh oh!

Anca2022 Jun 24, 2026

Uh oh!

Anca2022 Jun 24, 2026

Uh oh!

Anca2022 left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	class="my-0 w-full min-w-0 rounded-lg border border-neutral-25 text-step--1"
	class="my-2xl w-full min-w-0 rounded-lg border border-neutral-25 text-step--1"

Uh oh!

Conversation

JonathanMatthey commented Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Related Issue

Manual Test

Checks

PR Checklist

Uh oh!

netlify Bot commented Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for interledger-org-v5 ready!

Uh oh!

Infi-Knight left a comment

Choose a reason for hiding this comment

Uh oh!

JonathanMatthey commented Jun 11, 2026

Uh oh!

Infi-Knight Jun 24, 2026

Choose a reason for hiding this comment

Uh oh!

Infi-Knight Jun 24, 2026

Choose a reason for hiding this comment

Uh oh!

Anca2022 Jun 24, 2026

Choose a reason for hiding this comment

Uh oh!

Anca2022 Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Anca2022 Jun 24, 2026

Choose a reason for hiding this comment

Uh oh!

Anca2022 Jun 24, 2026

Choose a reason for hiding this comment

Uh oh!

Anca2022 Jun 24, 2026

Choose a reason for hiding this comment

Uh oh!

Anca2022 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

JonathanMatthey commented Jun 4, 2026 •

edited

Loading

netlify Bot commented Jun 4, 2026 •

edited

Loading

Anca2022 Jun 24, 2026 •

edited

Loading