Come disegnare la casella di controllo o il segno di spunta nella tabella Markdown di GitHub?


190

Sono in grado di disegnare la casella di controllo negli elenchi di Github README.md utilizzando

- [] (per la casella di controllo non selezionata)

- [x] (per la casella di controllo selezionata)

Ma questo non funziona in tabella. Qualcuno sa come implementare la casella o il segno di spunta nella tabella Markdown di GitHub?


Risposte:


258

Prova ad aggiungere un -prima del []o [x]. Questo è -seguito da uno spazio vuoto .

Di seguito è riportato un esempio dal blog di Github.

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

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

Sembra come sotto:

Immagine risultante

Ecco come si potrebbe fare lo stesso in una tabella:

| 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

Ecco come appare:

inserisci qui la descrizione dell'immagine


Inizialmente si è verificato un errore di formattazione. Funziona per gli elenchi ma non per la tabella.
Gaurav Bishnoi,

Grazie, è perfetto
Gaurav Bishnoi,

5
Sembra buono, ma le caselle di controllo sono rotte. Se fai clic su una casella di controllo, non fa nulla. Normalmente facendo clic su una casella di spunta GitHub Markdown si seleziona / deseleziona. La soluzione alternativa è modificare manualmente l'HTML, che non è eccezionale, ma fattibile.
DumpsterDoofus,

Questo crea solo l'aspetto di una casella di controllo. L'elemento in realtà non risponde agli eventi clic, che ne annulla lo scopo: controllare dalla modalità di rendering md, piuttosto che dal testo non elaborato.
Eduardo Pignatelli

1
@DumpsterDoofus vuoi dire che non funziona in problemi / richieste di unione? Come in generale, mentre le caselle di controllo sono selezionabili nei problemi di GitHub / GitLab e uniscono le richieste poiché, per tali posizioni, ha senso come una sorta di elenco di acquisti, quale sarebbe il significato dell'utente che fa clic su una casella di controllo nella documentazione? Ti piacerebbe davvero vedere il tuo markdown modificato?
Joël,

53

Ora gli emoji sono supportati! :white_check_mark:/ :heavy_check_mark:dà una buona impressione ed è ampiamente supportato:

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

esegue il rendering in (qui su vecchio 65.5.3x di cromo):

inserisci qui la descrizione dell'immagine


3
Sembra molto bello nell'output di rendering ma il lato negativo è che occupa molto spazio nel "codice sorgente" e non è molto leggibile lì. E la leggibilità è uno dei principali concetti di markdown.
Daniel,

Penso che questo potrebbe non essere aggiornato poiché :white_check_mark:ora sembra una casella di controllo verde con un segno di spunta bianco.
Rami A.,

@RamiA., Quale lettore / browser usi? L'ho appena verificato con Chromium e Firefox (66.0.3) su Ubuntu. Sembrano (ancora) entrambi come sopra l'immagine. Ma non lo so con Edge o le ultime versioni assolute di Chrome / Chromium / FF ... Ho l'impressione che quegli emoji siano così comuni nell'uso che è improbabile che vengano esclusi. Ma chissà :)
davidkonrad

@davidkonrad, vedere stackoverflow.com/a/59674743/90287 , specificamente gist.github.com/rxaviers/7360908 . Sto usando Firefox 76.0.1 e Chrome 81.0.4044.138 su Windows.
Rami A.,

36

Ho usato &#9744;(☐) per [ ]e &#9745;(☑) per [x]e funziona con segnato.js che dice che è compatibile con il markdown di Github. Ho basato la mia soluzione sulle risposte a questa domanda . Vedi anche questa risposta informativa .

Aggiornamento: avrei dovuto menzionare che quando lo fai in questo modo, non hai bisogno del <ul>, ad esempio:

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

Questo funziona troppo oltre alla risposta accettata. In effetti, l'ho già usato con successo su GitHub. Grazie per averlo segnalato a tutti. Avrei dovuto farlo prima.
Gaurav Bishnoi,

1
& # 10004; per '✔'
Mawardy,



3

Di seguito è riportato come disegno una casella in una tabella!

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


Visualizza in questo modo:
inserisci qui la descrizione dell'immagine


4
Non funziona per me. È per il markdown al gusto di Github?
Gaurav Bishnoi,

Vedo, in qualche modo non viene visualizzato con Github flavoured markdown. Ma funziona benissimo con altri previewers di markdown.
vishwarajan e il

1

Ecco cosa ho che aiuta te e gli altri nella tabella delle caselle di controllo del markdown. Godere!

| 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

Modifica il documento o la pagina wiki e utilizza la sintassi - [ ]e - [x]per aggiornare l'elenco delle attività. Inoltre puoi fare riferimento a questo link .


È possibile creare tabelle con pipe | e trattini - per creare una tabella e all'interno di quella tabella è possibile utilizzare la sintassi - [] e - [x]. ecco come traccio una casella di controllo.
Joseph Charles,

@JosephCharles Per favore, puoi fornire un codice di esempio per mostrare come hai fatto funzionare in una tabella?
Tasche e

1
Questo non funzionerà e non risponderà alla domanda.
coisnepe,

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.