Markdown Rendering

Learn how to properly convert and display Drock API Markdown content on your frontend.

Raw Markdown Warning

The Drock API returns article content as raw Markdown (unless you request JSON). If you display this directly without a converter, your users will see raw syntax like **bold** or _italic_. You must format it using a frontend library.

React.js / Next.js

We recommend using react-markdown combined with plugins for GitHub Flavored Markdown and raw HTML (to support iframes).

bash

npm install react-markdown rehype-raw remark-gfm

tsx

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';

export default function ArticleFrontEnd({ article }) {
  return (
    <article className="prose lg:prose-xl mx-auto dark:prose-invert">
      {/* 
        ✅ react-markdown transformera automatiquement :
        **gras** en <strong>gras</strong>
        et autorisera les iframes Drock grâce à rehype-raw !
      */}
      <ReactMarkdown 
        remarkPlugins={[remarkGfm]} 
        rehypePlugins={[rehypeRaw]}
      >
        {article.content}
      </ReactMarkdown>
    </article>
  );
}

💡 TailwindCSS tip: Don't forget to use the @tailwindcss/typography plugin (containing the prose class) so your generated Markdown tags look aesthetic.

Vue.js / Nuxt

You can use vue-markdown-render or compute with marked directly.

bash

npm install marked

vue

<template>
  <div>
    <!-- HTML safely injected (ensure it is sanitized if user-generated!) -->
    <div class="prose" v-html="htmlContent"></div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { marked } from 'marked';

const props = defineProps({
  articleContent: String // Le texte "Markdown" reçu de l'API Drock
})

const htmlContent = computed(() => {
  return marked.parse(props.articleContent || '');
});
</script>

Vanilla HTML / JS

Import marked via CDN to avoid writing raw HTML conversions.

html

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        .markdown-body ul { list-style-type: disc; margin-left: 1.5rem; }
    </style>
</head>
<body>
    <div id="content" class="markdown-body"></div>

    <script>
      fetch("https://api.getdrock.com/api/v1/articles", {
         headers: { "Authorization": "Bearer VOTRE_CLE_API" }
      })
      .then(res => res.json())
      .then(data => {
         const markdownSource = data.articles[0].content;
         document.getElementById('content').innerHTML = marked.parse(markdownSource);
      });
    </script>
</body>
</html>