OK, so we've got our state value, and as we're typing, of course, we display that in two places
with this play that and our text area as well as the result.
However, since I'm typing here the mark down, I wouldn't want to display that gibberish.
And the result, I actually would want to display my HMO and there many libraries on there that do that
for no particular reason.
I chose react markdown.
So that's the package work on two years.
If you want to navigate with our docs, just type react markdown.
And then of course, one of the first links of that is going to pop up is going to be their documentation
as far as installed for your own project.
You're going to have to go with NPM install reac, Margot.
And of course, I already install it for this project and the basic setup is as straightforward as it
gets.
We have a default import from the library online.
That is our component.
And inside of the component as a child, we just pass whatever we would want to pipe through the component
and then as a result we are going to get the HDMI.
Now, of course, they have more complicated setups as well, but in this project, I'm not going to
cover them.
You need them for your own project.
Just navigate through their docs and go over the other setups they provide.
So in my case, I'm going to navigate back to our project.
I already imported the default import from the Iraq Margon online.
I would want to pipe through my markdown, so I'm going to navigate to the article since that's where
I would want to display my demo and we're going to go with our component online or replace the markdown
inside.
Now, of course, notice as I'm typing here, Mark down as a result, I'm getting the demo.
Now, if you don't believe me.
Couldn't navigate a bigger browser, and you'll notice that in the result, this is already a heading
to turn here.
This is what I'm typing right now in a text error, because we know that in the markdown, if we would
want to set up a heading, we would need to go with hash tag online for having one.
Of course, that is going to be one hash tag and line for having sex.
That is going to be six hash tags.
So in this case, I have two hash tags online, whatever value for my text.
And then, of course, as a result, I get this heading to in my article with class result and we're
pretty much done with functionality.
The only thing that I would want right now is to test it, how it's going to work.
And along the way I show you some gotchas.
So start with heading to markdown.
And you know what I think of must do?
Man, I bet just so we can see a little bit clearer.
And then I'm going to go with some kind of coat and I'm going to say here is a quote quote by someone
famous, by someone famous like so one out, one heading, six show or four, whatever, whichever heading
you would want.
And I'm here to say hello, world.
And as you can see right now, we have heading to and then we have five sense.
Of course, I have five hashtags.
Again, if you want to double check, just inspect the article and you'll notice that you have had to
have blockquote as well as the heading five.
What I would want to set up of the paragraph and as far as the text, I'm going to go with lorem text,
but I'm going to get it from my favorite place, the hip, some website, and I'm just going to grab
one sentence and navigate back and we're going to copy and paste.
So that is my text and this is how it's going to look like as far as HMO.
Now, I would want to showcase how we can add the Botox, so we need to start here.
So, for example, I would want this one to be bold and of course, there it is.
And if you want to tell you, just go with one star, one star here.
Online, I want to close it as well, so notice how the rest of the text essentially is a thali, then
we can take a look at how we can be on our list.
And not to do that, we just go with hyphen online, whatever value.
So we're going to go with first and second and third, something like that.
And then notice I have my own artlessly now.
I'm going to close it here because I don't think we need to showcase the console anymore online.
If you want wordlist, you do the same thing or the difference is that you go with the number and then
that second, first line, second and third mark.
So, so we have these three values and then if you want to display the code, you go with the old character
which is left off number one.
So we go like this and replace whichever code you would want inside this case.
I'm going to go with alert and I'm just going to invoke it now, right here.
Now I have my code displayed in this fashion.
And then two more things that I want on Strokers is the link as well as the image.
So if you want to have a link, which is go with square brackets and we have parentheses and we're just
going to type one, what is going to be the name for the link in this case, Google and mine?
As far as the value, we just need to go with your arrow here.
I'm going to go with the world's largest online Google dot com, and you'll notice that once you click,
you're going to navigate to Google and Microsoft can navigate back.
And then the last one is the image where, again, we go with square brackets and then we have some
kind of value zone here.
I'll type image.
And then as far as the value, I'll navigate to Paxos and then we're just going to get the image address.
In this case, that's what we're looking for.
Then we're navigating back copy and pasting and then for the image, we need the exclamation point as
well.
And now notice how we have the image in our markdown.
Now, one Gotcher that I would want to show is that, of course, the success here is not by default.
But remember one thing again, if we inspect this is just straight up demo.
So we have our paragraph's we have our list.
And then we also have this pre and in that pre we have the code.
And then also we have a paragraph with a link as well as the image.
So the Gotcher here is that if you want to style it differently, you just need to apply yourself.
So if you navigate right now to my index, she says, you'll notice that.
Yeah, I styled, of course, the markdown, the input and all of that.
But if you keep on scrolling.
These are the styles that you're seeing in the result.
So essentially, I know that if there's going to be a blockquote, then I'm going to start in this way.
If there's going to be an image, I'm going to start this way.
And hopefully you get the gist where you are the king of the castle.
If you know that you would want to display the barcode in one way, then just have access, because
you know that there's going to be a black element if you would want to style image differently than
I did because I just went with two hundred and two hundred pixels, which you can definitely do that.
Hopefully everyone enjoyed the project and I hope to see your next one.