如何在GitHub Markdown表中绘制复选框或刻度线?


Answers:


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问题中可以单击复选框并合并请求,因为对于这样的位置,将其视为购物清单是有意义的,用户单击文档中的复选框意味着什么?您是否真的想看到您的降价编辑过?
约尔(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:现在看起来像一个带有白色复选标记的绿色复选框。
拉米A。

@RamiA。,您使用什么阅读器/浏览器?刚刚在Ubuntu上使用Chromium和Firefox(66.0.3)进行了检查。它们(仍然)都看起来像上面的图像。但是不知道Edge或Chrome / Chromium / FF的绝对最新版本……我给人的印象是,这些表情符号在使用中是如此普遍,以至于不太可能将其排除在外。但是谁知道呢:)
大卫·康纳德

@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 markdown兼容。我的解决方案基于此问题的答案。另请参阅此翔实的答案

更新:我应该提到,当您以这种方式进行操作时,不需要<ul>,例如:

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

除了可接受的答案之外,这也行得通。实际上,我已经在GitHub上成功使用了它。感谢您为大家指出。我应该早点做。
Gaurav Bishnoi

1
&#10004; 为“✔”
Mawardy



3

以下是我如何在表格中绘制复选框!

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


显示如下:
在此处输入图片说明


4
它对我不起作用。是Github风味的降价商品吗?
Gaurav Bishnoi '17

我知道,某种程度上它不会呈现Github flavoured markdown。但是对于其他降价预览器来说效果很好。
vishwarajanand17年

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

编辑文档或Wiki页面,然后使用- [ ]- [x]语法更新任务列表。此外,您可以参考此链接


您可以使用管道创建表| 和连字符-要创建表,可以在表的内部使用-[]和-[x]语法。这就是我绘制复选框的方式。
约瑟夫·查尔斯(Charles Charles)

@JosephCharles请提供示例代码以显示如何在表中运行它吗?
Pocketsand,

1
这将无法正常工作,并且无法回答问题。
coisnepe

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.