Comment dessiner une case à cocher ou une coche dans le tableau GitHub Markdown?


190

Je peux dessiner une case à cocher dans les listes Github README.md en utilisant

- [] (pour la case non cochée)

- [x] (pour la case cochée)

Mais cela ne fonctionne pas dans la table. Quelqu'un sait-il comment implémenter une case à cocher ou une coche dans le tableau GitHub Markdown?


Réponses:


258

Essayez d'ajouter un -avant []ou [x]. C'est un -suivi d'un espace vide .

Vous trouverez ci-dessous un exemple du blog Github.

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

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

Il apparaît comme ci-dessous:

Image résultante

Voici comment faire la même chose dans une table:

| 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

Voici à quoi ça ressemble:

entrez la description de l'image ici


Il y avait une erreur de formatage en question au départ. Cela fonctionne pour les listes mais pas pour les tables.
Gaurav Bishnoi

Merci, c'est parfait.
Gaurav Bishnoi

5
Cela semble bon, mais les cases à cocher sont cassées. Si vous cochez une case, cela ne fait rien. En général, cliquer sur une case à cocher GitHub Markdown la coche / la décoche. La solution de contournement consiste à modifier manuellement le HTML, ce qui n'est pas génial, mais faisable.
DumpsterDoofus

Cela crée juste l'apparence d'une case à cocher. L'élément ne répond pas réellement aux événements de clic, ce qui en annule le but: vérifier à partir du mode rendu md, plutôt que du texte brut.
Eduardo Pignatelli

1
@DumpsterDoofus voulez-vous dire que cela ne fonctionne pas dans les problèmes / demandes de fusion? Comme en général, bien que les cases à cocher soient cliquables dans les problèmes GitHub / GitLab et les demandes de fusion car, pour de tels emplacements, cela a du sens comme une sorte de liste de courses, quelle serait la signification de l'utilisateur cliquant sur une case à cocher dans la documentation? Souhaitez-vous vraiment voir votre démarque modifiée?
Joël

53

Maintenant, les emojis sont pris en charge! :white_check_mark:/ :heavy_check_mark:donne une bonne impression et est largement supporté:

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

rend (ici sur l'ancien chrome 65.0.3x):

entrez la description de l'image ici


3
Cela semble très joli dans la sortie rendue mais l'inconvénient est que cela prend beaucoup de place dans le "code source" et n'est pas très lisible là-bas. Et la lisibilité est l'un des principaux concepts de démarque.
Daniel le

Je pense que cela peut être obsolète car :white_check_mark:il ressemble maintenant à une case à cocher verte avec une coche blanche.
Rami A.

@RamiA., Quel lecteur / navigateur utilisez-vous? Je viens de le vérifier avec Chromium et Firefox (66.0.3) sur Ubuntu. Ils ressemblent (encore) tous les deux à l'image ci-dessus. Mais je ne sais pas avec Edge ou les dernières versions absolues de Chrome / Chromium / FF ... J'ai l'impression que ces emojis sont si couramment utilisés qu'il est peu probable qu'ils soient exclus. Mais qui sait :)
davidkonrad

@davidkonrad, voir stackoverflow.com/a/59674743/90287 , en particulier gist.github.com/rxaviers/7360908 . J'utilise Firefox 76.0.1 et Chrome 81.0.4044.138 sur Windows.
Rami A.

36

J'ai utilisé &#9744;(☐) pour [ ]et &#9745;(☑) pour [x]et cela fonctionne pour marqué.js qui dit qu'il est compatible avec Github markdown. J'ai basé ma solution sur les réponses à cette question . Voir également cette réponse informative .

Mise à jour: j'aurais dû mentionner que lorsque vous le faites de cette façon, vous n'avez pas besoin de <ul>, par exemple:

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

Cela fonctionne aussi en dehors de la réponse acceptée. En fait, je l'ai déjà utilisé avec succès sur GitHub. Merci de le signaler à tout le monde. J'aurais dû le faire plus tôt.
Gaurav Bishnoi

1
& # 10004; pour '✔'
Mawardy



3

Voici comment je dessine une case à cocher dans un tableau!

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


S'affiche comme ceci:
entrez la description de l'image ici


4
Ça ne fonctionne pas pour moi. Est-ce pour la démarque à saveur de Github?
Gaurav Bishnoi

Je vois, d'une manière ou d'une autre, il ne rend pas avec Github flavoured markdown. Mais fonctionne bien pour les autres prévisualisateurs de démarques.
vishwarajanand

1

Voici ce que j'ai qui vous aide, vous et d'autres, à propos du tableau des cases à cocher de démarque. Prendre plaisir!

| 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

Modifiez le document ou la page wiki et utilisez la syntaxe - [ ]et - [x]pour mettre à jour votre liste de tâches. De plus, vous pouvez vous référer à ce lien .


Vous pouvez créer des tableaux avec des tuyaux | et tirets - pour créer une table et à l'intérieur de cette table, vous pouvez utiliser la syntaxe - [] et - [x]. voici comment je dessine une case à cocher.
Joseph Charles

@JosephCharles Pouvez-vous fournir un exemple de code pour montrer comment vous l'avez fait fonctionner dans une table?
Pocketsand

1
Cela ne fonctionnera pas et ne répondra pas à la question.
coisnepe

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.