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:

*** Github Links ***

Display Markdown with marked.js:
MarkdownDisplay Component:
Highlighting with highlight.js
Improved UI for editing Markdown

*** Find me online ***

Website coming soon!

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

Post Author: hatefull