Streamdown-Svelte Streamdown-Svelte

AI System Instructions for Streamdown-Svelte

Copy the prompt below to use with AI systems. Click the copy button on the code block:

markdown
## MARKDOWN ELEMENTS
### 1. HeadingsUse hash symbols followed by space and text. Number of hashes = heading level (1-6).# Heading 1## Heading 2### Heading 3
### 2. BoldWrap text with ** or __.**bold text**
### 3. ItalicWrap text with * or _.*italic text*
### 4. Inline CodeWrap text with backticks.`code`
### 5. StrikethroughWrap text with ~~.~~strikethrough~~
### 6. SubscriptWrap text with ~.H~2~O
### 7. SuperscriptWrap text with ^.E = mc^2^
### 8. LinksUse [text](url) format.[Link text](https://example.com)
### 9. BlockquotesStart lines with >. Use >> for nested quotes.> This is a quote>> Nested quote
### 10. Ordered ListsStart with number + period. Supports: 1., a., A., i., I.1. First item2. Second item
### 11. Unordered ListsStart with - or *.- Item one- Item two
### 12. Task ListsUse - [ ] for unchecked, - [x] for checked.- [ ] Unchecked task- [x] Checked task
### 13. AlertsUse blockquote with [!TYPE] on first line. TYPE can be NOTE, TIP, IMPORTANT, WARNING, CAUTION.> [!NOTE]> This is a note
> [!TIP]> This is a tip
> [!IMPORTANT]> This is important
> [!WARNING]> This is a warning
> [!CAUTION]> This is a caution
### 14. Code BlocksWrap with triple backticks and language name.
### 15. Inline MathWrap with single $.$E = mc^2$
### 16. Block MathWrap with double $$.$$\sum_{i=1}^{n} x_i$$
### 17. Mermaid DiagramsUse code block with mermaid language.### 18. TablesUse pipes | to separate columns, hyphens for header separator.| Header 1 | Header 2 ||----------|----------|| Cell 1   | Cell 2   |
### 19. Table AlignmentUse colons in separator row.| Left | Center | Right ||:-----|:------:|------:|| A    | B      | C     |
### 20. Table ColspanUse multiple consecutive pipe characters (|||) to span columns.| Spans 3 columns |||
### 21. Table RowspanUse ^ in cell below to merge with cell above.| Cell spans || two rows ^ |
### 22. Table FooterAdd separator row with |---|.| Data  ||-------|| Value ||-------|| Total |
### 23. FootnotesReference with [^id], define with [^id]: text.Text with footnote[^1]
[^1]: Footnote definition
### 24. CitationsReference sources with their key (or nested key) in square brackets [key]. Use spaces for multiple citations.The key should point to a source in the sources object that has been given to you.
According to research[smith2023] and studies[jones2024]
### 25. Description ListsUse : term : definition format.: Term 1 : Definition 1: Term 2 : Definition 2
### 26. MDX ComponentsEmbed custom components using JSX-style syntax with PascalCase names.
Self-closing:<ComponentName attribute="value" count={42} enabled={true} />
With markdown children:<ComponentName title="Hello"># This is markdownContent with **formatting**</ComponentName>
Attributes:- Strings: attribute="text"- Numbers: count={42} or value={3.14}- Booleans: enabled={true} or disabled={false}- Expressions: value={variableName}
Component names MUST start with capital letter.

Feature Examples

Below are examples of all supported features rendered with Streamdown-Svelte:

Basic Text Formatting

  • Bold text: **text** or __text__
  • Italic text: *text* or _text_
  • Inline code: code
  • Strikethrough: ~~text~~
  • Subscript: ~text~
  • Superscript: ^text^

Headings

All heading levels supported:

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Links

and relative links

Blockquotes

This is a blockquote

It can span multiple lines

And support nesting

GitHub-Style Alerts

note

This is a note alert

tip

This is a tip alert

important

This is an important alert

warning

This is a warning alert

caution

This is a caution alert

Lists

Unordered Lists

  • Item 1
  • Item 2
    • Nested item
    • Another nested item
  • Item 3

Ordered Lists (Multiple Styles)

  1. Decimal numbering
  2. Second item
  3. Third item
    1. Lowercase alpha
    2. Second item
    3. Third item
      1. Uppercase alpha
      2. Second item
      3. Third item
        1. Lowercase roman
        2. Second item
        3. Third item I. Uppercase roman II. Second item III. Third item

Task Lists

  • Uncompleted task
  • Completed task
  • Another task
    • Nested subtask
    • Completed subtask

Code Blocks

javascript
function example() {  console.log('Syntax highlighting supported');  return 'Many languages available';}
python
def hello_world():    print("Python syntax highlighting")    return "Hello, World!"

Mermaid Diagrams

mermaid
graph TD    A[Start] --> B{Decision?}    B -->|Yes| C[Process]    B -->|No| D[End]    C --> E[Finish]

Mathematical Expressions

Inline Math

The famous equation $E = mc^2$ demonstrates mass-energy equivalence.

Block Math

\int_{a}^{b} f(x) \, dx = F(b) - F(a)
\sum_{i=1}^{n} x_i = x_1 + x_2 + \dots + x_n

Complex Tables

Basic Tables

Header 1Header 2Header 3
Cell ACell BCell C
Cell DCell ECell F

Tables with Alignment

LeftCenterRight
ABC
DEF

Complex Tables with Spans

H1H2H3
This cell spans 3 columns
Header 1Header 2Header 3
This cell spans 2 columnsNormal
NormalNormalNormal

Tables with Rowspan

Header 1Header 2
This cell spans two rowCell A
Cell B

Tables with Footer

Header 1Header 2
Cell ACell B
FooterFooter

Footnotes

This is some text with a footnote reference.[^1]

Inline Citations

Use inline citations to reference sources: .

Multiple citations:

Description Lists

Term 1
Definition 1
Term 2
Definition 2
Term 3
Definition 3

MDX Components

MDX components allow embedding custom Svelte components in markdown:

This is markdown content inside a custom component.

You can use any markdown features inside MDX components.

Self-closing or with children - both work!

note

MDX components must start with a capital letter (PascalCase) to be recognized. Lowercase tags are treated as regular HTML.

$$

Footnotes