1
00:00:02,000 --> 00:00:04,000
Let's now dive into a different scenario

2
00:00:04,000 --> 00:00:06,000
that we have a code snippet in markdown

3
00:00:06,000 --> 00:00:09,000
and we wanna present this in a nice way.

4
00:00:09,000 --> 00:00:13,000
For this, I prepared a second post for you.

5
00:00:13,000 --> 00:00:16,000
Attached, you find a zip file mastering JavaScript

6
00:00:16,000 --> 00:00:17,000
which contains an image,

7
00:00:17,000 --> 00:00:21,000
which you should add in a mastering JavaScript folder

8
00:00:21,000 --> 00:00:24,000
instead of images, posts

9
00:00:24,000 --> 00:00:27,000
and then the mastering JavaScript Markdown file

10
00:00:27,000 --> 00:00:30,000
which you should add in the posts folder.

11
00:00:30,000 --> 00:00:31,000
That is a file

12
00:00:31,000 --> 00:00:34,000
which has the same kind of metadata as the other file,

13
00:00:34,000 --> 00:00:37,000
just the order is different.

14
00:00:37,000 --> 00:00:39,000
And then also some content.

15
00:00:39,000 --> 00:00:40,000
And here we have a code snippet.

16
00:00:40,000 --> 00:00:43,000
This is how we can add a code snippet in markdown.

17
00:00:45,000 --> 00:00:46,000
Now, if I save that,

18
00:00:46,000 --> 00:00:50,000
if I go to All Posts, we see that post here.

19
00:00:50,000 --> 00:00:54,000
So our logic for loading all posts to works.

20
00:00:54,000 --> 00:00:57,000
And if we click on that post, we also loaded here,

21
00:00:57,000 --> 00:01:00,000
but the code snippet is presented.

22
00:01:00,000 --> 00:01:02,000
We could present it in a nicer way.

23
00:01:02,000 --> 00:01:05,000
It's okay, but we can do better.

24
00:01:05,000 --> 00:01:06,000
And for this I wanna override

25
00:01:06,000 --> 00:01:09,000
how the code snippet will be rendered.

26
00:01:10,000 --> 00:01:12,000
Now we can do that overriding just

27
00:01:12,000 --> 00:01:14,000
as we did it for the image.

28
00:01:14,000 --> 00:01:18,000
In post content js in the custom renderers object,

29
00:01:18,000 --> 00:01:23,000
we can not just override how a paragraph is rendered

30
00:01:23,000 --> 00:01:27,000
but in there we can also add another method called code

31
00:01:27,000 --> 00:01:31,000
because that's a never officially supported identifier

32
00:01:31,000 --> 00:01:33,000
for such code blocks.

33
00:01:33,000 --> 00:01:38,000
Here, we then get our code object from react-markdown

34
00:01:38,000 --> 00:01:41,000
and now I wanna return my own JSX element.

35
00:01:41,000 --> 00:01:42,000
And there is a great component

36
00:01:42,000 --> 00:01:45,000
which we can use for rendering code snippets.

37
00:01:45,000 --> 00:01:47,000
It's a number of third party package

38
00:01:47,000 --> 00:01:48,000
which I'll install

39
00:01:48,000 --> 00:01:53,000
and it is the react-syntax-highlighter package

40
00:01:54,000 --> 00:01:56,000
written like this.

41
00:01:56,000 --> 00:01:58,000
So make sure you install that package.

42
00:02:00,000 --> 00:02:03,000
And that is a package which makes highlighting code

43
00:02:03,000 --> 00:02:06,000
in a pleasant way very, very simple.

44
00:02:06,000 --> 00:02:08,000
So let's restart a def server

45
00:02:08,000 --> 00:02:11,000
and let's start by importing that library.

46
00:02:11,000 --> 00:02:16,000
For this, we need to import from react-syntax-highlighter

47
00:02:16,000 --> 00:02:20,000
and from there we can import various syntax highlighters

48
00:02:20,000 --> 00:02:22,000
which are built in.

49
00:02:22,000 --> 00:02:25,000
As always if you Google for react syntax highlighter,

50
00:02:25,000 --> 00:02:28,000
you'll find the official docs,

51
00:02:28,000 --> 00:02:31,000
the official GitHub repository to be precise.

52
00:02:31,000 --> 00:02:36,000
And there you then find detailed instructions and guidance.

53
00:02:37,000 --> 00:02:40,000
Now we will use the prism syntax highlighter

54
00:02:40,000 --> 00:02:41,000
which is built in

55
00:02:41,000 --> 00:02:44,000
and we'll use it basically as it's shown here

56
00:02:44,000 --> 00:02:46,000
with one minor adjustment.

57
00:02:47,000 --> 00:02:51,000
We import Prism from react-syntax,-highlighter

58
00:02:51,000 --> 00:02:55,000
and I'll rename it to SyntaxHighLighter

59
00:02:55,000 --> 00:02:57,000
though that's of course optional.

60
00:02:57,000 --> 00:03:01,000
This will give us a container which is able to digest, code,

61
00:03:01,000 --> 00:03:05,000
and then format it in a nice way.

62
00:03:05,000 --> 00:03:08,000
Now for styling, we have to add an extra import

63
00:03:08,000 --> 00:03:11,000
which will then style this code in a beautiful way.

64
00:03:11,000 --> 00:03:15,000
We import from react-syntax-highlighter again

65
00:03:15,000 --> 00:03:17,000
but now from a sub folder.

66
00:03:17,000 --> 00:03:22,000
From this /cjs and that's important cjs, not esm,

67
00:03:24,000 --> 00:03:27,000
but cjs since this code needs to be executable

68
00:03:27,000 --> 00:03:32,000
on the server side /styles/prism.

69
00:03:33,000 --> 00:03:38,000
And from there I'll import the atomDark theme.

70
00:03:39,000 --> 00:03:41,000
Now there are other themes

71
00:03:41,000 --> 00:03:44,000
you can just use auto-completion to browse through them

72
00:03:44,000 --> 00:03:45,000
and try out different themes.

73
00:03:45,000 --> 00:03:48,000
But I like the atomDark theme.

74
00:03:48,000 --> 00:03:50,000
How are we going to use it though?

75
00:03:50,000 --> 00:03:53,000
We're going to use it with our custom renderer.

76
00:03:53,000 --> 00:03:57,000
Here, we wanna return a new SyntaxHighLighter component.

77
00:03:57,000 --> 00:04:01,000
So we use that syntax highlighter component

78
00:04:01,000 --> 00:04:05,000
and now that component needs to know which language is used

79
00:04:05,000 --> 00:04:08,000
for the given code snippet in markdown

80
00:04:08,000 --> 00:04:10,000
that is added as a notation

81
00:04:10,000 --> 00:04:15,000
after these free back takes js for JavaScript for example

82
00:04:15,000 --> 00:04:18,000
that's needed for this highlighting component

83
00:04:18,000 --> 00:04:20,000
to highlight the right keywords.

84
00:04:20,000 --> 00:04:23,000
So we need to pass into language and then children.

85
00:04:23,000 --> 00:04:25,000
So the actual code.

86
00:04:26,000 --> 00:04:28,000
Now we get both from the code

87
00:04:28,000 --> 00:04:32,000
our react Markdown component identified here.

88
00:04:32,000 --> 00:04:35,000
So there we can use object de-structuring

89
00:04:35,000 --> 00:04:39,000
to get the language and the concrete value.

90
00:04:39,000 --> 00:04:42,000
And then we set language = language

91
00:04:42,000 --> 00:04:44,000
and children = value.

92
00:04:45,000 --> 00:04:48,000
And then we just also add a style property

93
00:04:48,000 --> 00:04:52,000
and that's where I then use atomDark, which I also import.

94
00:04:52,000 --> 00:04:56,000
And this will render a code by using this component.

95
00:04:56,000 --> 00:04:57,000
And with that added,

96
00:04:57,000 --> 00:05:02,000
if we save everything and reload our single article here,

97
00:05:03,000 --> 00:05:05,000
it can take a while for the first time

98
00:05:05,000 --> 00:05:08,000
but then we see our code rendered like this.

99
00:05:08,000 --> 00:05:11,000
And I would argue that this is much more readable

100
00:05:11,000 --> 00:05:13,000
and much nicer to read

101
00:05:13,000 --> 00:05:16,000
than that default formatting we had.

102
00:05:16,000 --> 00:05:17,000
Now of course feel free

103
00:05:17,000 --> 00:05:20,000
to play around with the different themes.

104
00:05:20,000 --> 00:05:23,000
Here, this is the theme and the look I will go with

105
00:05:23,000 --> 00:05:27,000
and that therefore now is the finished post content.

106
00:05:27,000 --> 00:05:30,000
We now know how we can load the content,

107
00:05:30,000 --> 00:05:33,000
how we can present it with react-markdown

108
00:05:33,000 --> 00:05:36,000
and how we can fine tune it to replace certain elements

109
00:05:36,000 --> 00:05:39,000
like images or code snippets.

110
00:05:39,000 --> 00:05:42,000
So our blog is taking shape

111
00:05:42,000 --> 00:05:45,000
and it is working it showing our posts,

112
00:05:45,000 --> 00:05:48,000
featured posts here and all posts here.

113
00:05:48,000 --> 00:05:51,000
And as we saw, we can also visit individual posts

114
00:05:51,000 --> 00:05:54,000
and have features like code highlighting.

115
00:05:55,000 --> 00:05:57,000
Now let's work on this contact page

116
00:05:57,000 --> 00:05:59,000
because that's totally missing.

117
00:05:59,000 --> 00:06:02,000
And here, my goal is to show a form

118
00:06:02,000 --> 00:06:06,000
which users can fill out to send a message to us

119
00:06:06,000 --> 00:06:08,000
and then I wanna accept this message

120
00:06:08,000 --> 00:06:11,000
with help of API routes.

121
00:06:11,000 --> 00:06:13,000
That's a number of key feature we learned about

122
00:06:13,000 --> 00:06:16,000
and then I wanna store that message in a database.

123
00:06:16,000 --> 00:06:19,000
So not markdownfalls or anything like this

124
00:06:19,000 --> 00:06:22,000
because that's now user generated content

125
00:06:22,000 --> 00:06:24,000
but instead a real database.

126
00:06:24,000 --> 00:06:25,000
And that's what we're going to work on

127
00:06:25,000 --> 00:06:27,000
over the next lectures.