¿Cómo dibujar la casilla de verificación o la marca de verificación en la tabla GitHub Markdown?


190

Puedo dibujar la casilla de verificación en las listas README.md de Github usando

- [] (para la casilla de verificación sin marcar)

- [x] (para la casilla marcada)

Pero esto no está funcionando en la tabla. ¿Alguien sabe cómo implementar la casilla de verificación o marca de verificación en la tabla de GitHub Markdown?


Respuestas:


258

Intente agregar un -antes del []o [x]. Eso es -seguido por un espacio en blanco .

A continuación se muestra un ejemplo del blog de Github.

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

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

Aparece como a continuación:

Imagen resultante

Así es como uno podría hacer lo mismo en una tabla:

| 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

Así es como se ve:

ingrese la descripción de la imagen aquí


Hubo un error de formato en cuestión inicialmente. Está funcionando para listas pero no para tabla.
Gaurav Bishnoi

Gracias es perfecto.
Gaurav Bishnoi

55
Esto se ve bien, pero las casillas de verificación están rotas. Si hace clic en una casilla de verificación, no hace nada. Por lo general, al hacer clic en una casilla de verificación GitHub Markdown se activa / desactiva. La solución consiste en editar manualmente el HTML, lo cual no es excelente, pero es factible.
DumpsterDoofus

Esto crea solo la apariencia de una casilla de verificación. El elemento en realidad no responde a los eventos de clic, lo que cancela el propósito de ellos: verificar desde el modo renderizado md, en lugar del texto sin formato.
Eduardo Pignatelli

1
@DumpsterDoofus, ¿quiere decir que esto no funciona en problemas / solicitudes de fusión? Como en general, si bien se puede hacer clic en las casillas de verificación en los problemas de GitHub / GitLab y se combinan las solicitudes, ya que, para tales ubicaciones, tiene sentido como una lista de compras, ¿cuál sería el significado de que el usuario haga clic en una casilla de verificación en la documentación? ¿Realmente te gustaría ver tu rebaja editada?
Joël

53

¡Ahora los emojis son compatibles! :white_check_mark:/ :heavy_check_mark:da una buena impresión y es ampliamente compatible:

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

Renders a (aquí en cromo antiguo 65.0.3x):

ingrese la descripción de la imagen aquí


3
Esto se ve muy bien en la salida renderizada, pero la desventaja es que ocupa mucho espacio en el "código fuente" y no es muy legible allí. Y la legibilidad es uno de los principales conceptos de rebaja.
Daniel

Creo que esto puede estar desactualizado ya que :white_check_mark:ahora parece una casilla de verificación verde con una marca de verificación blanca.
Rami A.

@RamiA., ¿Qué lector / navegador usas? Acabo de comprobarlo con Chromium y Firefox (66.0.3) en Ubuntu. Ambos (todavía) se parecen a la imagen de arriba. Pero no sé con Edge o las últimas versiones absolutas de Chrome / Chromium / FF ... Tengo la impresión de que esos emojis son tan comunes en el uso que es poco probable que se descarten. Pero quién sabe :)
davidkonrad

@davidkonrad, consulte stackoverflow.com/a/59674743/90287 , específicamente gist.github.com/rxaviers/7360908 . Estoy usando Firefox 76.0.1 y Chrome 81.0.4044.138 en Windows.
Rami A.

36

Utilicé &#9744;(☐) para [ ]y &#9745;(☑) para [x]y funciona para marcado.js que dice que es compatible con la rebaja de Github. Basé mi solución en las respuestas a esta pregunta . Vea también esta respuesta informativa .

Actualización: debería haber mencionado que cuando lo haces de esta manera, no necesitas <ul>, por ejemplo:

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

Esto también funciona aparte de la respuesta aceptada. De hecho, ya lo he usado con éxito en GitHub. Gracias por señalarlo para todos. Debería haber hecho eso antes.
Gaurav Bishnoi

1
& # 10004; para '✔'
Mawardy



3

¡Lo siguiente es cómo dibujar una casilla de verificación en una tabla!

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


Se muestra así:
ingrese la descripción de la imagen aquí


44
No está funcionando para mi. ¿Es para la rebaja con sabor a Github?
Gaurav Bishnoi

Ya veo, de alguna manera no se procesa con Github flavoured markdown. Pero funciona bien para otros previsualizadores de rebajas.
vishwarajana y

1

Esto es lo que tengo que lo ayuda a usted y a otros sobre la tabla de casillas de verificación ¡Disfrutar!

| 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

Edite el documento o la página wiki y use la sintaxis - [ ]y - [x]para actualizar su lista de tareas. Además puedes consultar este enlace .


Puedes crear tablas con tuberías | y guiones: para crear una tabla y dentro de esa tabla puede usar la sintaxis - [] y - [x]. así es como dibujo una casilla de verificación.
Joseph Charles

@JosephCharles ¿Puede proporcionar un código de muestra para mostrar cómo lo hizo funcionar en una tabla?
Bolsillos y

1
Esto no funcionará y no responde la pregunta.
Coisnepe

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.