filmov
tv
How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark
Показать описание
Hello. I'm Takuya Matsuyama from Japan, a solo developer making a Markdown note-taking app called Inkdrop.
This video is a tutorial on how to build a beautiful Markdown editor with the following stack:
- React: A library for building UI
- TypeScript: A typed JavaScript
I hope you enjoy it!
▶ Download my product: Inkdrop - Markdown note-taking app
▶ The GitHub repository of the Markdown editor tutorial
▶ My dotfiles
▶ My terminal set up
▶ My NeoVim set up
▶ My equipments
* Computer: Mac Pro
* Display: Pro Display XDR
* Keyboard: Keychron K2V2
* Video editing: Final Cut Pro X
* Camera: Fujifilm X-T4
* Slider: SliderONE v2
Follow me online here:
Credits:
0:00 Digest
0:28 Intro
1:03 Create a repository from a project boilerplate
3:02 Set up the project to use React intead of Vue
10:50 Make window transparent and vibrant
11:53 Set up CodeMirror 6
17:47 Make an editor component
22:58 Make the editor support Markdown and apply the dark theme
26:31 Set up Remark
32:45 Implement syntax highlighting for Markdown preview
38:56 Compile the app and run
39:43 Demo
#electron #reactjs #typescript
This video is a tutorial on how to build a beautiful Markdown editor with the following stack:
- React: A library for building UI
- TypeScript: A typed JavaScript
I hope you enjoy it!
▶ Download my product: Inkdrop - Markdown note-taking app
▶ The GitHub repository of the Markdown editor tutorial
▶ My dotfiles
▶ My terminal set up
▶ My NeoVim set up
▶ My equipments
* Computer: Mac Pro
* Display: Pro Display XDR
* Keyboard: Keychron K2V2
* Video editing: Final Cut Pro X
* Camera: Fujifilm X-T4
* Slider: SliderONE v2
Follow me online here:
Credits:
0:00 Digest
0:28 Intro
1:03 Create a repository from a project boilerplate
3:02 Set up the project to use React intead of Vue
10:50 Make window transparent and vibrant
11:53 Set up CodeMirror 6
17:47 Make an editor component
22:58 Make the editor support Markdown and apply the dark theme
26:31 Set up Remark
32:45 Implement syntax highlighting for Markdown preview
38:56 Compile the app and run
39:43 Demo
#electron #reactjs #typescript
1:02:28
How To Build A Markdown Blog Using Node.js, Express, And MongoDB
0:40:45
How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark
0:07:43
Fast & Minimal Blog Using POSIX Shell and Markdown
0:00:37
Here's a super easy way to build tables in markdown!
0:25:46
Build a Markdown Documentation Site with Docusaurus (Step-by-Step)
0:26:04
Build a FreeCodeCamp Markdown Previewer Project By Using ReactJs
3:14:12
Build a Markdown Notes app with Electron, React, Typescript, Tailwind and Jotai
0:15:51
My Favorite Way to Use Markdown in NextJS
0:05:16
iquity introduction - build your resume using markdown only
1:05:19
Build a Markdown Previewer - Front End Libraries Projects - Free Code Camp
0:06:33
How to Build a Markdown Editor with React
0:13:25
Build a Markdown Previewer - Front End Libraries Projects - Build a Markdown Previewer
0:22:12
Markdown Previewer (Solution) | FreeCodeCamp
0:14:33
Build a Markdown Previewer | FreeCodeCamp
0:09:28
Let’s build a Markdown parser!
0:00:26
The best kept secret in Markdown
0:06:26
How to Build a Markdown Editor Using the Angular Rich Text Editor
0:11:06
Build Markdown Preview App with React JS
0:16:51
FreeCodeCamp: Build a Markdown Previewer
0:06:59
React markdown editor
0:40:19
How to take notes in Markdown efficiently with Inkdrop
0:13:08
Discover the Power of Alpine JS | Build the @freeCodeCamp Markdown Previewer
0:00:34
Markdown (.md) Explained in 30 Seconds
0:19:16
Build A Markdown Editor Using React JS
Комментарии