Render remote HTML or Markdown content in Astro with full control over the output.
npm install astro-remote
Render remote HTML or Markdown content in Astro with full control over the output.
Powered by ultrahtml and marked.
``sh`
npm install astro-remote
pnpm install astro-remote
yarn install astro-remote
The most basic function of astro-remote is to convert a string of HTML or Markdown to HTML. Use the Markup and Markdown components depending on your input.
`astro
---
import { Markup, Markdown } from 'astro-remote';
const { html, markdown } = await fetch('http://my-site.com/api/v1/post').then(res => res.json());
---
`
By default, all HTML content will be sanitized with sensible defaults (script blocks are dropped). This can be controlled using the SanitizeOptions available in ultrahtml. Set to false to disable sanitization.
`astro
---
import { Markup } from 'astro-remote';
const content = await fetch('http://my-site.com/api/v1/post').then(res => res.text());
---
sanitize={{
dropElements: ["head","style"],
blockElements: ["html", "body", "div"],
}}
/>
`
Both Markup and Markdown allow full control over the rendering of output. The components option allows you to replace a standard HTML element with a custom component.
`astro
---
import { Markdown, Markup } from 'astro-remote';
import Title from '../components/Title.astro';
const content = await fetch('http://my-site.com/api/v1/post').then(res => res.text());
---
`
In addition to built-in HTML Elements, Markdown also supports a few custom components for convenience.
####
The Heading component renders all h1 through h6 elements. It receives the following props:
- as, the h1 through h6 taghref
- , a pre-generated, slugified href
- , the text content of the children (for generating a custom slug)
`astro
---
import { Markdown } from 'astro-remote';
import Heading from '../components/Heading.astro';
const content = await fetch('http://my-site.com/api/v1/post').then(res => res.text());
---
`
A sample Heading component might look something like this.
`astro
---
const { as: Component, href } = Astro.props;
---
####
The CodeBlock component allows you customize the rendering of code blocks. It receives the following props:
- lang, the language specified after the three backticks (defaults to plaintext)code
- , the raw code to be highlighted. Be sure to escape the output!...props
- , any other attributes passed to the three backticks. These should follow HTML attribute format (name="value")
A sample CodeBlock component might look something like this.
`astro
---
const { lang, code, ...props } = Astro.props;
const highlighted = await highlight(code, { lang });
---
language-${lang}}>####
The
component allows you customize the rendering of inline code spans. It receives the following props:-
code, the value of the code spanA sample
CodeSpan component might look something like this.`astro
---
const { code } = Astro.props;
---
`####
The
component allows you customize the rendering of GitHub-style notes and warnings. It receives the following props:-
type, either "note" or "warning"To use a
component in Markdown, use the following syntax:`md
> Note
> Some tip here!> Warning
> Some warning here!
`$3
If you'd like to allow custom components in Markdown, you can do so using a combination of the
and components options. By default, sanitization removes components.Given the following markdown source:
`markdown
Hello world!
It works!
`astro
---
import { Markdown } from 'astro-remote';
import MyCustomComponent from '../components/MyCustomComponent.astro';
const content = await fetch('http://my-site.com/api/v1/post').then(res => res.text());
---
`$3
If you'd like to extend the underlying Marked behavior, the
prop accepts extensions.`astro
---
import { Markdown } from 'astro-remote';
import markedAlert from 'marked-alert'const content = await fetch('http://my-site.com/api/v1/post').then(res => res.text());
---
``