Một ứng dụng web hiện đại với Material Design để viết, chỉnh sửa và xuất markdown với giao diện premium và tính năng mạnh mẽ. Trình soạn thảo tập trung vào trải nghiệm người dùng, thẩm mỹ và sự đồng nhất về thiết kế.
- Apple Aesthetics: Tích hợp Twemoji với bộ asset Apple (img-apple-64) cho tất cả emoji trên toàn hệ thống.
- Perfect Alignment: Emoji được căn chỉnh chính xác với văn bản (vertical-align: -0.2em), mang lại cảm giác premium và đồng nhất.
- Universal Support: Hiển thị emoji kiểu Apple mượt mà trên mọi trình duyệt và thiết bị qua CDN.
- Clean Aesthetic: Inline code với padding
3px 6pxvà bo góc5pxchuẩn phong cách macOS. - Hairline Borders: Loại bỏ background xám đặc truyền thống, thay bằng viền hairline (
1px solid rgba(128, 128, 128, 0.25)) tinh tế. - Focused Writing: Cải thiện độ tương phản và spacing, giúp các đoạn code trong văn bản dễ đọc hơn.
- Default Dark Mode: Chế độ tối (Dark Mode) trở thành mặc định, bảo vệ mắt và tăng sự tập trung.
- New Gray Theme: Bổ sung theme Gray trung tính, chuyên nghiệp cho môi trường văn phòng.
- Harmonized Icons: Toàn bộ icon (Nature 🍃, Sakura 🌸, Evening 🌆, Gray 🌫️, Dark 🌙) thay đổi linh hoạt theo từng theme.
- Custom Copyright: Tùy chỉnh tên tác giả và vị trí hiển thị (Top/Bottom/Both) trong file xuất.
- Reading Formats: Hỗ trợ hai chế độ xuất: Scroll (cuộn truyền thống) và Book (chia trang bằng
---). - Full Compatibility: File HTML xuất ra chứa đầy đủ CSS, highlight.js và Apple-style emojis.
- Dual Modes: Hỗ trợ hai giao diện Material Design (Hiện đại) và Classic (Tối giản).
- Live Preview: Xem trước markdown thời gian thực với độ trễ cực thấp.
- Syntax Highlighting: Sử dụng Highlight.js để tô màu code với hàng trăm ngôn ngữ.
- Render Modes: Chuyển đổi giữa Custom Render (Premium Material) và Basic Render (Standard).
- Auto-save: Tự động lưu nội dung vào localStorage để tránh mất dữ liệu.
- Keyboard Shortcuts: Hệ thống phím tắt mạnh mẽ cho năng suất làm việc cao.
| Phím Tắt | Chức Năng |
|---|---|
Ctrl + S |
Lưu tài liệu (.md) |
Ctrl + E |
Mở bảng cấu hình Export HTML |
Ctrl + R |
Chuyển đổi Render Mode (Custom/Basic) |
Ctrl + B |
In đậm văn bản |
Ctrl + I |
In nghiêng văn bản |
Ctrl + K |
Chèn link |
Ctrl + / |
Chèn code block |
- Node.js: v14 trở lên
- npm hoặc yarn
- Clone dự án
git clone https://github.com/anhdeface/mdeditor.git
cd mdeditor- Cài đặt dependencies
npm install- Chạy server
node server.js- Truy cập ứng dụng
- Material View:
http://localhost:3000 - Classic View:
http://localhost:3000/classic
| Công Nghệ | Phiên Bản | Mục Đích |
|---|---|---|
| Express | 5.2.1 | Framework web server mạnh mẽ |
| Marked | 17.0.1 | Engine chuyển đổi Markdown → HTML |
| Highlight.js | 11.11.1 | Syntax highlighting chuyên nghiệp |
| EJS | 3.1.10 | Template engine linh hoạt |
| Twemoji | 14.0.2 | Render Apple-style emojis |
| Remix Icon | 3.5.0 | Hệ thống icon modern & clean |
mdeditor/
├── server.js # Express Server & Markdown API
├── package.json # Dependencies & Meta-data
├── public/ # Tài nguyên tĩnh (Client-side)
│ ├── css/ # Material & Classic Styles
│ └── js/ # Logic Editor & Theme System
├── views/ # EJS Templates
│ ├── material.ejs # Giao diện Material Pro
│ ├── index.ejs # Giao diện Classic
│ └── docs.ejs # Trang tài liệu HDSD
└── README.md # Documentation
Julian Kmut (QuocAnh)
- GitHub: github.com/anhdeface
- Telegram: @udp0xxbot
Dự án được phát hành dưới giấy phép MIT. Bạn hoàn toàn có thể sử dụng, sửa đổi và phân phối.
Cập nhật lần cuối: 2026-02-01
Trạng thái: Production Ready 🚀
Tag: #Markdown #MaterialDesign #NodeJS #WebViewer