Article Components

This is body text right under the article title. It typically is just paragraph text that’s pretty straightforward. Then there’s bold text, and italic text, and bold-italic text, and inline-code and bold inline code and even italic inline code and bold italic inline code. And of course don’t forget links, and bold links, and italic links, and bold-italic links.

Markdown Components (also an H2 Heading)

We’ve also got unordered lists!
They can have multiple items.
- And some sub-items.
- That get into details
That’s an unordered list.

What else do we have?

Of course there’s also ordered lists.
They look like this.
They’re pretty useful.

H3 Heading

H4 Heading

H5 Heading

Steps

Import the component into your MDX file:

import { Steps } from '@astrojs/starlight/components';

Wrap <Steps> around your ordered list items.

Let’s see a horizontal rule.

We define the Square-Fibonacci sequence¹, a variation of the Fibonacci sequence:

Syntax Highlighting

...

const config: HardhatUserConfig = {
  ...
  networks: {
    scrollSepolia: {
      url: 'https://sepolia-rpc.scroll.io' || '',
      accounts:
        process.env.PRIVATE_KEY !== undefined ? [process.env.PRIVATE_KEY] : [],
    },
  },
  etherscan: {
    apiKey: {
      scrollSepolia: <YOUR API KEY>,
    },
    customChains: [
      {
        network: 'scrollSepolia',
        chainId: 534351,
        urls: {
          apiURL: 'https://api-sepolia.scrollscan.com/api',
          browserURL: 'https://sepolia.scrollscan.com/',
        },
      },
    ],
  },
}

...

function demo() {
  console.log('These are inserted and deleted marker types');
  // The return statement uses the default marker type
  return true;
}

function thisIsJavaScript() {
  // This entire block gets highlighted as JavaScript,
  // and we can still add diff markers to it!
  console.log('Old code to be removed')
  console.log('New and shiny code!')
}

Math

Let $f_0 = 1, f_1 = 1$
For $i \geq 2$ $i \geq 2$ , define $f_{i} := (f_{i-2})^2 + (f_{i-1})^2 \mod q$ $f_{i} := (f_{i - 2})^{2} + (f_{i - 1})^{2} mod q$
- Where $q$ is a large prime integer. We use this modulus to bound the size of each element, so that it can be represented by some predetermined number of bits.

Tables

Syntax	Description
Header	Title
Paragraph	Text

Blockquotes

Success

Vitae reprehenderit at aliquid error voluptates eum dignissimos.

Footnotes

Here’s a simple footnote,¹ and here’s a longer one.²

Callout that worked in MD, but might not in MDX?

Imported MDX Components

Callouts

:::tip[Did you know?]
 Astro helps you build faster websites with “Islands Architecture”.
:::

Images zoom

Toggle

Why build on Scroll?

Scroll enables creators to turn their content into interactive, explorable experiences. With Scroll, you can create rich, interactive stories that engage readers, provide a better user experience, and help you stand out from the crowd.

How does Scroll work?

Scroll combines powerful technologies like WebGL and WebRTC to create immersive, interactive experiences. The platform allows you to build 3D environments, add interactivity, and embed content from popular web services to create a unique, engaging experience for your audience.

What can I build with Scroll?

You can build a wide range of experiences with Scroll, from interactive articles to immersive product demos and virtual tours. Scroll is designed to help you create engaging, interactive experiences that elevate your content and captivate your audience.

Markmap

Referenced File

Mermaid

Tabs

console npm install @chainlink/hardhat-chainlink

console yarn add @chainlink/hardhat-chainlink

TabsContent

For Chainlink VRF v2 to fulfill your requests, you must maintain a sufficient amount of LINK in your subscription balance. Gas cost calculation includes the following variables:

Gas price: The current gas price, which fluctuates depending on network conditions.
Callback gas: The amount of gas used for the callback request that returns your requested random values.
Verification gas: The amount of gas used to verify randomness on-chain.

The gas price depends on current network conditions. The callback gas depends on your callback function, and the number of random values in your request. The cost of each request is final only after the transaction is complete, but you define the limits you are willing to spend for the request with the following variables:

Gas lane: The maximum gas price you are willing to pay for a request in wei. Define this limit by specifying the appropriate keyHash in your request. The limits of each gas lane are important for handling gas price spikes when Chainlink VRF bumps the gas price to fulfill your request quickly.
Callback gas limit: Specifies the maximum amount of gas you are willing to spend on the callback request. Define this limit by specifying the callbackGasLimit value in your request.

RPC Table

This is the first footnote. ↩ ↩²
Here’s one with multiple paragraphs and code. ↩

Article Components

Markdown Components (also an H2 Heading)

H3 Heading

H4 Heading

H5 Heading

Steps

Syntax Highlighting

Math

Tables

Blockquotes

Success

Footnotes

Callout that worked in MD, but might not in MDX?

Imported MDX Components

Callouts

Images zoom

Toggle

Markmap

Referenced File

markmap

Mermaid

Tabs

TabsContent

RPC Table

What's Next