forem.dev Community

loading...

Api call "body_markdown" not displaying article with h1, h2... headers.

the_greatbonnie profile image The Great Bonnie! ・1 min read

Am trying to make API call to display articles from dev.to on my portfolio website but when I make the "body_markdown" call the headers are not displayed.

What is getting displayed are the ##. Here are the results am getting.
Alt Text

Here is the actual article on dev.to Alt Text

How can I display the article on my website just like it appears on dev.to?

NB: Am using Django to make the API calls.

Discussion (5)

pic
Editor guide
Collapse
s_aitchison profile image
Suzanne Aitchison

Nice work getting your API calls set up - looks like you're fetching the article markdown successfully πŸŽ‰

As you've spotted, the markdown is received from the API as a string. This means it will look like the raw content you enter on DEV, rather than the preview/published version (i.e. with all the markdown syntax like ## for headings).

To display it on your website like it appears on DEV, you'll need to add an extra step to turn the string markdown into HTML. There are a lot of markdown parsing libraries that can do this for you, but which one you should choose will depend on what framework or tools you're using in your website (and, of course, personal preference!).

If you're not sure which library to use, it might be a great idea to start a discussion on DEV with the #discuss tag to find out what other developers with a similar setup like to use!

Collapse
the_greatbonnie profile image
The Great Bonnie! Author

Just googled 'markdown parsing libraries for Django' and I found one called 'Markdownify Library'. I have converted the body markdown to HTML and the article appears just like on dev.to.

Am really grateful for your support.

Collapse
s_aitchison profile image
Suzanne Aitchison

That's awesome! You made short work of that πŸ’ͺ

Thread Thread
the_greatbonnie profile image
The Great Bonnie! Author

Actually, I have written an article on Dev To on how I did it.

Here is the link:

dev.to/the_greatbonnie/how-to-disp...

Thread Thread
coffeecraftcode profile image
Christina Gorton

Thank you for writing something up and sharing with everyone on DEV!