Як намалювати прапорець або галочку в таблиці GitHub Markdown?


189

Я можу намалювати прапорець у списках Github README.md, використовуючи

- [] (для галочки без позначення)

- [x] (для прапорець)

Але це не працює в таблиці. Хтось знає, як реалізувати прапорець або галочку в таблиці GitHub Markdown?


Відповіді:


257

Спробуйте додати -до []або [x]. Ось з -подальшим пропуском .

Нижче наводиться приклад з блогу Github.

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

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

Це здається нижче:

Результатне зображення

Ось як можна зробити те ж саме в таблиці:

| 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

Ось як це виглядає:

введіть тут опис зображення


Спочатку виникла помилка форматування. Він працює для списків, але не для таблиці.
Гаурав Бішной

Спасибі, це ідеально.
Гаурав Бішной

5
Це виглядає добре, але прапорці порушені. Якщо ви натиснете прапорець, він нічого не робить. Зазвичай, натиснувши прапорець GitHub Markdown, встановіть / зніміть його. Обхід полягає в тому, щоб вручну редагувати HTML, що не є великим, але можливо.
DumpsterDoofus

Це створює лише зовнішній вигляд прапорця. Елемент насправді не реагує на події клацання, що скасовує їх ціль: перевірка з md виведеного режиму, а не необробленого тексту.
Едуардо Піньятелі

1
@DumpsterDoofus Ви маєте на увазі, що це не працює в питаннях / запитах на об'єднання? Як і взагалі, якщо в питаннях GitHub / GitLab можна натискати прапорці та запити на об'єднання, оскільки для таких місць має сенс як список магазинів, який би був сенс натискання користувачем прапорець у документації? Ви дійсно хотіли б, щоб ваша відмітка була відредагована?
Joël

53

Тепер емоджи підтримуються! :white_check_mark:/ :heavy_check_mark:справляє гарне враження та широко підтримується:

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

робить (тут на старих хромах 65.0.3x):

введіть тут опис зображення


3
Це виглядає дуже добре у виведеному виведенні, але недоліком є ​​те, що він займає багато місця у "вихідному коді" і там не дуже читабельний. А читабельність - одна з головних концепцій відмітки.
Даніель

Я думаю, це може бути застарілим, оскільки :white_check_mark:зараз виглядає зелений прапорець з білою галочкою.
Рамі А.

@RamiA., Яким читачем / браузером ви користуєтесь? Щойно перевірили це за допомогою Chromium та Firefox (66.0.3) на Ubuntu. Вони (досі) обидва виглядають як на зображенні вгорі. Але не знаю з Edge або абсолютними останніми версіями Chrome / Chromium / FF ... У мене складається враження, що ці емоджи настільки поширені у використанні, що навряд чи вони будуть виключені. Але хто знає :)
давидконрад

@davidkonrad см stackoverflow.com/a/59674743/90287 , в зокрема gist.github.com/rxaviers/7360908 . Я використовую Firefox 76.0.1 та Chrome 81.0.4044.138 в Windows.
Рамі А.

36

Я використовував &#9744;(☐) для [ ]і &#9745;(☑) для, [x]і він працює для mark.js, що говорить про сумісність з розміткою Github. Я базував своє рішення на відповідях на це питання . Дивіться також цю інформативну відповідь .

Оновлення: я мав би зазначити, що коли ви робите це таким чином, вам не потрібно <ul>, наприклад:

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

Це також працює окрім прийнятої відповіді. Насправді я вже успішно використовував його на GitHub. Дякуємо, що вказали на це всім. Я повинен був зробити це раніше.
Гаурав

1
& # 10004; для '✔'
Mawardy



3

Далі - як я малюю прапорець у таблиці!

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


Показує так:
введіть тут опис зображення


4
Це не працює для мене. Це для ароматної надбавки Github?
Гаурав Бішной

Я бачу, якось це не викликає Github flavoured markdown. Але добре працює для інших переглядачів розмітки.
vishwarajanaі

1

Ось, що я маю, що допомагає вам та іншим про таблицю відмітки про розмітку. Насолоджуйтесь!

| 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

Редагувати документ або вікі - сторінки, а також використовувати - [ ]і - [x]синтаксис , щоб оновити список завдань. Крім того, ви можете посилатися на це посилання .


Ви можете створювати таблиці з трубами | і дефіси - щоб створити таблицю і всередині цієї таблиці ви можете використовувати синтаксис - [] і - [x]. ось як я малюю прапорець.
Джозеф Чарльз

@JosephCharles Будь ласка, ви можете надати зразок коду, щоб показати, як у вас це працює в таблиці?
Кишенькові

1
Це не спрацює і не дає відповіді на запитання.
coisnepe

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.