I am using Markojs as my UI library and I am needing to render raw HTML that is included in the data model retrieved from the server.
For example, let's say my data model being retrieved from the server looks like so:
data = {
copy: "<p class='myClass'>Hello World!</p>"
}
I am wanting to be able to render my copy within my Marko template with something like this:
.copy
${input.data.copy}
and have it properly render the HTML element, but it does not quite work as expected. It does render to the page, but it also shows a "<" before and ">" after as text on the page.
It looks like this is the feature I am needing, but has been deprecated. What is the proper way to do this?
Here is the Solution:
.copy -- $!{input.data.copy}
Marko escapes text values by default, but you can use $!{input.data.copy} (note the !) to tell Marko you want the raw HTML instead.
https://markojs.com/docs/syntax/#dynamic-text
When you do this, you're essentially turning off a security feature of Marko, so be sure though that if any of the dynamic content you're getting is from an unsafe origin that it's being escaped elsewhere to prevent code from being injected on your page.