Jak narysować pole wyboru lub znacznik zaznaczenia w tabeli GitHub Markdown?


189

Jestem w stanie narysować pole wyboru na listach Github README.md za pomocą

- [] (dla niezaznaczonego pola wyboru)

- [x] (dla zaznaczonego pola wyboru)

Ale to nie działa w tabeli. Czy ktoś wie, jak zaimplementować pole wyboru lub znacznik wyboru w tabeli GitHub Markdown?


Odpowiedzi:


257

Spróbuj dodać -przed []lub [x]. To jest -poprzedzone spacją .

Poniżej przykład z bloga Github.

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

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

Wygląda jak poniżej:

Wynikowy obraz

Oto jak można zrobić to samo w tabeli:

| 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

Oto jak to wygląda:

wprowadź opis obrazu tutaj


Początkowo wystąpił błąd formatowania. Działa dla list, ale nie dla tabeli.
Gaurav Bishnoi

Dzięki, jest doskonały.
Gaurav Bishnoi

5
Wygląda dobrze, ale pola wyboru są zepsute. Jeśli klikniesz pole wyboru, nic nie robi. Zwykle kliknięcie pola wyboru GitHub Markdown zaznacza / odznacza je. Obejście problemu polega na ręcznej edycji kodu HTML, co nie jest świetne, ale wykonalne.
DumpsterDoofus

Tworzy to tylko wygląd pola wyboru. Element w rzeczywistości nie reaguje na zdarzenia kliknięcia, co anuluje ich cel: sprawdzanie z trybu renderowania md zamiast surowego tekstu.
Eduardo Pignatelli

1
@DumpsterDoofus czy masz na myśli to, że to nie działa w przypadku problemów / żądań scalenia? Ogólnie rzecz biorąc, podczas gdy pola wyboru są klikalne w wydaniach GitHub / GitLab i żądaniach scalania, ponieważ w przypadku takich lokalizacji ma to sens jako lista zakupów, jakie byłoby znaczenie kliknięcia przez użytkownika pola wyboru w dokumentacji? Czy naprawdę chciałbyś, aby Twoja przecena była edytowana?
Joël

53

Teraz emoji są obsługiwane! :white_check_mark:/ :heavy_check_mark:robi dobre wrażenie i jest szeroko wspierany:

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

renderuje się do (tutaj na starszym chromie 65.0.3x):

wprowadź opis obrazu tutaj


3
Wygląda to bardzo ładnie w renderowanym wyjściu, ale wadą jest to, że zajmuje dużo miejsca w „kodzie źródłowym” i nie jest tam zbyt czytelny. A czytelność jest jedną z głównych koncepcji przeceny.
Daniel

Myślę, że to może być nieaktualne, ponieważ :white_check_mark:teraz wygląda jak zielone pole wyboru z białym znacznikiem wyboru.
Rami A.

@RamiA., Jakiego czytnika / przeglądarki używasz? Właśnie sprawdziłem to w Chromium i Firefoksie (66.0.3) na Ubuntu. Obie (nadal) wyglądają jak na powyższym obrazku. Ale nie wiem z Edge lub absolutnie najnowszymi wersjami Chrome / Chromium / FF ... Mam wrażenie, że te emotikony są tak powszechne w użyciu, że jest mało prawdopodobne, że zostaną wykluczone. Ale kto wie :)
davidkonrad

@davidkonrad, patrz stackoverflow.com/a/59674743/90287 , a konkretnie gist.github.com/rxaviers/7360908 . Używam przeglądarki Firefox 76.0.1 i Chrome 81.0.4044.138 w systemie Windows.
Rami A.

36

Użyłem &#9744;(☐) dla [ ]i &#9745;(☑) dla [x]i działa to na oznaczonym.js, który mówi, że jest kompatybilny z markdown Github. Swoje rozwiązanie oparłem na odpowiedziach na to pytanie . Zobacz także tę informacyjną odpowiedź .

Aktualizacja: Powinienem był wspomnieć, że robiąc to w ten sposób, nie potrzebujesz <ul>np .:

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

Działa to również poza zaakceptowaną odpowiedzią. W rzeczywistości z powodzeniem korzystałem z niego już na GitHubie. Dzięki za wskazanie tego wszystkim. Powinienem był to zrobić wcześniej.
Gaurav Bishnoi

1
& # 10004; dla „✔”
Mawardy



3

Oto jak rysuję pole wyboru w tabeli!

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


Wyświetla się w ten sposób:
wprowadź opis obrazu tutaj


4
Na mnie to nie działa. Czy jest to promocja o smaku Github?
Gaurav Bishnoi

Widzę, jakoś się nie renderuje Github flavoured markdown. Ale działa dobrze w przypadku innych przeglądarek przecenionych.
vishwarajanand

1

Oto, co mam, co pomaga Tobie i innym w kwestii tabeli znaczników wyboru. Cieszyć się!

| 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

Edytuj dokument lub stronę wiki i użyj składni - [ ]i, - [x]aby zaktualizować listę zadań. Ponadto możesz skorzystać z tego linku .


Możesz tworzyć tabele z rurami | i myślniki - aby utworzyć tabelę, a wewnątrz tej tabeli możesz użyć składni - [] i - [x]. tak narysuję pole wyboru.
Joseph Charles

@JosephCharles Czy możesz podać przykładowy kod, aby pokazać, jak działa w tabeli?
Kieszenie i

1
To nie zadziała i nie odpowie na pytanie.
coisnepe

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.