Using markdown editor (Marked) in svelte components

Today, I changed my thought on manging APIs in my personal blog. I have got a chance to look into strapi. Strapi is really awesome and it made all my cms/api stuff made simple. Now I use strapi as CMS api and forend sapper.

Strapi has a wonderfull treats rich text componets to markeddown. It made my artcles posting quite simple. As I use svelte/sapper as frontend, I have to display my markeddown contents correct in my svelte page.

To do so, I need the help of "marked" library.

npm i marked

Below is my blog page detail vew conponent.

<script>
export let article;
import  marked from 'marked';  
</script>
<svelte:head>  
<title>{article.title}</title>  
</svelte:head>
<h1>{article.title}</h1>
<div class='content'>
{@html marked(article.html)}
</div>
  • Roopz © 2020