Inject HTML content into an Astro component
Emmanuel Gautier / August 16, 2023
1 min read
The Challenge putting script tag content with Astro
While working on a project within the Astro framework, I encountered a scenario where I needed to fill HTML content within a <script> tag. However, the moment I implemented this, the smooth functioning of my web application turned into a jittery experience. It was clear that the <script> content was not playing well with the rest of the page.
<script type="application/ld+json">{JSON.stringify(schema)}</script>
But the render was not the one expected:
<script type="application/ld+json">{JSON.stringify(schema)}</script>
How to inject HTML into an Astro element
After some investigation, I discovered that Astro web framework has his own way to inject HTML string into an element, the directive set:html.
For the developer more familiar with the React ecosystem, it is similar to the React dangerouslySetInnerHTML
Here is the final solution after reading the documentation:
<script type="application/ld+json" set:html={JSON.stringify(schema)} />
Hope that can help other developers!
Consulting
If you're seeking solutions to a problem or need expert advice, I'm here to help! Don't hesitate to book a call with me for a consulting session. Let's discuss your situation and find the best solution together.
Related Posts
Migrate URLs in Next.js
How to migrate URLs in Next.js to avoid 404 errors and improve SEO with permanent redirects.
Formatting Big Numbers in JavaScript
When working with large numerical values in JavaScript, it can be challenging to display them in a way that's easy to read and understand. In this blog post, we'll explore techniques for formatting big numbers in JavaScript with built-in methods.
Changing Document Field Types with MongoDB
This article explains how to convert document field types during query execution and how to use MongoDB's built-in aggregation operators $convert. The article also provides practical examples and code snippets to demonstrate how to change field types in MongoDB.
Featured Posts
Introducing new blog about OAuth, OpenID Connect, and IAM Solutions
I'm excited to announce the launch of a new blog named CerberAuth, where I'll be exploring the world of OAuth, OpenID Connect, and IAM solutions for modern security.
How to deal with Docker Hub rate limit on AWS
Since 2020, DockerHub has been limited to only 200 container image pull requests per six hours. This article will help you to deal with this limitation on AWS.
How to enable Python type checking in VSCode
Python now has support for type hints. In this article, we will see how to enable better IntelliSense and type checking analysis in VSCode.