`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

);
}
`

####

`md
Lorem
*
Ipsum
*
Dolor
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (

Lorem

Ipsum

Dolor

);
}
`

####

`md
> Lorem ipsum dolor.
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (



Lorem ipsum dolor.



);
}
`

#### and

##### Ordered lists

`md
1. Lorem
2. Ipsum
3. Dolor
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (



Lorem


Ipsum


Dolor



);
}
`

##### Unordered lists

`md
- Lorem
- Ipsum
- Dolor
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (



Lorem


Ipsum


Dolor



);
}
`

####

``md
`js highlight-line="2"
foo()
bar()
baz()
`
``

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (


{"foo()\nbar()\nbaz()"}


);
}
`

####

`md
[Github]: https://github.com
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (

url={"https://github.com"}
identifier={"github"}
label={"Github"}
/>

);
}
`

####

`md
alpha _bravo_
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (


alpha bravo


);
}
`

####

`md
alpha __bravo__
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (


alpha bravo


);
}
`

####

`md
foo()
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (


{"foo()"}


);
}
`

####

`md
a
b
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (


ab


);
}
`

####

`md
alpha
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (


component={_ctx$.builtins.Link}
url={"https://example.com"}
title={"bravo"}
>
alpha



);
}
`

####

`md
!alpha
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (


component={_ctx$.builtins.Image}
url={"https://example.com/favicon.ico"}
title={"bravo"}
alt={"alpha"}
/>


);
}
`

####

Must be have an associated .

`md
[This is an example][alpha]

[alpha]: bravo
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (


component={_ctx$.builtins.LinkReference}
identifier={"alpha"}
label={"alpha"}
referenceType={"full"}
>
This is an example


component={_ctx$.builtins.Definition}
url={"bravo"}
identifier={"alpha"}
label={"alpha"}
/>

);
}
`

####

Must be have an associated .

`md
![This is an example][alpha]

[alpha]: bravo
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (


component={_ctx$.builtins.ImageReference}
identifier={"alpha"}
label={"alpha"}
referenceType={"full"}
alt={"This is an example"}
/>

component={_ctx$.builtins.Definition}
url={"bravo"}
identifier={"alpha"}
label={"alpha"}
/>

);
}
`

$3

Based on Github-flavored Markdown

####

`md
[^alpha]: bravo and charlie.
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (


bravo and charlie.


);
}
`

####

Must have an associated

`md
[^alpha]

[^alpha]: bravo and charlie.
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (


component={_ctx$.builtins.FootnoteReference}
identifier={"alpha"}
label={"alpha"}
/>


bravo and charlie.


);
}
`

####

, and

`md
| first | second | third |
| :---- | :----: | ----: |
| foo | bar | baz |
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (



first
second
third


foo
bar
baz



);
}
`

####

`md
~~alpha~~
`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (


alpha


);
}
`

$3

solid-marked supports MDX, with three compilation modes for the HTML/JSX expressions based on the noDynamicImports option for the compiler.

Let's take this example code:

`js
Hello World
`

- if set to true, the output JSX will not use SolidJS' component and instead outputs the target JSX component directly to the markup.
`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (
<_ctx$.builtins.Root>
<_ctx$.builtins.Paragraph>
Hello World


);
}
`
- if set to false, the output will use . If an HTML or JSX expression is encountered, the element will be checked if it's not declared, in which it will use its counterpart component from useMDX, otherwise it will use the component/element directly.
`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (



Hello World



);
}
`
- if set to only-mdx, is only used for builtin components while HTML/JSX expressions will be used directly.
`js
import { useMDX as _useMDX$ } from 'solid-marked';

export default function Component(props) {
const _ctx$ = _useMDX$();
return (


Hello World


);
}
`

$3

is automatically generated when elements are detected. It is automatically exported and can also be used in the Markdown/MDX.

`md


foo

bar

$3

alpha

bravo

$3

`

`js
import { useMDX as _useMDX$ } from 'solid-marked';

export function TableOfContents(props) {
const _ctx$ = _useMDX$();
return (



foo




bar




baz








alpha




bravo




charlie







);
}
export default function Component(props) {
const _ctx$ = _useMDX$();
return (

foo
bar
baz
alpha
bravo
charlie

);
}
`

$3

solid-marked supports YAML and TOML frontmatter for Markdown/MDX. The data can be accessed through the frontmatter variable and also exported automatically. Frontmatter can only be used directly at the first line of the file.

#### YAML

`mdx
---
title: Hi, World!
---


{frontmatter.title}


`

`js
export const frontmatter = ({title:"Hi, World!"});
import { useMDX as _useMDX$ } from 'solid-marked';

export function TableOfContents(props) {
const _ctx$ = _useMDX$();
return (




{frontmatter.title}




);
}
export default function Component(props) {
const _ctx$ = _useMDX$();
return (


{frontmatter.title}


);
}
`

#### TOML

`md
+++
title = "Hi, World!"
+++


{frontmatter.title}


`

`js
export const frontmatter = Object.assign(Object.create(null),{title:"Hi, World!"});
import { useMDX as _useMDX$ } from 'solid-marked';

export function TableOfContents(props) {
const _ctx$ = _useMDX$();
return (




{frontmatter.title}




);
}
export default function Component(props) {
const _ctx$ = _useMDX$();
return (


{frontmatter.title}


);
}
`

Typescript

`ts
///
`

Component

The features above are compile-time Markdown rendering. For runtime rendering, solid-marked provides the Markdown component:

`js
import Markdown from 'solid-marked/component';

const content = (
builtins={{
Root(props) {
return (



{props.children}


);
},
Blockquote(props) {
return (

{props.children}

);
},
}}
>
{'> This is a blockquote.'}

);
``

> [!NOTE]
> Markdown component only supports CommonMark and GFM. MDX and Frontmatter are considered "invalid".

Sponsors

!Sponsors

License

MIT © lxsmnsyc

Show more