Markdown and Syntax Highlighting in VueJS, compatible with Nuxt and SSR

This tutorial shows you how to use marked.js and highlight.js in your VueJS app — even if it’s a Server-Side Rendered app like Nuxt.

Markdown is a great way to let your users customize their posts without requiring them to understand HTML. It’s great for comments and other user-generated content, or for using in your Admin section like we’re doing today.

We’ll even show you how to get a live preview going, so your users can see how their markdown text is going to be rendered!

0:00 Start
1:16 Displaying Markdown with marked.js
5:11 MarkdownDisplay Component
9:02 Syntax Highlighting with highlight.js
15:03 Live Preview in Editor
19:55 Summary and Preview

The “Building a VueJS Screencasting App From Scratch” Playlist: https://www.youtube.com/playlist?list=PLPwpWyfm6JADRf8x1Jc0Da8R71WJyt-Jn

*** Github Links ***

Display Markdown with marked.js: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/c7ed623b6500fe3f056c5079bcffc88f7305ab5d
MarkdownDisplay Component: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/8fd8b5ef73345a8d3d6880ab7427ed1eed90e521
Highlighting with highlight.js https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/a564f72a0d29441e9260623438974a96240187d6
Improved UI for editing Markdown https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/9a52be06700d1c95e57a038b3e8d036b6f75cb47

*** Find me online ***

Twitter: https://twitter.com/VueScreencasts
Website coming soon!

#Markdown #SyntaxHighlighting #VueJS #Tutorial #Marked #HighlightJS #Nuxt #SSR

Post Author: hatefull