Wie zeichne ich ein Kontrollkästchen oder ein Häkchen in der GitHub Markdown-Tabelle?

188

Ich kann das Kontrollkästchen in Github README.md-Listen mit zeichnen

- [] (für deaktiviertes Kontrollkästchen)

- [x] (für aktiviertes Kontrollkästchen)

Aber das funktioniert nicht in der Tabelle. Weiß jemand, wie man ein Kontrollkästchen oder ein Häkchen in der GitHub Markdown-Tabelle implementiert?

Gaurav Bishnoi
quelle
Schauen Sie sich den GitHub-Blog an. Github.blog/2014-04-28-task-lists-in-all-markdown-documents
Sagynbek Kenzhebaev

Antworten:

256

Versuchen Sie, ein -vor dem []oder hinzuzufügen [x]. Darauf -folgt ein Leerzeichen .

Unten ist ein Beispiel aus dem Github-Blog.

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

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

Es sieht wie folgt aus:

Resultierendes Bild

So könnte man dasselbe in einer Tabelle machen:

| 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

So sieht es aus:

Geben Sie hier die Bildbeschreibung ein

Yash
quelle
Anfangs war ein Formatierungsfehler in Frage gestellt. Es funktioniert für Listen, aber nicht für Tabellen.
Gaurav Bishnoi
Danke, es ist perfekt.
Gaurav Bishnoi
5
Das sieht gut aus, aber die Kontrollkästchen sind kaputt. Wenn Sie auf ein Kontrollkästchen klicken, wird nichts ausgeführt. Wenn Sie normalerweise auf ein Kontrollkästchen für GitHub Markdown klicken, wird es aktiviert / deaktiviert. Umgehung besteht darin, den HTML-Code manuell zu bearbeiten, was nicht besonders gut, aber machbar ist.
DumpsterDoofus
Dadurch wird nur das Kontrollkästchen angezeigt. Das Element reagiert nicht wirklich auf Klickereignisse, wodurch der Zweck aufgehoben wird: Überprüfen Sie im md-Rendering-Modus und nicht im Rohtext.
Eduardo Pignatelli
1
@DumpsterDoofus meinst du, dass dies bei Problemen / Zusammenführungsanfragen nicht funktioniert? Während Kontrollkästchen in GitHub / GitLab-Problemen anklickbar sind und Anforderungen zusammenführen, da dies für solche Standorte als eine Art Einkaufsliste sinnvoll ist, was bedeutet es im Allgemeinen, wenn Benutzer auf ein Kontrollkästchen in der Dokumentation klicken? Möchten Sie wirklich, dass Ihr Markdown bearbeitet wird?
Joël
53

Jetzt werden Emojis unterstützt! :white_check_mark:Ich :heavy_check_mark:mache einen guten Eindruck und werde weithin unterstützt:

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

rendert zu (hier auf älterem Chrom 65.0.3x):

Geben Sie hier die Bildbeschreibung ein

davidkonrad
quelle
3
Dies sieht in der gerenderten Ausgabe sehr gut aus, aber der Nachteil ist, dass es viel Platz im "Quellcode" beansprucht und dort nicht sehr lesbar ist. Und die Lesbarkeit ist eines der Hauptkonzepte für Abschriften.
Daniel
Ich denke, dies ist möglicherweise veraltet, da es :white_check_mark:jetzt wie ein grünes Kontrollkästchen mit einem weißen Häkchen aussieht.
Rami A.
@RamiA., Welchen Reader / Browser benutzt du? Habe es gerade mit Chromium und Firefox (66.0.3) unter Ubuntu ausprobiert. Sie sehen (noch) beide wie im Bild oben aus. Aber ich weiß es nicht mit Edge oder den absolut neuesten Versionen von Chrome / Chromium / FF ... Ich habe den Eindruck, dass diese Emojis so häufig verwendet werden, dass es unwahrscheinlich ist, dass sie ausgeschlossen werden. Aber wer weiß :)
Davidkonrad
@davidkonrad, siehe stackoverflow.com/a/59674743/90287 , speziell gist.github.com/rxaviers/7360908 . Ich verwende Firefox 76.0.1 und Chrome 81.0.4044.138 unter Windows.
Rami A.
36

Ich habe &#9744;(☐) für [ ]und &#9745;(☑) für verwendet [x]und es funktioniert für markierte.js, was besagt, dass es mit Github-Markdown kompatibel ist. Ich habe meine Lösung auf Antworten auf diese Frage gestützt . Siehe auch diese informative Antwort .

Update: Ich hätte erwähnen sollen, dass Sie, wenn Sie es auf diese Weise tun, das nicht benötigen <ul>, z.

| Unchecked | Checked |
| --------- | ------- |
| &#9744;   | &#9745; |
user9645
quelle
Dies funktioniert auch, abgesehen von der akzeptierten Antwort. Tatsächlich habe ich es bereits erfolgreich auf GitHub verwendet. Vielen Dank für den Hinweis für alle. Ich hätte das früher tun sollen.
Gaurav Bishnoi
1
& # 10004; für '✔'
Mawardy
19

Sie können Emojis verwenden

Done? | Name
:---:| ---
⬜️| Nope
✅| Yep
Benjamin Intal
quelle
3

Im Folgenden wird gezeichnet, wie ich ein Kontrollkästchen in eine Tabelle zeichne!

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


Anzeigen wie folgt:
Geben Sie hier die Bildbeschreibung ein

Vishwarajanand
quelle
4
Es funktioniert nicht für mich. Ist es für Github aromatisierten Abschlag?
Gaurav Bishnoi
Ich verstehe, irgendwie wird es nicht mit gerendert Github flavoured markdown. Funktioniert aber gut für andere Markdown-Vorschau.
Vishwarajanand
1

Hier ist, was ich habe, das Ihnen und anderen bei der Markdown-Checkbox-Tabelle hilft. Genießen!

| 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> |
Musa Toktaş
quelle
1

Bearbeiten Sie das Dokument oder die Wiki-Seite und aktualisieren Sie Ihre Aufgabenliste mit der Syntax - [ ]und - [x]. Außerdem können Sie auf diesen Link verweisen .

Joseph Charles
quelle
Sie können Tabellen mit Pipes | erstellen und Bindestriche - Um eine Tabelle zu erstellen, können Sie innerhalb dieser Tabelle die Syntax - [] und - [x] verwenden. So zeichne ich ein Kontrollkästchen.
Joseph Charles
@JosephCharles Können Sie einen Beispielcode angeben, um zu zeigen, wie Sie ihn in einer Tabelle zum Laufen gebracht haben?
Taschen und
1
Dies funktioniert nicht und beantwortet die Frage nicht.
Coisnepe