Как нарисовать флажок или галочку в таблице GitHub Markdown?


190

Я могу нарисовать флажок в списках Github README.md, используя

- [] (для снятого флажка)

- [x] (для отмеченного флажка)

Но это не работает в таблице. Кто-нибудь знает, как реализовать флажок или галочку в таблице GitHub Markdown?


Ответы:


258

Попробуйте добавить -перед []или [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 и запросах на слияние, поскольку для таких местоположений это имеет смысл как своего рода список покупок, каков будет смысл нажатия пользователем флажка в документации? Вы действительно хотели бы видеть свою уценку отредактированной?
Жоэль

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. Но отлично работает для других предварительных просмотров уценки.
Вишвараджан и

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.