Markdown-Luyện-Tập

Nhập môn Markdown thật đơn giản, vui vẻ, và có thể thực hành ngay.

Phần hướng dẫn mình viết còn bài tập được thiết kế bởi AI, nên các bạn đỡ tốn công hỏi nó ha.

Nhìn lại văn bản

Trong các bộ phần mềm văn phòng (office suite) như Microsoft Office, Google Suite, Libre Office, luôn có sẵn công cụ soạn thảo như Word, Docs, Writer. So sánh với markdown, bạn cần biết.

Câu văn và Đoạn văn

Trong office, một câu văn dài quá, nó tự động xuống dòng, markdown cũng vậy. Một câu văn chưa đủ dài, nhưng bạn muốn xuống dòng (chưa qua đoạn mới), thì trong office, bạn bấm Shift + Enter; còn trong markdown, bạn chỉ cần enter.

Trong office, hai đoạn văn phân tách nhau bởi một lần Enter; còn trong markdown, bạn cần enter hai lần mới tách được đoạn văn. Cũng với đoạn văn, trong office, nếu bạn muốn hai đoạn văn tách nhau xa xa cho dễ đọc, bạn sẽ format paragraph, chỉnh Before và After vân vân, rất nhiều hiệu chỉnh; còn trong markdown thì nó đã dễ đọc sẵn rồi.

Thực tế thì trong office, bạn có thể enter hai hay nhiều lần để các đoạn văn xa nhau ra, nhưng với office mà enter nhiều lần để tách đoạn thì bạn quá lúa và vi phạm nguyên tắc soạn thảo, dẫn tới nhiều hậu quả format về sau. Thử hỏi AI

✨ Hậu quả gì nếu trong office, tôi enter nhiều lần để hai đoạn văn tách xa nhau? Cách làm nào mới đúng

Biểu tượng cảm xúc (emoji)

Trong office, bạn phụ thuộc vào font chữ để có emoji, nhiều bạn chọn Insert symbol để chèn các biểu tượng. Khi dùng markdown, bạn hãy học cách gõ emoji trực tiếp luôn. Hãy hỏi AI câu sau

✨ Tôi đang dùng hệ điều hành Windows, làm sao có thể gõ emoji cho nhanh mà không cần dùng chuột?

Việc còn lại là hoàn thiện kỹ năng của bạn bằng cách ... học thêm từ vựng tiếng Anh, hoặc thử gõ tiếng Việt xem máy hiểu ý bạn không? Có máy hiểu, máy không, bạn tự khám phá máy tính của mình nhé, vì sao thế nhé

Một số biểu tượng bạn nên tập gõ như one, two, three, heart, new, thumb up, star, push pin, circle . Rảnh thì vọc thêm trên emojipedia.org, giờ thì quay lại học thôi. Mở 2 màn hình và bắt đầu luyện tập

Tiêu đề, đánh số, đậm, nghiêng

Trong office, bạn thường làm đậm, làm nghiêng, đánh số La Mã, đánh số phân cấp, chữ to, chữ nhỏ cho tiêu đề để làm chúng nổi bật hơn, và còn tiêu đề lớn tiêu để nhỏ phải làm khác nhau. Bắt đầu bạn thường làm thủ công; sau đó cao cấp hơn, bạn biết dùng style với heading 1, heading 2 vân vân, và để phức tạp hơn, bạn có bắt đầu có thể format màu sắc, gạch chân, icon cho từng cấp tiêu đề, và cuối cùng dùng theme để chúng đồng bộ. Nếu từng học lập trình với HTML, bạn biết đến các thẻ <h1>, <h2>, <h3> ... và CSS đi kèm để đạt mục tiêu tương tự.

Trong markdown, hãy tạm quên những kiểu định dạng chuyên sâu, chỉ giữ lại cấu trúc định dạng thôi: cấp tiêu đề. Phần màu sắc, to nhỏ, đậm nghiêng để công cụ khác lo au và xử lý chuyên nghiệp hơn sau đó. Hãy tập trung vào cốt lõi: nội dung và cấu trúc của nội dung.

🚀 Tới Markdown

Bạn hoàn toàn có thể trãi nghiệm ngay markdown bằng cách tạo một file Thử-markdown.md và bắt đầu gõ vào nó ngay trong vscode. Vừa làm, mình vừa giới thiệu các extension giúp tăng tốc quá trình soạn markdown và xuất markdown ra những dạng khác như đã giới thiệu. Với mỗi extension, bạn hãy đọc hướng dẫn sử dụng và làm theo yêu cầu của bài tập, tra hướng dẫn sử dụng ở đây Những Vscode Extension Khuyên Dùng.

⏱️ 1. Tiêu đề (Heading)

Chỉ cần thêm dấu # ở đầu dòng. Xuống cấp tiêu đề, không cần thụt đầu dòng. Bắt đầu gõ nha, gõ y hệt, đừng copy, mà hãy gõ. Một màn hình xem tài liệu (và AI), màn hình còn lại và vscode, giảm việc nhảy qua lại giữa các màn hình, hãy gõ vào file Thử-markdown.md vừa tạo

# Tiêu đề 1

Nội dung chung chung, tổng quát

## Tiêu đề 2

Những nội dung, công thức cụ chính, tập trung vào một chủ để trong tiêu đề 2, tình hình giao thông chẳng hạn.

### Tiêu đề 3

Ví dụ cụ thể, hay một câu chuyện (trong nhiều câu chuyện) cụ thể hơn về tình hình giao thông, kẹt xe ở phường mình.

### Tiêu đề 3

Thêm một ví dụ cho chủ đề trong tiêu đề 2, một hiện trạng kẹt xe ở một phường khác.

## Tiêu đề 2 khác

Thêm một nội dung chính khác nữa, lần này là về cách phòng tránh sự cố giao thông

### Tiêu đề 3, của tiêu đề 2 khác

Thôi cũng hiểu rồi, để viết sau.

🤫 Tưởng tượng # như size chữ lớn nhỏ. Càng nhiều #, chữ càng nhỏ. Nhưng hãy tập trung, 😌 nội dung và cấu trúc quan trọng hơn định dạng. Hãy hỏi AI câu sau

✨ Tôi đang soạn thảo, viết bài; với tiêu đề, bao nhiêu cấp tiêu đề là quá sâu? thực tế? nguyên nhân? nguyên tắc?

🦾 Nâng cấp, hãy xem bạn đã cài đặt (nếu chưa thì cài đặt) extension sau

• Markmap (gera2ld.markmap-vscode), và xem cách dùng, dùng ngay.

⏱️ 2. Đậm và Nghiêng

Cách làm đậm nghiêng như sau.

    •   **đậm** → đậm
    •   *nghiêng* → nghiêng
    •   ***vừa đậm vừa nghiêng*** → vừa đậm vừa nghiêng

Trong đoạn trên, bạn hãy làm nghiêng từ giao thông và làm đậm từ kẹt xe, và phường mình xem.

👉 Chỉ vài dấu _ , khỏi mất công tìm nút B hay I trên thanh định dạng. Với vscode, phím tắt đậm, nghiêng vẫn hoạt động (giúp thêm các dấu _ vào từ cần đậm, nghiên). Bạn có biết vì sao đậm thì hai sao * còn nghiêng* thì một * không? Hãy hỏi AI

✨ Tôi đang soạn thảo, viết bài; ý nghĩa trong khác nhau giữa in đậm và in nghiêng? mục đích và tình huống sử dụng?

🦾 Nâng cấp, hãy xem bạn đã cài đặt (nếu chưa thì cài đặt) extension sau:

• Prettier - Code formatter (esbenp.prettier-vscode)
• Markdown All in One (yzhang.markdown-all-in-one)

Sau khi có những extension trên, bạn có thể soạn markdown bằng phím tắt, và có thể tạm quên đi một số nguyên tắc viết markdown, để cho máy tự điều chỉnh về sau. Nếu tò mò các nguyên tắc thì 59 nguyên tắc nó đây Markdown Lint Rules. Đừng lo, vscode và Pretrier - Code formatter sẽ giúp bạn phát hiện (tô vàng gợn sóng), và tự động sửa hết lỗi cho bạn; biết cách xài formatter trong vscode rồi chứ.
⸻

⏱️ 3. Danh sách

Cách làm danh sách, dùng gạch đầu dòng và 1 dấu cách, lại gõ nha

Danh sách:

Sau đâu là danh sách các xe

- Xe máy 🏍️
- Xe tải 🚛
- Xe khách 🚍

Danh sách đánh số:

Thứ tự các bước

1. Bước một
2. Bước hai
3. Bước ba

Hãy hỏi AI câu sau để xem mình có dùng tùy tiện hay không nha.

✨ Tôi đang soạn thảo, viết bài; ý nghĩa trong khác nhau giữa danh sách đồng cấp và danh sách đánh số? mục đích và tình huống sử dụng?

Trong markdown, trong danh sách đánh số bạn có thể đánh số lung tung 1, 3, 2, 5, 9, 8 nhưng khi hiển thị, các số sẽ đánh đúng thứ tự tăng dần. Formmater sẽ bắt lỗi bạn và khi sửa hàng loạt lỗi này cũng được tự sửa luôn.

Bạn có thể thử vọc để tự khám phá những tình huống sử dụng sau

• Danh sách thường lồng trong danh sách số (Đang đánh số, thì xuống dòng thụt vào trong, gạch đầu dòng)
• Danh sách số lồng trong danh sách thường (Đang gạch đầu dòng thì xuống dòng, thụt vào đánh số)
• Thêm 2 cấp nữa. Thử đi, nhưng nhớ, nhiều hơn 3 là nhiều rồi đó!

⏱️ 4. Trích dẫn (Quote)

Chỉ cần > ở đầu dòng như bên dưới, gõ nha.

> Sống tối giản để thấy cuộc đời rộng lớn hơn. - Vô danh

Hãy hỏi AI để hiểu thêm về cách trích dẫn.

✨ Tôi đang soạn thảo, viết bài; khi quote, cách ghi tên tác giả nguồn trích dẫn khi trích dẫn như thế nào là chuẩn?

⏱️ 5. Đoạn code

Đây là tính năng mạnh mẽ và hữu dụng nhất của markdown. Từ đây, rất nhiếu thứ hay ho sẽ diễn ra. Cơ bản trước đã.

Trong markdown, khi trích dẫn code, bạn không cần phải tô màu xanh đỏ để làm nổi bật kiểu code, bạn chỉ cần ghi thêm tên ngôn ngữ lập trình vào code block.

Code block là một đoạn văn được bắt đầu với với 3 dấu ` (backtick) ``` trên một dòng độc lập, và kết thúc cũng với 3 dấu backtick; ở giữa là code. bạn có thể thử thay đổi tên của ngôn ngữ, bạn sẽ thấy kiểu tô màu thay đổi

    ```python

    print("Xin chào Markdown")

    ```

Code block là một trong hai cách trích dẫn code. Code block dành cho đoạn code dài. Còn với đoạn code ngắn (ví dụ tên file, tên biến), bạn dùng inline code.

Inline code và cụm từ được đánh đấu đầu, cuối cũng bằng dấu ` backtick, nhưng chỉ một dấu.

Hãy hỏi AI, câu sau

✨ Đậm, nghiêng, inline code quote dùng thế nào cho đúng?

⏱️ 6. Link & Hình ảnh & Bảng

Đến đây, bạn hãy hỏi AI câu sau:

✨ Tôi đang học markdown, làm sao để chèn link, chèn hình ảnh, chèn bảng vào markdown?

💡 Với hình ảnh, bạn hãy thay đổi tư duy một chút.

• Một hình ảnh hơn ngàn lời nói; vậy hãy chăm chút hình ảnh trước khi chèn; thay vì chèn rồi chỉnh.
• Hình ảnh xứng đáng hiển thị trong bề ngang của cả trang. Markdown không hỗ trợ hai hình, ba hình trên một hàng. Nếu bạn cần hiển thị 2 hình trên một hàng, hãy ghép 2 hình ấy lại thành một hình trước đã.

🧩 Với bảng, nếu bảng dài hơn 10 dòng, thì bạn nên dùng CSV file với plugin Rainbow CSV (mechatroner.rainbow-csv). Mình lười quá nên cái bảng hướng dẫn dùng plugin mình để dạng bảng markdown thấy gớm 🥴

Cuối cùng, còn nhiều cú pháp markdown, bạn có thể hỏi AI hoặc tham khảo đầy đủ ở đây Markdown Cheat Sheet

Xuất ra HTML, Xuất ra PDF ngay từ Vscode

Hãy kích hoạt Command Pallet và gõ Markdown pdf, bạn sẽ thấy các lựa chọn. Các lựa chọn này đến từ các plugin bạn đã cài (hoặc chưa cài thì cài rùi thử lại)

• yzane.markdown-pdf, Markdown PDF: Xuất file Markdown sang định dạng PDF, HTML, hoặc PNG.
• yzhang.markdown-all-in-one, Markdown All in One: Cung cấp các phím tắt, tự động hoàn thành, xem trước và nhiều tính năng khác cho Markdown.

---

🦾 Từ Markdown, đến sơ đồ tư duy (mindmap), sơ đồ chuyên môn (diagram) và bảng thuyết trình (slide)

Mindmap

Có 2 cách tạo ra mindmap từ markddown. Hãy đọc cách sử dụng khi cài các extension.

• Dùng Markmap với extension gera2ld.markmap-vscode
• Dùng Mindmap trong Mermaid với extension mermaidchart.vscode-mermaid-chart

Markmap thì nhanh, gọn; có markdown rồi, có ngay mindmap, và có tương tác. Ưu tiên sử dụng cái này ha.

Mermain Markdown thì chuyên sâu cố định và nhiều format.

Bảng thuyết trình

Một file markdown biến thành một bài thuyết trình, bạn cần chỉ cho extension marp-team.marp-vscode biết 2 thứ

• file markdown đang dùng là một bảng thuyết trình, bằng cách, tại dòng đầu tiên của file thêm vào

    ---
    marp: true
    ---

• chỗ cắt giữa các slie, bằng cách chèn vào các đường chân trời (horizoal line) ---.

Bạn có thể tùy chỉnh thêm chủ đề màu sắc hay hình nến, vân vân. Nhưng nhớ, màu mè ít thì ở đây, cần nhiều màu mè hơn thì quay về office. Xem thêm về Marp ở đây nè Marp thế thôi.

hãy nhờ AI (con nào cũng được)

✨ Hãy tạo một bài thuyết trình 15 slide về những tác hại của sự mất tập trung, xuất ra định dạng markdown marp

Sơ đồ chuyên môn

Dùng Mermaid với extension mermaidchart.vscode-mermaid-chart

Tạo một code block với ngôn ngữ mermaid. Sau đó bắt đầu luyện tập Mermaid, cơ bản với Flowchart: https://mermaid.js.org/syntax/flowchart.html

Rồi nhiều quá phải không. Đừng lo lắng, thời đại AI rùi, và vẽ sơ đồ chuyên môn cũng dùng AI luôn và có hình, có mã markdown luôn. Thử ở đây AI với Mermaidchart: https://www.mermaidchart.com/app/

Và chiêu cuối, hãy hỏi AI (con nào cũng được)

✨ Hãy tạo một sơ đồ flowchart những việc cần làm trong buổi sáng, xuất ra định dạng markdown mermaid flowchart

😲

Còn nữa, chuyển nhiều loại tập tin thành markdown 🤯

Hãy học bài Dùng Python (kỹ-năng/Dùng-Python.md) để làm được việc chuyển nhiều loại tập tin thành markdown

😈