Let's now dive into a different scenario
that we have a code snippet in markdown
and we wanna present this in a nice way.
For this, I prepared a second post for you.
Attached, you find a zip file mastering JavaScript
which contains an image,
which you should add in a mastering JavaScript folder
instead of images, posts
and then the mastering JavaScript Markdown file
which you should add in the posts folder.
That is a file
which has the same kind of metadata as the other file,
just the order is different.
And then also some content.
And here we have a code snippet.
This is how we can add a code snippet in markdown.
Now, if I save that,
if I go to All Posts, we see that post here.
So our logic for loading all posts to works.
And if we click on that post, we also loaded here,
but the code snippet is presented.
We could present it in a nicer way.
It's okay, but we can do better.
And for this I wanna override
how the code snippet will be rendered.
Now we can do that overriding just
as we did it for the image.
In post content js in the custom renderers object,
we can not just override how a paragraph is rendered
but in there we can also add another method called code
because that's a never officially supported identifier
for such code blocks.
Here, we then get our code object from react-markdown
and now I wanna return my own JSX element.
And there is a great component
which we can use for rendering code snippets.
It's a number of third party package
which I'll install
and it is the react-syntax-highlighter package
written like this.
So make sure you install that package.
And that is a package which makes highlighting code
in a pleasant way very, very simple.
So let's restart a def server
and let's start by importing that library.
For this, we need to import from react-syntax-highlighter
and from there we can import various syntax highlighters
which are built in.
As always if you Google for react syntax highlighter,
you'll find the official docs,
the official GitHub repository to be precise.
And there you then find detailed instructions and guidance.
Now we will use the prism syntax highlighter
which is built in
and we'll use it basically as it's shown here
with one minor adjustment.
We import Prism from react-syntax,-highlighter
and I'll rename it to SyntaxHighLighter
though that's of course optional.
This will give us a container which is able to digest, code,
and then format it in a nice way.
Now for styling, we have to add an extra import
which will then style this code in a beautiful way.
We import from react-syntax-highlighter again
but now from a sub folder.
From this /cjs and that's important cjs, not esm,
but cjs since this code needs to be executable
on the server side /styles/prism.
And from there I'll import the atomDark theme.
Now there are other themes
you can just use auto-completion to browse through them
and try out different themes.
But I like the atomDark theme.
How are we going to use it though?
We're going to use it with our custom renderer.
Here, we wanna return a new SyntaxHighLighter component.
So we use that syntax highlighter component
and now that component needs to know which language is used
for the given code snippet in markdown
that is added as a notation
after these free back takes js for JavaScript for example
that's needed for this highlighting component
to highlight the right keywords.
So we need to pass into language and then children.
So the actual code.
Now we get both from the code
our react Markdown component identified here.
So there we can use object de-structuring
to get the language and the concrete value.
And then we set language = language
and children = value.
And then we just also add a style property
and that's where I then use atomDark, which I also import.
And this will render a code by using this component.
And with that added,
if we save everything and reload our single article here,
it can take a while for the first time
but then we see our code rendered like this.
And I would argue that this is much more readable
and much nicer to read
than that default formatting we had.
Now of course feel free
to play around with the different themes.
Here, this is the theme and the look I will go with
and that therefore now is the finished post content.
We now know how we can load the content,
how we can present it with react-markdown
and how we can fine tune it to replace certain elements
like images or code snippets.
So our blog is taking shape
and it is working it showing our posts,
featured posts here and all posts here.
And as we saw, we can also visit individual posts
and have features like code highlighting.
Now let's work on this contact page
because that's totally missing.
And here, my goal is to show a form
which users can fill out to send a message to us
and then I wanna accept this message
with help of API routes.
That's a number of key feature we learned about
and then I wanna store that message in a database.
So not markdownfalls or anything like this
because that's now user generated content
but instead a real database.
And that's what we're going to work on
over the next lectures.