NextJS: 05-10 Remark Prism

Hướng dẫn highlight code cho remark code-block với plugin của remark mang tên remark-prism.
- Remark Prism: github.com/ser...
- Choose CSS for style markdown result at prismjs.com/do...
- Line numbers: prismjs.com/pl...
- Code highlight: prismjs.com/pl...
---
#nextjs
#remark_prism
#nextjs_tutorial
---
VIDEO CHAPTERS:
Made by: Sinh Bùi Đình
Cảm ơn bạn nhiều nhé! ❤️
00:10 Introduce format code by remark-prism
00:50 Try to apply some basic from document github.com/ser...
03:50 Analyze why code not formatted & how remark-prism work.
05:45 Choose CSS for style markdown result at prismjs.com/do...
07:10 Introduce some plugin of prismjs
08:40 Import CSS global in __app.tsx
09:50 Add line number into md to check. See more at prismjs.com/pl...
12:35 Use line number format plugin supported by remark-prism & Restrictions on use
14:00 Use format by plugin by import js
16:00 highlight example, look more at: prismjs.com/pl...
17:30 Summary
---
Easy Frontend - Code xịn hơn mỗi ngày
🔥 Khoá học Javascript: course.ezfront...
🎁 Khoá học ReactJS: course.ezfront...
🎯 Fan cứng Easy Frontend: / @easyfrontend
---
💰 Ủng hộ mình làm videos thì đóng góp qua MoMo/ZaloPay: 0901 309 729 nhé
---
Kết nối với mình:
- ✅ Follow facebook: / nvhauesmn
- 🎉 Fan page: / learn.easyfrontend
- ❓ Group: / easyfrontend
- 💻 Github: github.com/pau...
- 💼 LinkedIn: / haunguyenmn

[@chiendd1908]

Hay quá anh ạ.

[@tranphai3865]

A ơi, em có thắc mắc, tại sao e để .use(remarkPrism) đằng sau .use(remarkRehype) thì nó lại ko nhận a nhỉ, em lỡ tay đặt đằng sau và mất gần nửa tiếng tìm nguyên nhân :(

[@EasyFrontend]

à sau cái remarkRehype thì lúc đó nó chuyển sang rehype òi, nên em chỉ xài đc plugin của rehype thôi nhen hehee

[@tranphai3865]

@@EasyFrontend Vâng, em cảm ơn anh

[@nguyenngocthach9187]

Anh Hậu ơi em import global css vào file _app.tsx giống hệt anh mà nó vẫn báo lỗi như này, bị từ đợt đầu clone code của anh về đến giờ :<
Global CSS cannot be imported from files other than your Custom . Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).

[@EasyFrontend]

hmm, hơi lạ ta, em thử đưa code lên codesandbox rồi share cho anh nha
em chat anh qua bên Messenger để anh support cho lẹ nhen hehe

[@winterburn3010]

trông anh tăng tốc series Nextjs này quá :D

[@EasyFrontend]

hehe anh cũng đang tìm cách gom gom để ra videos cho lẹ đây em ơi khà khà

[@winterburn3010]

@@EasyFrontend hehe em vừa dứt cái video mới, cám ơn anh

[@sinhbuiinh2248]

00:10 Introduce format code by remark-prism
00:50 Try to apply some basic from document github.com/sergioramos/remark-prism
03:50 Analyze why code not formatted & how remark-prism work.
05:45 Choose CSS for style markdown result at prismjs.com/download.html
07:10 Introduce some plugin of prismjs
08:40 Import CSS global in __app.tsx
09:50 Add line number into md to check. See more at prismjs.com/plugins/line-numbers/
12:35 Use line number format plugin supported by remark-prism & Restrictions on use
14:00 Use format by plugin by import js
16:00 highlight example, look more at: prismjs.com/plugins/line-highlight/
17:30 Summary

[@EasyFrontend]

yeah cảm ơn em nhiều nhé Sinh ơi, chuẩn bị hết videos cho em xem òi lol 🤣
chưa làm kịp videos hic

[@sinhbuiinh2248]

@@EasyFrontend để vọc thêm trong khi đợi v ạ.