Bài học số 9 [Preview] - Thiết lập máy chủ trực tiếp

✨ Markdown Preview + (Neo)vim ✨

Giới thiệu

• Markdown Preview là 1 trong những extension của Markdown, extension này sẽ giúp bạn vừa soạn thảo Markdown vừa xem được kết quả ngay lập tức. Việc này giúp chúng ta tiết kiệm được rất nhiều thời gian khi soạn thảo Markdown. Chúng ta có thể đọc thêm qua link sau MarkDown

• Chỉ làm việc trên (Neo)vim từ phiên bản >= 8.1 trở lên

Xem trước phần đánh dấu tên trình duyệt hiện đại của bạn với tính năng cuộn được đồng bộ hóa và cấu hình linh hoạt

Yêu cầu

• nodejs & yarn
• pandoc
• live-server

- Cài đặt nodejs và yarn 
  - Linux: apt install nodejs
  - Windows: Download [Nodejs](https://nodejs.org/dist/v18.12.1/node-v18.12.1-x64.msi)

- Cài đặt pandoc
  - Linux: apt install pandoc
  - Windows: choco install pandoc hoặc scoop install pandoc

- Cài đặt live-server
  - npm install -g @compodoc/live-server
  
- Thêm dòng dưới đây vào tập tin cài plugins cho nvim
Plug 'iamcco/markdown-preview.nvim', { 'do': 'cd app && yarn install' }
  - Nếu bạn sử dụng Vim-Plug 
    Plug 'davidgranstrom/nvim-markdown-preview'
  
- Cuối cùng Khởi động lại (Neo)Vim và chạy lệnh sau để cài đặt plugins
  - `:source %` và :PlugInstall hoặc :Sync Plugins

Đặc điểm chính

• Cross platform (macos/linux/windows)
• Synchronised scrolling
• Fast asynchronous updates
• Katex for typesetting of math
• Plantuml
• Mermaid
• Chart.js
• sequence-diagrams
• flowchart
• dot
• Toc
• Emoji
• Task lists
• Local images
• Flexible configuration

Tính năng

• Không đồng bộ
• Tạo các tệp html “độc lập” (được chèn css)
• Tùy chỉnh themes (github, solarized-dark, solarized-light)
• Tự động tải lại tab trình duyệt khi lưu
• Phục vụ nội dung từ thư mục làm việc hiện tại (nhúng hình ảnh vào phần đánh dấu của bạn, v.v.)
• Định dạng đầu vào markdown tùy chỉnh
  • pandoc markdown
• KaTeX để định dạng toán học LaTeX
• Đánh dấu cú pháp từ Kate Editor themes

Lưu ý: rằng không cần plugin mathjax-support-for-mkdp để sắp chữ toán học

Tham khảo + Cấu hình

• Chỉ có một lệnh duy nhất:

:MarkdownPreview [theme]    Starts the browser preview of the current file.
                            Optional argument to select a theme.

                            The available themes are currently:
                            * github
                            * solarized-light
                            * solarized-dark

Cách sử dụng

• Mở tệp đánh dấu trong vim và chạy :MarkdownPreview.
• Bản xem trước mở trong tab trình duyệt mới sẽ được tải lại bất cứ khi nào bạn :wirte vào bộ đệm
• Nếu bạn vô tình đóng tab trình duyệt của mình hoặc muốn thay đổi chủ đề, chỉ cần chạy lại lệnh.
• Tệp cần được ghi vào đĩa trước khi bạn có thể bắt đầu xem trước.

Thiết lập biến với `whichkey-config`

m = {
  name = "MarkDown",
  g = {":MarkdownPreview github<CR>", "Theme github"},
  d = {":MarkdownPreview solarized-dark<CR>", "Theme dark"},
  l = {":MarkdownPreview solarized-light<CR>", "Theme light"},
},