InlineColor

1. Notion original

2. Notion API

Partial output of src/routes/[slug]/notion-export.js

{
  "object": "block",
  …
  "heading_2": {
    "text": [
      {
        …
        "plain_text": "Express your ",
        …
      },
      {
        "type": "text",
        "text": {
          "content": "P",
          "link": null
        },
        "annotations": {
          …
          "color": "red"
        },
        "plain_text": "P",
        "href": null
      },
      {
				…
        "annotations": {
          …
          "color": "orange"
        },
        "plain_text": "R",
				…
      },
      {
        …
        "annotations": {
          …
          "color": "yellow"
        },
        "plain_text": "I",
        …
      },
      …you get the idea
    …
  …
}
  json

3. Svelte output

Partial output of src/routes/[slug].svelte

<Header level={2}>
  Express your <InlineColor value='red'>P</InlineColor>
  <InlineColor value='orange'>R</InlineColor>
  <InlineColor value='yellow'>I</InlineColor>
  <InlineColor value='green'>D</InlineColor>
  <InlineColor value='blue'>E</InlineColor>
  <InlineColor value='purple'>!</InlineColor>
</Header>
  html

In actual practice, the output will be more squushedtogether to avoid messing with the Svelte/HTML’s already-fraught whitespace issues.