Code Block

[jbmoelker]

Astro provides a built-in Code component that we could easily use to introduce a Code Block component.

Questions

• Can and should we use these both for multiline and inline code? For inline code we could extemd how code is rendered in Textblock/Text.astro.
• Can and should we give a similar code syntax highlight experience in DatoCMS?

[jbmoelker]

Since DatoCMS already has good support for code inside of Structured Text (including languages and syntax highlighting), we can use that, and then we don't need to introduce a new Block component.

Since the Code component is built-in to Astro, we could use it directly in our implementation of Structured Text for Astro:

---
import type { Code as CodeNode } from 'datocms-structured-text-utils';
import { Code } from 'astro:components';

interface Props {
  node: CodeNode;
}

const { node } = Astro.props;
const { code, language } = node;
---

<Code code={ code } lang={ language } />

[jbmoelker]

The only reason to still introduce a new Code Block in DatoCMS would be to configure wrap, theme and maybe transformers. This can again also be done by setting a custom renderer for code blocks in Textblock/Text.astro, so maybe the simple enhancement suggested before is sufficient.

[jbmoelker]

Also add support for the highlight property that DatoCMS exposes?

highlight Optional Array<number> A zero-based array of line numbers to highlight (ie. [0, 1, 3])

Can be mapped with to Shiki's transformerNotationHighlight (Shiki being the implementation behind Astro's Code component).