Làm cách nào để vẽ hộp kiểm hoặc đánh dấu vào bảng GitHub Markdown?


188

Tôi có thể vẽ hộp kiểm trong danh sách Github README.md bằng cách sử dụng

- [] (đối với hộp kiểm không được chọn)

- [x] (đối với hộp kiểm đã chọn)

Nhưng điều này không làm việc trong bảng. Có ai biết cách triển khai hộp kiểm hoặc dấu kiểm trong bảng GitHub Markdown không?


Câu trả lời:


256

Hãy thử thêm một -trước []hoặc [x]. Đó là một -không gian trống .

Dưới đây là một ví dụ từ blog Github.

### Solar System Exploration, 1950s – 1960s

- [ ] Mercury
- [x] Venus
- [x] Earth (Orbit/Moon)
- [x] Mars
- [ ] Jupiter
- [ ] Saturn
- [ ] Uranus
- [ ] Neptune
- [ ] Comet Haley

Nó xuất hiện như dưới đây:

Hình ảnh kết quả

Đây là cách người ta có thể làm tương tự trong một bảng:

| Task           | Time required | Assigned to   | Current Status | Finished | 
|----------------|---------------|---------------|----------------|-----------|
| Calendar Cache | > 5 hours  |  | in progress | - [x] ok?
| Object Cache   | > 5 hours  |  | in progress | [x] item1<br/>[ ] item2
| Object Cache   | > 5 hours  |  | in progress | <ul><li>- [x] item1</li><li>- [ ] item2</li></ul>
| Object Cache   | > 5 hours  |  | in progress | <ul><li>[x] item1</li><li>[ ] item2</li></ul>


- [x] works
- [x] works too

Đây là vẻ ngoài của nó:

nhập mô tả hình ảnh ở đây


Có một lỗi định dạng trong câu hỏi ban đầu. Nó đang làm việc cho danh sách nhưng không phải cho bảng.
Gaurav Bishnoi

Cảm ơn, nó hoàn hảo.
Gaurav Bishnoi

5
Điều này có vẻ tốt, nhưng các hộp kiểm bị hỏng. Nếu bạn bấm vào một hộp kiểm, nó không làm gì cả. Thông thường nhấp vào hộp kiểm GitHub Markdown kiểm tra / bỏ chọn nó. Giải pháp thay thế là chỉnh sửa HTML theo cách thủ công, điều này không tốt, nhưng có thể thực hiện được.
DumpsterDoustus

Điều này tạo ra sự xuất hiện của một hộp kiểm tra. Mục này không thực sự đáp ứng với các sự kiện nhấp chuột, điều này hủy bỏ mục đích của chúng: kiểm tra từ chế độ kết xuất md, thay vì văn bản thô.
Eduardo Pignatelli

1
@DumpsterDoustus có nghĩa là điều này không hoạt động trong các vấn đề / yêu cầu hợp nhất? Như nói chung, trong khi các hộp kiểm có thể nhấp trong các vấn đề GitHub / GitLab và các yêu cầu hợp nhất vì, đối với các vị trí đó, nó có ý nghĩa như một danh sách mua sắm, ý nghĩa của việc người dùng nhấp vào hộp kiểm trong tài liệu là gì? Bạn có thực sự muốn xem markdown của bạn được chỉnh sửa?
Joël

53

Bây giờ biểu tượng cảm xúc được hỗ trợ! :white_check_mark:/ :heavy_check_mark:cho một ấn tượng tốt và được hỗ trợ rộng rãi:

Function | MySQL / MariaDB | PostgreSQL | SQLite
:------------ | :-------------| :-------------| :-------------
substr | :heavy_check_mark: |  :white_check_mark: | :heavy_check_mark:

ám chỉ (ở đây trên crom cũ 65.0.3x):

nhập mô tả hình ảnh ở đây


3
Điều này trông rất đẹp trong đầu ra được kết xuất nhưng nhược điểm là nó chiếm nhiều không gian trong "mã nguồn" và không dễ đọc ở đó. Và khả năng đọc là một trong những khái niệm chính của markdown.
Daniel

Tôi nghĩ rằng điều này có thể đã lỗi thời vì :white_check_mark:bây giờ trông giống như một hộp kiểm màu xanh lá cây với một dấu kiểm màu trắng.
Rami A.

@RamiA., Bạn sử dụng trình đọc / trình duyệt nào? Vừa mới kiểm tra nó với Chromium và Firefox (66.0.3) trên Ubuntu. Họ (vẫn) cả hai trông giống như hình ảnh trên. Nhưng không biết với Edge hoặc các phiên bản Chrome / Chromium / FF mới nhất tuyệt đối ... Tôi có cảm tưởng rằng những biểu tượng cảm xúc đó rất phổ biến trong sử dụng đến mức không chắc chúng sẽ bị loại trừ. Nhưng ai biết được :)
davidkonrad

@davidkonrad, xem stackoverflow.com/a/59674743/90287 , cụ thể là gist.github.com/rxaviers/7360908 . Tôi đang sử dụng Firefox 76.0.1 và Chrome 81.0.4044.138 trên Windows.
Rami A.

36

Tôi đã sử dụng &#9744;(☐) cho [ ]&#9745;(☑) cho [x]và nó hoạt động cho mark.js nói rằng nó tương thích với đánh dấu Github. Tôi dựa trên giải pháp của mình dựa trên câu trả lời cho câu hỏi này . Xem thêm câu trả lời thông tin này .

Cập nhật: Tôi nên đề cập rằng khi bạn làm theo cách này, bạn không cần <ul>, ví dụ:

| Unchecked | Checked |
| --------- | ------- |
| &#9744;   | &#9745; |

Điều này hoạt động quá ngoài câu trả lời được chấp nhận. Trên thực tế, tôi đã sử dụng nó thành công trên GitHub. Cảm ơn đã chỉ ra cho tất cả mọi người. Tôi nên làm điều đó sớm hơn.
Gaurav Bishnoi

1
& # 10004; cho '✔'
Mawardy

19

Bạn có thể sử dụng biểu tượng cảm xúc

Done? | Name
:---:| ---
⬜️| Nope
✅| Yep


3

Sau đây là cách tôi vẽ một hộp kiểm trong bảng!

| Checkbox Experiments | [ ] unchecked header  | [x] checked header  |
| ---------------------|:---------------------:|:-------------------:|
| checkbox             | [ ] row               | [x] row             |


Hiển thị như thế này:
nhập mô tả hình ảnh ở đây


4
Nó không làm việc cho tôi. Có phải cho Github hương vị đánh dấu?
Gaurav Bishnoi

Tôi thấy, bằng cách nào đó nó không kết xuất với Github flavoured markdown. Nhưng hoạt động tốt cho người xem trước markdown khác.
vishwarajanand

1

Đây là những gì tôi có giúp bạn và những người khác về bảng hộp kiểm đánh dấu. Thưởng thức!

| Projects | Operating Systems | Programming Languages   | CAM/CAD Programs | Microcontrollers and Processors | 
|---------------------------------- |---------------|---------------|----------------|-----------|
| <ul><li>[ ] Blog </li></ul>       | <ul><li>[ ] CentOS</li></ul>        | <ul><li>[ ] Python </li></ul> | <ul><li>[ ] AutoCAD Electrical </li></ul> | <ul><li>[ ] Arduino </li></ul> |
| <ul><li>[ ] PyGame</li></ul>   | <ul><li>[ ] Fedora </li></ul>       | <ul><li>[ ] C</li></ul> | <ul><li>[ ] 3DsMax </li></ul> |<ul><li>[ ] Raspberry Pi </li></ul> |
| <ul><li>[ ] Server Info Display</li></ul>| <ul><li>[ ] Ubuntu</li></ul> | <ul><li>[ ] C++ </li></ul> | <ul><li>[ ] Adobe AfterEffects </li></ul> |<ul><li>[ ]  </li></ul> |
| <ul><li>[ ] Twitter Subs Bot </li></ul> | <ul><li>[ ] ROS </li></ul>    | <ul><li>[ ] C# </li></ul> | <ul><li>[ ] Adobe Illustrator </li></ul> |<ul><li>[ ]  </li></ul> |

1

Chỉnh sửa tài liệu hoặc trang wiki, và sử dụng - [ ]- [x]cú pháp để cập nhật danh sách nhiệm vụ của bạn. Hơn nữa, bạn có thể tham khảo liên kết này .


Bạn có thể tạo bảng với đường ống | và dấu gạch nối - để tạo một bảng và bên trong bảng đó, bạn có thể sử dụng cú pháp - [] và - [x]. đây là cách tôi vẽ một hộp kiểm
Joseph Charles

@JosephCharles Xin vui lòng bạn có thể cung cấp mã mẫu để hiển thị cách bạn làm cho nó hoạt động trong một bảng?
Pocketsand

1
Điều này sẽ không hoạt động và không trả lời câu hỏi.
coisnepe

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.