Como desenhar a caixa de seleção ou a marca de seleção na tabela GitHub Markdown?

190

Consigo desenhar a caixa de seleção nas listas README.md do Github usando

- [] (para caixa de seleção desmarcada)

- [x] (para caixa de seleção marcada)

Mas isso não está funcionando na tabela. Alguém sabe como implementar caixa de seleção ou marca de seleção na tabela de remarcações do GitHub?

Gaurav Bishnoi
fonte
Confira o Blog do GitHub github.blog/2014-04-28-task-lists-in-all-markdown-documents
Sagynbek Kenzhebaev

Respostas:

258

Tente adicionar um -antes do []ou [x]. Isso é -seguido por um espaço em branco .

Abaixo está um exemplo do blog do Github.

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

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

Aparece como abaixo:

Imagem resultante

Aqui está como se pode fazer o mesmo em uma tabela:

| 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

Veja como fica:

insira a descrição da imagem aqui

Yash
fonte
Houve um erro de formatação em questão inicialmente. Está funcionando para listas, mas não para tabela.
Gaurav Bishnoi
Obrigado, é perfeito.
Gaurav Bishnoi
5
Parece bom, mas as caixas de seleção estão quebradas. Se você clicar em uma caixa de seleção, ela não fará nada. Normalmente, clicar em uma caixa de seleção do GitHub Markdown marca / desmarca. A solução alternativa é editar manualmente o HTML, o que não é ótimo, mas factível.
DumpsterDoofus
Isso cria apenas a aparência de uma caixa de seleção. Na verdade, o item não responde aos eventos de clique, o que cancela a finalidade deles: verificar no modo md renderizado, em vez de texto bruto.
Eduardo Pignatelli
1
@DumpsterDoofus, você quer dizer que isso não funciona em solicitações de problemas / mesclagem? Como em geral, enquanto as caixas de seleção são clicáveis ​​nos problemas do GitHub / GitLab e mesclam solicitações, pois, para esses locais, faz sentido como uma lista de compras, qual seria o significado do usuário clicar em uma caixa de seleção na documentação? Deseja realmente ver sua remarcação editada?
Joël
53

Agora emojis são suportados! :white_check_mark:/ :heavy_check_mark:dá uma boa impressão e é amplamente suportado:

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

processa para (aqui no cromo 65.0.3x mais antigo):

insira a descrição da imagem aqui

davidkonrad
fonte
3
Isso parece muito bom na saída renderizada, mas a desvantagem é que ela ocupa muito espaço no "código fonte" e não é muito legível por lá. E a legibilidade é um dos principais conceitos de remarcação.
Daniel
Acho que isso pode estar desatualizado, pois :white_check_mark:agora parece uma caixa de seleção verde com uma marca de seleção branca.
Rami A.
@RamiA., Que leitor / navegador você usa? Acabei de conferir com o Chromium e o Firefox (66.0.3) no Ubuntu. Ambos (ainda) se parecem com a imagem acima. Mas não sei com o Edge ou as versões mais recentes absolutas do Chrome / Chromium / FF ... Tenho a impressão de que esses emojis são tão comuns em uso que é improvável que sejam descartados. Mas quem sabe :)
davidkonrad
@davidkonrad, consulte stackoverflow.com/a/59674743/90287 , especificamente gist.github.com/rxaviers/7360908 . Estou usando o Firefox 76.0.1 e o Chrome 81.0.4044.138 no Windows.
Rami A.
36

Eu usei &#9744;(☐) para [ ]e &#9745;(☑) para [x]e ele funciona para o marker.js, que diz que é compatível com a marcação do Github. Baseei minha solução nas respostas para esta pergunta . Veja também esta resposta informativa .

Atualização: Eu deveria ter mencionado que, quando você faz dessa maneira, não precisa do <ul>, por exemplo:

| Unchecked | Checked |
| --------- | ------- |
| &#9744;   | &#9745; |
user9645
fonte
Isso funciona muito além da resposta aceita. Na verdade, eu já o usei com sucesso no GitHub. Obrigado por apontar para todos. Eu deveria ter feito isso antes.
Gaurav Bishnoi
1
& # 10004; para '✔'
Mawardy
19

Você pode usar emojis

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

A seguir, como eu desenho uma caixa de seleção em uma tabela!

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


Exibe assim:
insira a descrição da imagem aqui

vishwarajanand
fonte
4
Não está funcionando para mim. É para remarcação com sabor do Github?
Gaurav Bishnoi
Entendo, de alguma forma, não é renderizado com Github flavoured markdown. Mas funciona bem para outros visualizadores de descontos.
vishwarajanand
1

Aqui está o que eu tenho que ajuda você e outras pessoas sobre a tabela da caixa de seleção de descontos. Aproveitar!

| 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ş
fonte
1

Edite a página do documento ou wiki e use a sintaxe - [ ]e - [x]para atualizar sua lista de tarefas. Além disso, você pode consultar este link .

Joseph Charles
fonte
Você pode criar tabelas com pipes | e hífens - para criar uma tabela e dentro dela, você pode usar a sintaxe - [] e - [x]. é assim que eu desenho uma caixa de seleção.
Joseph Charles
@JosephCharles Por favor, você pode fornecer um código de exemplo para mostrar como o conseguiu trabalhar em uma tabela?
precisa saber é o seguinte
1
Isso não vai funcionar e não responde à pergunta.
coisnepe