จะวาดกล่องกาเครื่องหมายหรือเครื่องหมายถูกในตาราง GitHub Markdown ได้อย่างไร


189

ฉันสามารถวาดช่องทำเครื่องหมายในรายการ Github README.md โดยใช้

- [] (สำหรับช่องทำเครื่องหมายที่ไม่ได้ทำเครื่องหมาย)

- [x] (สำหรับช่องทำเครื่องหมายที่เลือก)

แต่นี่ไม่ทำงานในตาราง ไม่มีใครรู้วิธีการใช้งานช่องทำเครื่องหมายหรือเครื่องหมายถูกในตาราง GitHub Markdown?


คำตอบ:


257

ลองเพิ่ม-ก่อนหรือ[] [x]นั่นคือ-พื้นที่ว่างที่ตามมา

ด้านล่างนี้เป็นตัวอย่างจากบล็อก Github

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

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

ดูเหมือนว่าด้านล่าง:

รูปภาพผลลัพธ์

นี่เป็นวิธีที่สามารถทำได้ในตาราง:

| 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

นี่คือลักษณะ:

ป้อนคำอธิบายรูปภาพที่นี่


มีข้อผิดพลาดในการจัดรูปแบบในคำถามในตอนแรก มันใช้งานได้สำหรับรายการ แต่ไม่ใช่สำหรับตาราง
Gaurav Bishnoi

ขอบคุณมันสมบูรณ์แบบ
Gaurav Bishnoi

5
สิ่งนี้ดูดี แต่ช่องทำเครื่องหมายใช้งานไม่ได้ หากคุณคลิกช่องทำเครื่องหมายจะไม่ทำอะไรเลย การคลิกทั่วไปที่ช่องทำเครื่องหมาย GitHub จะเป็นการตรวจสอบ / ยกเลิกการเลือก วิธีแก้ไขคือแก้ไข HTML ด้วยตนเองซึ่งไม่ดี แต่ทำได้
DumpsterDoofus

สิ่งนี้จะสร้างลักษณะที่ปรากฏของช่องทำเครื่องหมาย รายการไม่ตอบสนองต่อเหตุการณ์คลิกซึ่งยกเลิกวัตถุประสงค์ของพวกเขา: ตรวจสอบจากโหมดการแสดงผล md แทนที่จะเป็นข้อความดิบ
Eduardo Pignatelli

1
@DumpsterDoofus หมายความว่าไม่ได้ทำงานในปัญหา / การร้องขอรวม? โดยทั่วไปในขณะที่ช่องทำเครื่องหมายสามารถคลิกได้ใน GitHub / GitLab ทำให้เกิดปัญหาและรวมคำขอเป็นสถานที่ดังกล่าว แต่ก็มีความหมายเหมือนกับการจัดเรียงรายการซื้อของ แต่ผู้ใช้คลิกที่ช่องทำเครื่องหมายในเอกสารอะไรบ้าง คุณต้องการที่จะเห็นการแก้ไข markdown ของคุณหรือไม่?
Joël

53

ตอนนี้อิโมจิได้รับการสนับสนุน! :white_check_mark:/ :heavy_check_mark:ให้ความประทับใจที่ดีและได้รับการสนับสนุนอย่างกว้างขวาง:

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

แสดงไปที่ (ที่นี่บนโครเมียมรุ่นเก่า 65.0.3x):

ป้อนคำอธิบายรูปภาพที่นี่


3
สิ่งนี้ดูดีมากในเอาต์พุตที่เรนเดอร์ แต่ข้อเสียคือต้องใช้พื้นที่จำนวนมากใน "ซอร์สโค้ด" และไม่สามารถอ่านได้ที่นั่น และความสามารถในการอ่านเป็นหนึ่งในแนวคิดหลักของ markdown
Daniel

ฉันคิดว่านี่อาจจะล้าสมัยเพราะ:white_check_mark:ตอนนี้ดูเหมือนว่ากล่องกาเครื่องหมายสีเขียวที่มีเครื่องหมายถูกสีขาว
Rami A.

@RamiA. คุณใช้ reader / browser ใด? เพิ่งตรวจสอบกับ Chromium และ Firefox (66.0.3) บน Ubuntu พวกเขา (ยัง) ทั้งคู่ดูเหมือนภาพด้านบน แต่ไม่รู้ด้วย Edge หรือ Chrome / Chromium / FF รุ่นล่าสุดหรือที่แน่นอน ... ฉันมีความรู้สึกว่าอิโมจิเหล่านั้นใช้งานทั่วไปจนไม่น่าจะถูกกำจัดออกไป แต่ใครจะรู้ :)
davidkonrad

@davidkonrad ดูstackoverflow.com/a/59674743/90287เฉพาะgist.github.com/rxaviers/7360908 ฉันใช้ Firefox 76.0.1 และ Chrome 81.0.4044.138 บน Windows
Rami A.

36

ฉันใช้&#9744;(☐) สำหรับ[ ]และ&#9745;(☑) สำหรับ[x]และมันใช้งานได้กับMark.jsซึ่งบอกว่ามันเข้ากันได้กับ Github markdown ฉันใช้วิธีแก้ปัญหาสำหรับคำตอบสำหรับคำถามนี้ ดูคำตอบที่ให้ข้อมูลนี้

ปรับปรุง: ฉันควรได้กล่าวว่าเมื่อคุณทำเช่นนี้คุณไม่จำเป็นต้อง<ul>เช่น:

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

วิธีนี้ใช้ได้ดีกว่าคำตอบที่ยอมรับ ที่จริงแล้วฉันใช้มันเรียบร้อยแล้วกับ GitHub ขอบคุณสำหรับการชี้ให้ทุกคน ฉันควรทำอย่างนั้นก่อนหน้านี้
Gaurav Bishnoi

1
& # 10004; สำหรับ '✔'
Mawardy


9

มีEmojiคำแนะนำไอคอนที่ดีมากๆ

คุณสามารถตรวจสอบพวกเขาออก ฉันหวังว่าคุณจะพบไอคอนที่เหมาะสมสำหรับการเขียนของคุณ

Nice Emojis

ที่ดีที่สุด


3

ต่อไปนี้เป็นวิธีที่ฉันวาดช่องทำเครื่องหมายในตาราง!

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


แสดงเช่นนี้:
ป้อนคำอธิบายรูปภาพที่นี่


4
มันไม่ทำงานสำหรับฉัน มันเป็นของ Github หรือไม่?
Gaurav Bishnoi

Github flavoured markdownผมเห็นอย่างใดก็ไม่สามารถแสดงได้ด้วย แต่ใช้งานได้ดีสำหรับผู้ดูตัวอย่าง markdown คนอื่น ๆ
vishwarajanand

1

นี่คือสิ่งที่ฉันมีที่ช่วยให้คุณและคนอื่น ๆ เกี่ยวกับตารางทำเครื่องหมายเลือก สนุก!

| 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

แก้ไขเอกสารหรือหน้าวิกิและใช้- [ ]และ- [x]ไวยากรณ์เพื่ออัพเดตรายการงานของคุณ นอกจากนี้คุณสามารถอ้างถึงลิงค์นี้


คุณสามารถสร้างตารางด้วยไพพ์ | และยัติภังค์ - เพื่อสร้างตารางและภายในตารางนั้นคุณสามารถใช้ไวยากรณ์ - [] และ - [x] นี่คือวิธีที่ฉันวาดช่องทำเครื่องหมาย
โจเซฟชาร์ลส์

@JosephCharles โปรดให้รหัสตัวอย่างเพื่อแสดงว่าคุณใช้งานตารางได้อย่างไร
Pocketsand

1
สิ่งนี้จะไม่ทำงานและไม่ตอบคำถาม
coisnepe

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.