#rendering markdown strings

3 messages · Page 1 of 1 (latest)

drifting path
#

what's the best approach to rendering blocks of markdown or markdown strings? is there an internal function for this, so i can use my existing markdown config, or should i use something like @astropub/md?

swift locustBOT
#

Hi @drifting path. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Astro does not include built-in support for rendering remote Markdown strings. To fetch remote Markdown and render it to HTML, you will need to install and configure your own Markdown parser from npm. This will not inherit from any of Astro’s built-in Markdown and MDX settings that you have configured. Be sure that you understand these limitations before implementing this in your project.

Here's an example of fetching remote Markdown and rendering it using the "marked" library:

---
// Example: Fetch Markdown from a remote API  
// and render it to HTML, at runtime. 
// Using "marked" (https://github.com/markedjs/marked) 
import { marked } from 'marked'; 
const response = await fetch('https://raw.githubusercontent.com/wiki/adam-p/markdown-here/Markdown-Cheatsheet.md'); 
const markdown = await response.text(); 
const content = marked.parse(markdown); 
--- 
<article set:html={content} />

This example is taken from the Fetching Remote Markdown (https://docs.astro.build/en/guides/markdown-content#fetching-remote-markdown) section of the Astro documentation.

If you want to use your existing Markdown configuration, you can customize how remark parses your Markdown in astro.config.mjs. See the full list of Markdown configuration options (https://docs.astro.build/en/reference/configuration-reference/#markdown-options). However, this configuration will not apply to remote Markdown strings fetched and parsed using external libraries like "marked" or "@astropub/md".

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Astro Documentation

Learn how to create content using Markdown or MDX with Astro

Astro Documentation

Build faster websites with less client-side JavaScript.