如何在 GitHub Markdown table 中绘制复选框或刻度线?
How to draw checkbox or tick mark in GitHub Markdown table?
我可以使用
在 Github README.md 列表中绘制复选框
- [ ] (for unchecked checkbox)
- [x] (for checked checkbox)
但这在 table 中不起作用。有人知道如何在 GitHub Markdown table 中实现复选框或复选标记吗?
编辑文档或 wiki 页面,并使用 - [ ]
和 - [x]
语法更新您的任务列表。另外可以参考this link.
尝试在 []
或 [x]
之前添加 -
。那是一个 -
后跟一个空白 space </code>.</p>
<p>下面是来自 Github 博客的示例。</p>
<pre><code>### Solar System Exploration, 1950s – 1960s
- [ ] Mercury
- [x] Venus
- [x] Earth (Orbit/Moon)
- [x] Mars
- [ ] Jupiter
- [ ] Saturn
- [ ] Uranus
- [ ] Neptune
- [ ] Comet Haley
显示如下:
以下是如何在 table 中做同样的事情:
| 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
外观如下:
以下是我在 table!
中绘制复选框的方法
| Checkbox Experiments | [ ] unchecked header | [x] checked header |
| ---------------------|:---------------------:|:-------------------:|
| checkbox | [ ] row | [x] row |
显示如下:
以下是我提供的帮助您和其他人了解降价复选框的信息table。享受吧!
| 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> |
我用 ☐
(☐) 表示 [ ]
,☑
(☑) 表示 [x]
,它适用于 marked.js which says it is compatible with Github markdown. I based my solution on answers for this question. See also this informative answer。
更新:我应该提到当你这样做时,你不需要 <ul>
,例如:
| Unchecked | Checked |
| --------- | ------- |
| ☐ | ☑ |
您可以使用表情符号
Done? | Name
:---:| ---
⬜️| Nope
✅| Yep
现在支持表情符号了! :white_check_mark:
/ :heavy_check_mark:
给人好感,得到广泛支持:
Function | MySQL / MariaDB | PostgreSQL | SQLite
:------------ | :-------------| :-------------| :-------------
substr | :heavy_check_mark: | :white_check_mark: | :heavy_check_mark:
渲染到(这里是旧版 chromium 65.0.3x):
上有非常好的 Emoji
图标说明
你可以去看看。希望大家能找到适合自己写作的图标。
最佳,
|checked|unchecked|crossed|
|---|---|---|
|✓|_|✗|
checked
unchecked
crossed
✓
_
✗
在哪里
✓ 通过 HTML Entity Code
✗ 来自 HTML Entity Code
_ 通过下划线字符
和 table 通过 markdown table syntax.
不幸的是,接受的答案对我不起作用(我使用的是 GitHub 风味降价)。
我突然想到,既然我们要添加 HTML 个元素,为什么不直接添加一个 <input>
。
| demo | demo |
| ------------------------------------------------- | ---- |
| <input type="checkbox" disabled checked /> works | |
| <input type="checkbox" disabled /> works here too | |
这应该适用于任何环境,因为它很简单 HTML(请参阅下面的 FYI)。
FYI, this example was tested in VS Code markdown preview mode(GitHub flavoured), the screenshot is also taken in VS Code preview mode. It's not working on GitHub.
Emoji mentioned above is a good alternative, if this doesn't work in your target environment.
2021 年 09 月
如果您对标准降价代码有疑问。您可以使用表情符号。
原生 Github
如果您使用的是 GitHub 的默认表情符号,则可以使用这些表情符号。需要注意的是没有取消选中,所以你必须使用不同的表情符号来获得那种外观。
⬜
:white_large_square
✅
:white_check_mark
来源
:white_large_square
: https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md#geometric
:white_check_mark
: https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md#other-symbol
完整列表
https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md
我可以使用
在 Github README.md 列表中绘制复选框- [ ] (for unchecked checkbox)
- [x] (for checked checkbox)
但这在 table 中不起作用。有人知道如何在 GitHub Markdown table 中实现复选框或复选标记吗?
编辑文档或 wiki 页面,并使用 - [ ]
和 - [x]
语法更新您的任务列表。另外可以参考this link.
尝试在 []
或 [x]
之前添加 -
。那是一个 -
后跟一个空白 space </code>.</p>
<p>下面是来自 Github 博客的示例。</p>
<pre><code>### Solar System Exploration, 1950s – 1960s
- [ ] Mercury
- [x] Venus
- [x] Earth (Orbit/Moon)
- [x] Mars
- [ ] Jupiter
- [ ] Saturn
- [ ] Uranus
- [ ] Neptune
- [ ] Comet Haley
显示如下:
以下是如何在 table 中做同样的事情:
| 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
外观如下:
以下是我在 table!
中绘制复选框的方法| Checkbox Experiments | [ ] unchecked header | [x] checked header |
| ---------------------|:---------------------:|:-------------------:|
| checkbox | [ ] row | [x] row |
显示如下:
以下是我提供的帮助您和其他人了解降价复选框的信息table。享受吧!
| 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> |
我用 ☐
(☐) 表示 [ ]
,☑
(☑) 表示 [x]
,它适用于 marked.js which says it is compatible with Github markdown. I based my solution on answers for this question. See also this informative answer。
更新:我应该提到当你这样做时,你不需要 <ul>
,例如:
| Unchecked | Checked |
| --------- | ------- |
| ☐ | ☑ |
您可以使用表情符号
Done? | Name
:---:| ---
⬜️| Nope
✅| Yep
现在支持表情符号了! :white_check_mark:
/ :heavy_check_mark:
给人好感,得到广泛支持:
Function | MySQL / MariaDB | PostgreSQL | SQLite
:------------ | :-------------| :-------------| :-------------
substr | :heavy_check_mark: | :white_check_mark: | :heavy_check_mark:
渲染到(这里是旧版 chromium 65.0.3x):
Emoji
图标说明
你可以去看看。希望大家能找到适合自己写作的图标。
最佳,
|checked|unchecked|crossed|
|---|---|---|
|✓|_|✗|
checked | unchecked | crossed |
---|---|---|
✓ | _ | ✗ |
在哪里
✓ 通过 HTML Entity Code
✗ 来自 HTML Entity Code
_ 通过下划线字符
和 table 通过 markdown table syntax.
不幸的是,接受的答案对我不起作用(我使用的是 GitHub 风味降价)。
我突然想到,既然我们要添加 HTML 个元素,为什么不直接添加一个 <input>
。
| demo | demo |
| ------------------------------------------------- | ---- |
| <input type="checkbox" disabled checked /> works | |
| <input type="checkbox" disabled /> works here too | |
这应该适用于任何环境,因为它很简单 HTML(请参阅下面的 FYI)。
FYI, this example was tested in VS Code markdown preview mode(GitHub flavoured), the screenshot is also taken in VS Code preview mode. It's not working on GitHub.
Emoji mentioned above is a good alternative, if this doesn't work in your target environment.
2021 年 09 月
如果您对标准降价代码有疑问。您可以使用表情符号。
原生 Github
如果您使用的是 GitHub 的默认表情符号,则可以使用这些表情符号。需要注意的是没有取消选中,所以你必须使用不同的表情符号来获得那种外观。
⬜
:white_large_square
✅
:white_check_mark
来源
:white_large_square
: https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md#geometric
:white_check_mark
: https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md#other-symbol
完整列表 https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md