diff --git a/crates/story/examples/markdown.md b/crates/story/examples/fixtures/test.md similarity index 70% rename from crates/story/examples/markdown.md rename to crates/story/examples/fixtures/test.md index 89ddf97c..5f94bee2 100644 --- a/crates/story/examples/markdown.md +++ b/crates/story/examples/fixtures/test.md @@ -2,16 +2,48 @@ This is first paragraph, there have **BOLD**, _italic_, and ~strikethrough~, `code` text. -> Blockquote: More complex nested inline style like **bold: _italic_**. -> This is second paragraph, it includes a block quote. - This is an additional demonstration paragraph in English demonstrating more content for [Markdown GFM](https://github.github.com/gfm/). It includes various stylistic elements and plain text. ![Img](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*WgEz5f3n3lD7MfC7NeQGOA.jpeg) 这是一个中文演示段落,用于展示更多的 [Markdown GFM](https://github.github.com/gfm/) 内容。您可以在此尝试使用使用**粗体**、*斜体*和`代码`等样式。これは日本語のデモ段落です。Markdown の多言語サポートを示すためのテキストが含まれています。例えば、、**ボールド**、_イタリック_、および`コード`のスタイルなどを試すことができます。 -### Code block +## Basic formatting + +### **Bold** text + +You can mark some text as bold with **two asterisks** +or **two underscores**. + +### **Italic** text + +You can mark some text as italic with _asterisks_ +or _underscores_. + +### **_Bold and italic_** + +Three stars gives **_bold and italic_** + +### ~~Strikethrough~~ + +Using `~~two tildes~~` will strikethrough: ~~two tildes~~ + +## Blockquotes + +> Blockquote: More complex nested inline style like **bold: _italic_**. +> This is second paragraph, it includes a block quote. + +And this is next blockquote + +> Hello, world! + +### Nested blockquotes + +> First level +> +> > Second level + +## Code block ```rust struct Repository { @@ -34,15 +66,15 @@ fn main() { Here is a link to [Google](https://www.google.com), and another to [Rust](https://www.rust-lang.org). -### Images +## Image -![](https://miro.medium.com/v2/resize:fit:1400/format:webp/0*fCBw3AjH4o9SO03D) +![](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*sOTh1aAl32jxKNuGO0TOcA.png) -#### SVG +### SVG ![Rust](https://www.rust-lang.org/logos/rust-logo-blk.svg) -### Table +## Table | Header 1 | Centered | Header 3 | Align Right | | -------- | :------: | ------------------------------------ | ----------: | @@ -50,9 +82,16 @@ Here is a link to [Google](https://www.google.com), and another to [Rust](https: | Row 2 | Row 2 | Row 2
[Link](https://github.com) | Row 2 | | Row 3 | **Bold** | Row 3 | Row 3 | -#### Lists +See the way the text is aligned, depending on the position of `':'` -##### Bulleted List +| Syntax | Description | Test Text | +| :-------- | :---------: | ----------: | +| Header | Title | Here's this | +| Paragraph | Text | And more | + +## Lists + +### Bulleted List - Bullet 1, this is very long and needs to be wrapped to the next line, display should be wrapped to the next line as well. - Bullet 2, the second bullet item is also long and needs to be wrapped to the next line. @@ -63,7 +102,7 @@ Here is a link to [Google](https://www.google.com), and another to [Rust](https: - Bullet 2.2 - Bullet 3 -##### Numbered List +### Numbered List 1. Numbered item 1 1. Numbered item 1.1 @@ -72,15 +111,40 @@ Here is a link to [Google](https://www.google.com), and another to [Rust](https: 2. Numbered item 2 3. Numbered item 3 -##### To-Do List +### To-Do List - [x] Task 1, a long long text task, this line is very long and needs to be wrapped to the next line, display should be wrapped to the next line as well. - [ ] Task 2, going to do something if there is a long text that needs to be wrapped to the next line. - [ ] Task 3 -### HTML +## Heading -#### Paragraph and Text +Add `##` at the beginning of a line to set as Heading. +You can use up to 6 `#` symbols for the corresponding Heading levels + +## Heading 2 + +This is paragraph of the heading 2. + +### Heading 3 + +This is paragraph of the heading 3. + +#### Heading 4 + +This is paragraph of the heading 4. + +##### Heading 5 + +This is paragraph of the heading 5. + +###### Heading 6 + +This is paragraph of the heading 6. + +## HTML + +### Paragraph and Text
Here is a test in div. @@ -91,7 +155,7 @@ Here is a link to [Google](https://www.google.com), and another to [Rust](https: A text after div.
-#### List +### List
  1. Numbered item 1
  2. @@ -103,7 +167,7 @@ Here is a link to [Google](https://www.google.com), and another to [Rust](https:
  3. Bullet 2
  4. -#### Table +### Table @@ -124,11 +188,9 @@ Here is a link to [Google](https://www.google.com), and another to [Rust](https:
    -#### Image +### Image -Rust -Rust -Rust +The Best Programming Languages to Learn in 2025 ## Unsupported diff --git a/crates/story/examples/markdown.rs b/crates/story/examples/markdown.rs index 0ef6d866..4863acb0 100644 --- a/crates/story/examples/markdown.rs +++ b/crates/story/examples/markdown.rs @@ -15,7 +15,7 @@ pub struct Example { resizable_state: Entity, } -const EXAMPLE: &str = include_str!("./markdown.md"); +const EXAMPLE: &str = include_str!("./fixtures/test.md"); impl Example { pub fn new(window: &mut Window, cx: &mut Context) -> Self {