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

그 모습은 다음과 같습니다.

여기에 이미지 설명을 입력하십시오


처음에는 형식 오류가있었습니다. 목록에서는 작동하지만 테이블에서는 작동하지 않습니다.
Gaurav Bishnoi

고마워, 완벽 해
Gaurav Bishnoi

5
이것은 좋아 보이지만 확인란이 깨졌습니다. 확인란을 클릭하면 아무 것도 수행되지 않습니다. 일반적으로 GitHub Markdown 체크 박스를 클릭하면 체크 / 체크 해제됩니다. 해결 방법은 훌륭하지는 않지만 HTML을 수동으로 편집하는 것입니다.
DumpsterDoofus

확인란의 모양 만 만듭니다. 항목은 실제로 클릭 이벤트에 응답하지 않으므로 목적을 취소합니다. 원시 텍스트가 아닌 md 렌더링 모드에서 확인합니다.
Eduardo Pignatelli

1
@DumpsterDoofus 이것이 이슈 / 병합 요청에서 작동하지 않는 것을 의미합니까? 일반적으로 GitHub / GitLab 이슈에서 체크 박스를 클릭 할 수 있고 그러한 위치에 대한 요청을 병합하는 것은 일종의 shoping list와 같은 의미가 있습니다. 마크 다운이 수정 된 것을보고 싶습니까?
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:흰색 확인 표시가있는 녹색 확인란처럼 보이므로이 날짜가 오래된 것 같습니다.
Rami A.

@RamiA., 어떤 리더 / 브라우저를 사용하십니까? 우분투에서 Chromium 및 Firefox (66.0.3)로 방금 확인했습니다. 그들은 (여전히) 위의 이미지처럼 보입니다. 그러나 Edge 또는 절대 최신 버전의 Chrome / Chromium / FF를 모르는 경우 ... 해당 이모티콘이 너무 일반적으로 사용되지 않아 배제되지 않을 것이라는 인상을 받았습니다. 그러나 누가 아는가 :)
davidkonrad

@davidkonrad, stackoverflow.com/a/59674743/90287 , 특히 gist.github.com/rxaviers/7360908 참조하십시오 . Windows에서 Firefox 76.0.1 및 Chrome 81.0.4044.138을 사용하고 있습니다.
Rami A.

36

내가 사용 &#9744;에 대해 (☐) [ ]&#9745;(☑)에 대한 [x]그것은 작동 marked.js 는 Github의 인하와 호환 말한다. 이 질문대한 답변을 바탕으로 솔루션을 만들었습니다 . 이 유익한 답변을 참조하십시오 .

업데이트 : 나는 당신이 이런 식으로 그것을 할 때 <ul>, 예를 들어 필요하지 않다고 언급 했어야합니다 .

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

이것은 받아 들여진 대답과는 별도로 작동합니다. 사실, 나는 이미 GitHub에서 성공적으로 사용했습니다. 모두를 지적 해 주셔서 감사합니다. 나는 이전에 그렇게 했어야했다.
Gaurav Bishnoi

1
& # 10004; '✔'의 경우
Mawardy

19

이모티콘을 사용할 수 있습니다

Done? | Name
:---:| ---
⬜️| Nope
✅| Yep


3

다음은 테이블에 확인란을 그리는 방법입니다!

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


다음과 같이 표시됩니다 :
여기에 이미지 설명을 입력하십시오


4
그것은 나를 위해 작동하지 않습니다. Github 플레이버 마크 다운을위한 것입니까?
Gaurav Bishnoi

나는 어떻게 든 렌더링하지 않습니다 Github flavoured markdown. 그러나 다른 마크 다운 미리보기에는 적합합니다.
vishwarajanand

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] 구문을 사용할 수 있습니다. 이것이 체크 박스를 그리는 방법입니다.
Joseph Charles

@JosephCharles 테이블에서 어떻게 작동하는지 보여주는 샘플 코드를 제공 할 수 있습니까?
Pocketsand

1
이것은 작동하지 않으며 질문에 대답하지 않습니다.
coisnepe

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.