CODEWITHSUNDEEP
reactjsgatsby
TrevPennington
TrevPennington

Reputation: 475

Injecting HTML code into Gatsby MD file for display

I have set up a Gatsby blog that uses md files to create pages for each blog post. I want to use Narrative.so (photo layouts) for the content of each blog. Using their software, it generates HTML for you to paste into your site's page.

Would this be possible in Gatsby? Here is the HTML it gave me as an example: 

<div class='nar-root' data-post-id='9ab2885d-f0e8-4d00-9c59-135ab04fc384' style='p {text-align:center;opacity: 0.0;animation: nara 0s ease-in 2s forwards;}@keyframes nara {to {opacity: 1.0;}}' >
  <img style="width:100%;" src="https://content1.getnarrativeapp.com/static/9ab2885d-f0e8-4d00-9c59-135ab04fc384/featured.jpg">
  <noscript><p>Your Narrative blog will appear here, click preview to see it live.<br>For any issues click <a href="https://help.narrative.so/i/j">here</a></p></noscript>
  <script type="text/javascript" src="https://service.getnarrativeapp.com/core/embed/r/9ab2885d-f0e8-4d00-9c59-135ab04fc384.js"></script>
</div>

Upvotes: 3

Views: 944

Answers (1)

EliteRaceElephant
EliteRaceElephant

Reputation: 8162

Yes, it is possible. Here is one possiblity:

  1. Add MDX support to your blog
  2. With MDX you can embed React components into your markdown file. 
// markdown file
import { NarrativePhotoLayout } from '../components/NarrativePhotoLayout'

# Here’s a NarrativePhotoLayout

The NarrativePhotoLayout is rendered inside our MDX document.

<NarrativePhotoLayout/>
  1. Build a React component that contains your HTML. This answer tells you how.
  2. Embed your React component in your blog post.

Upvotes: 2

Related Questions