Markdown

The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.

Starlight builds pages that are as lightweight as possible. For example, on a first visit, a user will download less than 50 KB of compressed data — just 2.5% of the HTTP archive median. With a good caching strategy, subsequent navigations can download as little as 10 KB.

Typography

Once you’ve added a couple of features, SST can help you connect them together. This is great because you won’t need to hardcode anything in your app.

Links

Here are some links, link-b, and a really really long link to look at.

Paragraph 1

Series’ creator Stephen Hillenburg first became fascinated with the ocean as a child and began developing his artistic abilities at a young age. Although these interests would not overlap for some time—the idea of drawing fish seemed boring to him—Hillenburg pursued both during college, majoring in marine biology and minoring in art. After graduating in 1984, he joined the Ocean Institute, an organization in Dana Point, California, dedicated to educating the public about marine science and maritime history.

Paragraph 2

While Hillenburg was there, his love of the ocean began to influence his artistry. He created a precursor to SpongeBob SquarePants: a comic book titled The Intertidal Zone used by the institute to teach visiting students about the animal life of tide pools.

Lorem Ipsum is a placeholder text commonly used in the design and printing industries. Despite its widespread use, the origins of Lorem Ipsum are somewhat mysterious. Several theories exist about who may have invented the text, but no one knows. Some people believe that the ancient Greeks or Romans created Lorem Ipsum, while others think a printer in the 16th century invented it. Regardless of who created Lorem Ipsum, it has become an essential tool for designers and typesetters worldwide.

Sub Heading 1

A large inspiration to Hillenburg was Ween’s 1997 album The Mollusk, which had a nautical and underwater theme. Hillenburg contacted the band shortly after the album’s release, explaining the baseline ideas for SpongeBob SquarePants, and also requested a song from the band, which they sent on Christmas Eve. This song was “Loop de Loop”, which was used in the episode “Your Shoe’s Untied”.

Lorem Ipsum is a placeholder text that designers and publishers often use to fill space until the content is ready. It has been used for centuries in the printing industry, and its origins can be traced back to the 16th century when a printer named Aldus Manutius created a type specimen book that included a passage of dummy text. The text was based on the works of Cicero, a Roman philosopher and orator, and it has been used ever since as a standard placeholder text. Despite its long history, the exact origins of Lorem Ipsum are still somewhat unclear.

The text comprises words and phrases that have been scrambled and rearranged, making it appear as if it is real text without any actual meaning. It may not have any particular significance, but it does serve a useful purpose in helping designers to visualize how their designs will look with text in place.

Sub Heading 2

Derek Drymon, who served as creative director for the first three seasons, has said that Hillenburg wanted to surround himself with a “team of young and hungry people.”

Colors

The series features “sky flowers” as a main setting material.

Text can be bold, italic, or strikethrough.

Line normal text color.

Line secondary text color.

Line dimmed text color.

Normal secondary dimmed

Code

Let’s test some code.

Inline

You can specify lines of code inline, var a = "some variable name";. And it can be a part of a paragraph as well.

If every other word is an inline code block what does that do for.

Let’s bold some words. Also add some links; a short and a long one and a bold one.

Line

dateformat.i18n = require('./lang/' + l);

Blocks

Let’s add one line above.

Let’s add another line above.

// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l);
  return true;
};

Let’s add one line below.

Let’s add another line below.

Frame

Code blocks can be rendered inside a window-like frame.

my-test-file.js

console.log('Hello World!');

Bash

Create a new project

npm create sst

Bash Without Title

npm create sst

Code Markers

Lines

Mark entire lines & line ranges using the { } marker.

function demo() {
  // This line is not highlighted
  // This line (#2) and the next one are highlighted
  return 'This is line #3 of this snippet';
}

Selections

Mark selections of text using the " " marker or regular expressions.

// Individual terms can be highlighted, too
function demo() {
  return 'Even regular expressions are supported';
}

Insert Deletes

Mark text or lines as inserted or deleted with ins or del.

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

Diffs

Combine syntax highlighting with diff-like syntax.

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!')
}

Tabs

You can display a tabbed interface using the <Tabs> and <TabItem> components.

Stars

Sirius, Vega, Betelgeuse

Moons

Io, Europa, Ganymede

Code Blocks

sst.config.ts

export default $config({
  app(input) {
    return {
      name: "my-sst-app",
      home: "aws"
    };
  },
  async run() {
    const bucket = new sst.aws.Bucket("MyBucket");

    return {
      bucket: bucket.name
    };
  }
});

With Frame

npm

npm create astro@latest -- --template starlight

pnpm

pnpm create astro --template starlight

Yarn

yarn create astro --template starlight

Without Frame

npm

npm create astro@latest -- --template starlight

pnpm

pnpm create astro --template starlight

Yarn

yarn create astro --template starlight

Overflow

{
  url: {
    cors: {
      allowOrigins: ["https://www.example.com", "http://localhost:60905", "http://localhost:60905"]
    }
  }
}

Lists

Basic list

1. First
2. Second
3. Third
4. Fourth

Ordered List

1. First item
   1. First sub item
   2. Second sub item
2. Second item
3. Third item

Multi-Line

1. The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.
2. The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.
3. The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.

Long List

1. Item
2. Item
3. Item
4. Item
5. Item
6. Item
7. Item
8. Item
9. Item
10. Item
11. Item
12. Item

Paragraph

1. The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.

   Tip

   Make sure to read this extra resource on this topic.

   Here’s some additional data on it that’s relevant to the subject.

2. The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.

   Here’s some additional data on it that’s relevant to the subject.

3. The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.

Unordered List

• First item
  • First sub item
  • Second sub item
• Second item
• Third item

Multi-Line

• The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.
• The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.
• The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.

Paragraph

• The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.

  Tip

  Make sure to read this extra resource on this topic.

  Here’s some additional data on it that’s relevant to the subject.

• The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.

• The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.

Dividers

Use the --- to add a divider. It inserts an <hr> tag.

---

Divider after code block

console.log('Hello World!');

---

Table

Let’s test some tables. Testing the table and the spacing between it and the neighboring paragraphs.

Syntax	Description
Header	Title
Paragraph	Text
Link	URL

The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.

Images

Headings

You can structure content using a heading. Headings in Markdown are indicated by a number of # at the start of the line.

Heading 3

This is heading 3.

Heading 4

This is heading 4.

Heading 5

This is heading 5.

Blockquotes

This is a blockquote, which is commonly used when quoting another person or document.

Blockquotes are indicated by a > at the start of each line.

Details

Click to expand

This is a details element. It’s useful for showing extra information that’s not as important as the main content of the page.

Asides

Note

This is a note.

Tip

This is a tip. By specifying the ZipFile property within the Code property, specify index.function_name as the handler.

Caution

This is a caution.

Danger

This is a danger.

With Links

Tip

Here’s a website you should probably check out — Google

Note

Here’s a website with code should probably check out — Google

Paragraphs

Let’s add one line above.

Let’s add another line above. The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.

Caution

This is a caution aside that we can compare the font sizes to the blocks around it.

Tip

This is a tip aside to test what back to back aside blocks look like.

Let’s add one line below. Let’s make this a paragraph. The more data a web page transfers, the more energy resources it requires. In April 2023, the median web page required a user to download more than 2,000 KB according to data from the HTTP Archive.

Let’s add another line below.

Custom Titles

Did you know?

Astro helps you build faster websites with “Islands Architecture”.

Extra

Sections

At The

Bottom

For The

Right Sidebar

Overflow