We're now reading the review text
from a separate Markdown file.
But the page is currently displaying
the raw Markdown source.
We can render it to HTML by using
a library such as Marked.
So, to begin with, let's go and install
that library into our project.
In the terminal, I'll stop the server,
and run "npm install marked",
that will download the right package.
It's not always necessary to
stop the server by the way,
you could run "npm install" in a separate
terminal if you want to,
and leave the server running.
Anyway, back to our StardewValleyPage.
Here we can now import the "marked" function
from the module we just installed.
And we can use this function
to render the Markdown.
We'll get the resulting "html"
by parsing the text.
And at this point we can display the "html" here.
If we go and reload the page,
you can see that it's showing the HTML.
However, this is actually the HTML code,
including all the tags.
That's because we put the "html" variable
inside a paragraph element,
and React will automatically escape
any special characters,
like the angle brackets in the tags.
We'll see how to fix this in a second.
But first, let's check the server logs.
There are a couple of warnings here,
from the marked library.
It says there are some parameters, like "mangle",
that are "enabled by default",
but are "deprecated".
That's a bit unusual.
If they're deprecated then why
are they enabled by default?
But the reason is that they're warning people
about planned future changes to the library.
Anyway, the bottom line is that
we should disable these two options:
"mangle" and "headerIds".
So, let's go and do that.
We can pass an object as second argument,
and here set "headerIds" and "mangle" to "false".
This way we should no longer see
those warnings in the logs.
I suppose in a future version those
options will be removed.
In fact, by the time you watch this video,
maybe this step won't be necessary any more.
Anyway, we still need to get React
to render this "html" variable,
without escaping all the angle brackets.
Let's use an "article" element instead,
since the Markdown content can
contain multiple paragraphs.
Now, to render a value directly as HTML,
without escaping it,
in React we need to use the "dangerouslySetInnerHTML"
prop.
And this must be an object with
a property called "__html",
where we can finally pass the "html" value.
React makes this deliberately complicated,
because they want you to think carefully
before displaying HTML directly.
It can be dangerous to do that,
from a security point of view.
If you directly display some HTML code
that was entered by your users,
that could be exploited for example
by inserting "script" tags
that can then run arbitrary JavaScript
code on your website.
That's why in general it's better
to avoid doing this.
But in our case we know that
the "html" was rendered
from a Markdown file that we wrote ourselves,
not by our users.
So there isn't any risk that it
will contain malicious code.
Anyway, let's finally save this change,
and you can see that the "html"
is now rendered properly,
without displaying all the tags.
Now, it's still not fully styled though.
The "bold" and "italic" text is fine,
but the headings and the list
don't have any formatting.
That's because of the way Tailwind CSS works:
as we've seen, by default it
resets most browser styles.
We'll see in the next video
how to configure Tailwind
to apply some appropriate styles in this case.
But we are now rendering the Markdown to HTML,
using the Marked library.