Markdown là ngôn ngữ đánh dấu nhẹ, dễ viết và dễ đọc, thường được chuyển đổi thành HTML để hiển thị trên web. Khi kết hợp với CSS, người dùng có thể kiểm soát hoàn toàn giao diện — từ phông chữ, màu sắc đến bố cục linh hoạt — giúp tài liệu trở nên chuyên nghiệp và bắt mắt hơn.

Cú pháp cơ bản và quy trình chuyển đổi Markdown

Markdown ra đời năm 2004 bởi John Gruber và Aaron Swartz, nhanh chóng trở thành công cụ phổ biến trong giới kỹ thuật và sáng tạo nội dung. Cú pháp đơn giản nhưng mạnh mẽ:

• Tiêu đề: Dùng ký hiệu # (từ 1 đến 6 cấp)
• In đậm / nghiêng: Bao quanh văn bản bằng ** hoặc *
• Danh sách: Dùng -, +, hoặc * cho danh sách không thứ tự
• Khối mã nguồn: Bọc trong ``` hoặc thụt lề 4 khoảng trắng
• Bảng: Dùng | và - để phân tách cột và hàng

Các công cụ như Pandoc, GitHub, hoặc VS Code hỗ trợ chuyển Markdown sang HTML, PDF, ePub… thông qua bộ parser tích hợp.

Kết hợp CSS để nâng cao trải nghiệm trực quan

Sau khi Markdown được chuyển thành HTML, CSS sẽ định hình lại toàn bộ giao diện. Ví dụ: thẻ <h1> sinh ra từ # Tiêu đề có thể được tùy chỉnh màu, kích thước, khoảng cách… mà không cần thay đổi nội dung Markdown gốc.

/* Định nghĩa biến toàn cục */
:root {
  --main-color: #2c3e50;
  --accent-color: #3498db;
  --font-base: 'Segoe UI', sans-serif;
}

/* Tùy chỉnh tiêu đề */
h1 {
  color: var(--main-color);
  font-family: var(--font-base);
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 0.5rem;
}

/* Làm nổi bật khối mã */
pre {
  background: #f0f0f0;
  border-left: 4px solid var(--accent-color);
  padding: 1rem;
  overflow-x: auto;
  border-radius: 0 4px 4px 0;
}

Xây dựng theme tùy chỉnh với SASS/SCSS

Sử dụng bộ tiền xử lý CSS giúp quản lý theme dễ dàng hơn nhờ biến, mixin và cấu trúc phân cấp.

// _variables.scss
$theme-primary: #e74c3c;
$theme-bg: #fdfdfd;
$spacing-unit: 1.2rem;

// _mixins.scss
@mixin rounded-box($radius: 8px) {
  border-radius: $radius;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

// style.scss
@import 'variables';
@import 'mixins';

body {
  background: $theme-bg;
  line-height: 1.6;
  margin: $spacing-unit;
}

blockquote {
  @include rounded-box();
  background: lighten($theme-primary, 50%);
  padding: $spacing-unit;
  border-left: none;
}

Thiết kế responsive cho mọi thiết bị

Media query giúp điều chỉnh layout theo kích thước màn hình. Kết hợp với framework như Bootstrap hoặc Tailwind CSS để tăng tốc độ phát triển.

.content-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

@media (max-width: 768px) {
  .content-wrapper {
    padding: 0.5rem;
    font-size: 0.95em;
  }
  
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
}

Triển khai theme lên GitHub Pages

GitHub Pages cho phép bạn host trang tĩnh miễn phí từ repository. Các bước cơ bản:

1. Tạo file index.md và thư mục assets/css/
2. Thêm liên kết CSS vào phần YAML front matter:

---
layout: default
css: /assets/css/custom.css
---

3. Push code lên branch main hoặc gh-pages
4. Vào Settings → Pages → Chọn branch và thư mục nguồn
5. Site sẽ tự động build và deploy trong vài phút

Bạn cũng có thể sử dụng GitHub Actions để tự động hóa quá trình build và deploy mỗi khi có commit mới.