Bagaimana cara menggambar kotak centang atau tanda centang di tabel Penurunan GitHub?


190

Saya dapat menggambar kotak centang di daftar Github README.md menggunakan

- [] (untuk kotak centang tidak dicentang)

- [x] (untuk kotak centang dicentang)

Tapi ini tidak berfungsi dalam tabel. Adakah yang tahu cara menerapkan kotak centang atau tanda centang di tabel Penurunan GitHub?


Jawaban:


258

Coba tambahkan -sebelum []atau [x]. Itu -diikuti oleh ruang kosong .

Di bawah ini adalah contoh dari blog Github.

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

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

Tampak seperti di bawah ini:

Gambar yang dihasilkan

Inilah cara orang dapat melakukan hal yang sama dalam sebuah tabel:

| 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

Begini tampilannya:

masukkan deskripsi gambar di sini


Awalnya ada kesalahan format pada pertanyaan. Ini berfungsi untuk daftar tetapi tidak untuk tabel.
Gaurav Bishnoi

Terima kasih, ini sempurna.
Gaurav Bishnoi

5
Ini terlihat bagus, tetapi kotak centangnya rusak. Jika Anda mengklik kotak centang, itu tidak melakukan apa-apa. Biasanya mengklik kotak centang GitHub Markdown mencentang / menghapus centangnya. Solusinya adalah mengedit HTML secara manual, yang tidak bagus, tetapi bisa dilakukan.
DumpsterDoofus

Ini hanya menciptakan tampilan kotak centang. Butir tersebut sebenarnya tidak menanggapi peristiwa klik, yang membatalkan tujuannya: memeriksa dari mode yang diberikan, bukan teks mentah.
Eduardo Pignatelli

1
@DumpsterDoofus maksud Anda ini tidak berfungsi dalam masalah / menggabungkan permintaan? Seperti secara umum, sementara kotak centang dapat diklik dalam masalah GitHub / GitLab dan menggabungkan permintaan seperti, untuk lokasi seperti itu, masuk akal sebagai semacam daftar belanja, apa artinya pengguna mengklik kotak centang dalam dokumentasi? Apakah Anda benar-benar ingin melihat penurunan harga Anda diedit?
Joël

53

Sekarang emoji didukung! :white_check_mark:Saya :heavy_check_mark:memberikan kesan yang baik dan didukung secara luas:

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

merender ke (di sini pada chromium 65.0.3x yang lebih lama):

masukkan deskripsi gambar di sini


3
Ini terlihat sangat bagus dalam output yang diberikan tetapi downside adalah bahwa dibutuhkan banyak ruang dalam "kode sumber" dan tidak terlalu mudah dibaca di sana. Dan keterbacaan adalah salah satu konsep utama penurunan harga.
Daniel

Saya pikir ini mungkin ketinggalan zaman karena :white_check_mark:sekarang terlihat seperti kotak centang hijau dengan tanda centang putih.
Rami A.

@RamiA., Pembaca / browser apa yang Anda gunakan? Baru saja memeriksanya dengan Chromium dan Firefox (66.0.3) di Ubuntu. Keduanya (masih) terlihat seperti gambar di atas. Tapi tidak tahu dengan Edge atau versi absolut terbaru dari Chrome / Chromium / FF ... Saya mendapat kesan bahwa emoji itu sangat umum digunakan sehingga tidak mungkin mereka akan dikesampingkan. Tapi siapa yang tahu :)
davidkonrad

@davidkonrad, lihat stackoverflow.com/a/59674743/90287 , khususnya gist.github.com/rxaviers/7360908 . Saya menggunakan Firefox 76.0.1 dan Chrome 81.0.4044.138 di Windows.
Rami A.

36

Saya menggunakan &#9744;(☐) untuk [ ]dan &#9745;(☑) untuk [x]dan berfungsi untuk ditandai.js yang mengatakan itu kompatibel dengan penurunan harga Github. Saya mendasarkan solusi saya pada jawaban untuk pertanyaan ini . Lihat juga jawaban informatif ini .

Pembaruan: Saya seharusnya menyebutkan bahwa ketika Anda melakukannya dengan cara ini, Anda tidak perlu <ul>, misalnya:

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

Ini juga berfungsi selain dari jawaban yang diterima. Bahkan, saya sudah menggunakannya dengan sukses di GitHub. Terima kasih telah menunjukkannya untuk semua orang. Seharusnya saya melakukan itu sebelumnya.
Gaurav Bishnoi

1
& # 10004; untuk '✔'
Mawardy



3

Berikut ini adalah cara saya menggambar kotak centang di tabel!

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


Menampilkan seperti ini:
masukkan deskripsi gambar di sini


4
Itu tidak bekerja untuk saya. Apakah itu untuk penurunan harga rasa Github?
Gaurav Bishnoi

Begitu ya, entah bagaimana itu tidak cocok dengan Github flavoured markdown. Tetapi berfungsi dengan baik untuk pratinjau penurunan harga lainnya.
vishwarajanand

1

Inilah yang saya miliki yang membantu Anda dan orang lain tentang tabel kotak centang penurunan harga. Nikmati!

| 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

Mengedit dokumen atau halaman wiki, dan menggunakan - [ ]dan - [x]sintaks untuk memperbarui daftar tugas Anda. Selanjutnya Anda bisa merujuk ke tautan ini .


Anda dapat membuat tabel dengan pipa | dan tanda hubung - untuk membuat tabel dan bagian dalam tabel itu Anda bisa menggunakan sintaks - [] dan - [x]. beginilah cara saya menggambar kotak centang.
Joseph Charles

@JosephCharles Tolong bisakah Anda memberikan kode sampel untuk menunjukkan bagaimana Anda membuatnya bekerja dalam sebuah tabel?
Pocketsand

1
Ini tidak akan berhasil dan tidak menjawab pertanyaan.
coisnepe

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.