All language subtitles for 002 Rendering Markdown_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian Download
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:03,000 --> 00:00:05,367 We're now reading the review text 2 00:00:05,367 --> 00:00:07,746 from a separate Markdown file. 3 00:00:07,746 --> 00:00:10,406 But the page is currently displaying 4 00:00:10,406 --> 00:00:12,179 the raw Markdown source. 5 00:00:12,253 --> 00:00:15,265 We can render it to HTML by using 6 00:00:15,265 --> 00:00:17,546 a library such as Marked. 7 00:00:17,638 --> 00:00:20,416 So, to begin with, let's go and install 8 00:00:20,416 --> 00:00:22,554 that library into our project. 9 00:00:22,625 --> 00:00:25,063 In the terminal, I'll stop the server, 10 00:00:25,225 --> 00:00:27,838 and run "npm install marked", 11 00:00:27,838 --> 00:00:30,344 that will download the right package. 12 00:00:30,344 --> 00:00:32,255 It's not always necessary to 13 00:00:32,255 --> 00:00:34,097 stop the server by the way, 14 00:00:34,166 --> 00:00:37,038 you could run "npm install" in a separate 15 00:00:37,038 --> 00:00:38,719 terminal if you want to, 16 00:00:38,790 --> 00:00:40,861 and leave the server running. 17 00:00:41,030 --> 00:00:44,261 Anyway, back to our StardewValleyPage. 18 00:00:44,261 --> 00:00:47,786 Here we can now import the "marked" function 19 00:00:47,786 --> 00:00:50,217 from the module we just installed. 20 00:00:51,446 --> 00:00:53,509 And we can use this function 21 00:00:53,509 --> 00:00:55,204 to render the Markdown. 22 00:00:55,277 --> 00:00:57,933 We'll get the resulting "html" 23 00:00:57,933 --> 00:00:59,703 by parsing the text. 24 00:00:59,792 --> 00:01:03,713 And at this point we can display the "html" here. 25 00:01:03,713 --> 00:01:05,771 If we go and reload the page, 26 00:01:06,293 --> 00:01:09,129 you can see that it's showing the HTML. 27 00:01:09,129 --> 00:01:12,233 However, this is actually the HTML code, 28 00:01:12,233 --> 00:01:14,018 including all the tags. 29 00:01:14,095 --> 00:01:17,183 That's because we put the "html" variable 30 00:01:17,183 --> 00:01:19,217 inside a paragraph element, 31 00:01:19,292 --> 00:01:21,805 and React will automatically escape 32 00:01:21,805 --> 00:01:23,456 any special characters, 33 00:01:23,528 --> 00:01:26,275 like the angle brackets in the tags. 34 00:01:26,275 --> 00:01:28,813 We'll see how to fix this in a second. 35 00:01:28,813 --> 00:01:31,765 But first, let's check the server logs. 36 00:01:31,765 --> 00:01:34,359 There are a couple of warnings here, 37 00:01:34,359 --> 00:01:36,088 from the marked library. 38 00:01:36,160 --> 00:01:39,687 It says there are some parameters, like "mangle", 39 00:01:39,687 --> 00:01:41,974 that are "enabled by default", 40 00:01:41,974 --> 00:01:43,575 but are "deprecated". 41 00:01:43,651 --> 00:01:45,111 That's a bit unusual. 42 00:01:45,111 --> 00:01:47,437 If they're deprecated then why 43 00:01:47,437 --> 00:01:49,607 are they enabled by default? 44 00:01:49,684 --> 00:01:52,957 But the reason is that they're warning people 45 00:01:52,957 --> 00:01:56,157 about planned future changes to the library. 46 00:01:56,230 --> 00:01:58,430 Anyway, the bottom line is that 47 00:01:58,430 --> 00:02:01,576 we should disable these two options: 48 00:02:01,576 --> 00:02:03,760 "mangle" and "headerIds". 49 00:02:03,848 --> 00:02:05,431 So, let's go and do that. 50 00:02:06,228 --> 00:02:09,059 We can pass an object as second argument, 51 00:02:09,059 --> 00:02:13,271 and here set "headerIds" and "mangle" to "false". 52 00:02:13,271 --> 00:02:15,583 This way we should no longer see 53 00:02:15,583 --> 00:02:17,535 those warnings in the logs. 54 00:02:17,607 --> 00:02:20,120 I suppose in a future version those 55 00:02:20,120 --> 00:02:21,843 options will be removed. 56 00:02:21,915 --> 00:02:24,765 In fact, by the time you watch this video, 57 00:02:24,765 --> 00:02:27,852 maybe this step won't be necessary any more. 58 00:02:27,852 --> 00:02:30,513 Anyway, we still need to get React 59 00:02:30,513 --> 00:02:32,940 to render this "html" variable, 60 00:02:33,018 --> 00:02:35,843 without escaping all the angle brackets. 61 00:02:35,843 --> 00:02:38,716 Let's use an "article" element instead, 62 00:02:38,716 --> 00:02:41,067 since the Markdown content can 63 00:02:41,067 --> 00:02:43,261 contain multiple paragraphs. 64 00:02:43,339 --> 00:02:46,818 Now, to render a value directly as HTML, 65 00:02:46,818 --> 00:02:48,558 without escaping it, 66 00:02:48,645 --> 00:02:53,741 in React we need to use the "dangerouslySetInnerHTML" 67 00:02:53,741 --> 00:02:54,222 prop. 68 00:02:54,318 --> 00:02:57,191 And this must be an object with 69 00:02:57,191 --> 00:02:59,693 a property called "__html", 70 00:02:59,785 --> 00:03:03,012 where we can finally pass the "html" value. 71 00:03:03,012 --> 00:03:06,106 React makes this deliberately complicated, 72 00:03:06,106 --> 00:03:09,025 because they want you to think carefully 73 00:03:09,025 --> 00:03:11,361 before displaying HTML directly. 74 00:03:11,434 --> 00:03:13,557 It can be dangerous to do that, 75 00:03:13,557 --> 00:03:15,611 from a security point of view. 76 00:03:15,679 --> 00:03:18,719 If you directly display some HTML code 77 00:03:18,719 --> 00:03:21,198 that was entered by your users, 78 00:03:21,278 --> 00:03:23,880 that could be exploited for example 79 00:03:23,880 --> 00:03:25,962 by inserting "script" tags 80 00:03:26,036 --> 00:03:28,907 that can then run arbitrary JavaScript 81 00:03:28,907 --> 00:03:30,493 code on your website. 82 00:03:30,569 --> 00:03:32,891 That's why in general it's better 83 00:03:32,891 --> 00:03:34,299 to avoid doing this. 84 00:03:34,369 --> 00:03:36,747 But in our case we know that 85 00:03:36,747 --> 00:03:38,701 the "html" was rendered 86 00:03:38,785 --> 00:03:42,357 from a Markdown file that we wrote ourselves, 87 00:03:42,357 --> 00:03:43,706 not by our users. 88 00:03:43,785 --> 00:03:46,038 So there isn't any risk that it 89 00:03:46,038 --> 00:03:48,073 will contain malicious code. 90 00:03:48,146 --> 00:03:50,994 Anyway, let's finally save this change, 91 00:03:50,994 --> 00:03:53,272 and you can see that the "html" 92 00:03:53,272 --> 00:03:55,109 is now rendered properly, 93 00:03:55,183 --> 00:03:57,436 without displaying all the tags. 94 00:03:57,436 --> 00:04:00,736 Now, it's still not fully styled though. 95 00:04:00,736 --> 00:04:03,500 The "bold" and "italic" text is fine, 96 00:04:03,500 --> 00:04:05,595 but the headings and the list 97 00:04:05,595 --> 00:04:07,473 don't have any formatting. 98 00:04:07,545 --> 00:04:11,318 That's because of the way Tailwind CSS works: 99 00:04:11,318 --> 00:04:13,680 as we've seen, by default it 100 00:04:13,680 --> 00:04:15,958 resets most browser styles. 101 00:04:16,041 --> 00:04:17,951 We'll see in the next video 102 00:04:17,951 --> 00:04:19,718 how to configure Tailwind 103 00:04:19,788 --> 00:04:23,044 to apply some appropriate styles in this case. 104 00:04:23,044 --> 00:04:27,193 But we are now rendering the Markdown to HTML, 105 00:04:27,193 --> 00:04:29,299 using the Marked library. 7508

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.