Code

1. Notion original

2. Notion API

Partial output of src/routes/[slug]/notion-export.js
{
  "object": "block",
  …
  "type": "code",
  "code": {
    "caption": [],
    "text": [
      {
        "type": "text",
        "text": {
          "content": "module HelloWorld exposing (..)

import Html exposing (text)

main =
  text "Hello, World!"",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "module HelloWorld exposing (..)

import Html exposing (text)

main =
  text "Hello, World!"",
        "href": null
      }
    ],
    "language": "elm"
  }
}
  javascript

3. Svelte output

Partial output of src/routes/[slug].svelte
<Code
  code={`module HelloWorld exposing (..)

import Html exposing (text)

main =
  text "Hello, World!"`}
  language="elm"
  caption=""
/>
  html

4. Example rendering

Rendered byCode.svelte
module HelloWorld exposing (..)

import Html exposing (text)

main =
  text "Hello, World!"
  elm
 
Fancy horizontal divider

🏠 Browse the docs ⚘

High-level Discussion

Turn-intoable Block Components

Toggle Headings (not yet implemented)

Layout-only Components

Page-level Components

Annotation Components

bold → <strong>

italic → <em>

strikethrough → <s>

Other Components