Markdown in Svelte-Blog

Guide CommonMark GFM MDX
August 5, 2023

CommonMark

header

# header1

## header2

### header3

#### header4

###### header5

###### header6

### header with `inline code` is not recommended (but it was supported for now)markdown

header1

header2

header3

header4

header5
header6

header with inline code is not recommended (but it was supported for now)

TIP
  • Header1 is not recommended as it was used in the title of the page header
  • Only header2 - header3 (header1 also) will add to post navigation :::
Paragraph with `inline code`, **strong**, _emphasis_, **_emphasis strong_**、[Link](https://github.com)

**[Strong link](https://github.com)**markdown
Paragraph with inline code, strong, emphasis, 、Link

image

![picsum](https://picsum.photos/800/600)markdown
picsum

blockquote

> The blockquote can contains `inline code`, **strong**, _emphasis_, **_emphasis strong_**
> and so on...
>
> even itself
>
> > inner blockquote
> > `inner code`, [Google](https://google.com) > > ![picsum](https://picsum.photos/800/600)markdown
The blockquote can contains inline code, strong, emphasis, and so on...
even itself
inner blockquote inner code, Google > >
picsum

unordered list

-   item1
-   item2
-   item3markdown
  • item1
  • item2
  • item3

ordered list

1. item1
2. item1
3. item1markdown
  1. item1
  2. item1
  3. item1

nested list

1. First level item
    1. Nested item 1
    2. Nested item 2
2. Another first level item
    1. Nested item 3
        1. Sub-nested item A
        2. Sub-nested item B
    2. Nested item 4

-   item1
    -   item2
        -   item3markdown
  1. First level item
    1. Nested item 1
    2. Nested item 2
  2. Another first level item
    1. Nested item 3
      1. Sub-nested item A
      2. Sub-nested item B
    2. Nested item 4
  • item1
    • item2
      • item3

code block

Syntax highlight with highlight.js common language.
```c
#include <stdio>

int main() {
  printf("hello world");
}
```markdown
#include <stdio>

int main() {
  printf("hello world");
}c
WARN
If you want to show "```" (three backticks, the markdown code block default start symbol) in code block, you need to wrap this code with four backticks.

horizontal rule

---markdown

Github Flavored Markdown

table

| foo | bar | foo |
| :-- | :-: | --: |
| baz | qux | xyz |markdown
foo bar foo
baz qux xyz

auto link

Writing some text like a URL like https://github.com will automatically be converted to a link.markdown
Writing some text like a URL like https://github.com will automatically be converted to a link.

task list

-   [x] foo
    -   [ ] bar
        -   [ ] abc
    -   [x] baz
-   [ ] bimmarkdown
  • foo
    • bar
      • abc
    • baz
  • bim

strikethrough

this is ~~strikethrough~~markdown
this is strikethrough

Math

Math render currently only support latex syntax (partial) which is support by mathjax.

inline math

1 / 2 => $\frac{1}{2}$markdown
1 / 2 =>

display math

$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
$$markdown

Directive

details

:::details{text="unfold"}
this is some text
:::

:::details
this is some text
:::markdown

tip

:::tip{text="Tips"}
this is some text
:::

:::tip
this is some text
:::markdown
Tips
this is some text
TIP
this is some text

warning

:::warning{text="warn"}
this is some text
:::

:::warn
this is some text
:::markdown
warn
this is some text
WARN
this is some text

error

:::error{text="danger"}
this is some text
:::

:::danger
this is some text
:::markdown
danger
this is some text
DANGER
this is some text

MDX

You can create custom components with MDX.
You won't be able to use some characters like <, > in any position of your markdown content. But you can wrap these content with inline code or inline math.
Write HTML (include style and script) is also invalid.
So if you don't want to create custom components, just disable MDX plugin.
If you still need this, just create a svelte compoennt in the src/components/mdx. You can see the Badge component in it. The project use tailwindcss and daisyUI as CSS library, so you can write svelte compoennt with amount of pre-defiend css.

Badge

<Badge type="tip" text="tip"/>
<Badge type="warning" text="warning"/>
<Badge type="warn" text="warn"/>
<Badge type="error" text="error"/>
<Badge type="danger" text="danger"/>markdown
tipwarningwarnerrordanger
The End