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

Posted

技术标签:

【中文标题】如何在 GitHub Markdown 表中绘制复选框或刻度线?【英文标题】:How to draw checkbox or tick mark in GitHub Markdown table? 【发布时间】:2018-04-30 20:55:20 【问题描述】:

我可以使用在 Github README.md 列表中绘制复选框

- [ ] (for unchecked checkbox)
- [x] (for checked checkbox)

但这在表格中不起作用。有人知道如何在 GitHub Markdown 表中实现复选框或复选标记吗?

【问题讨论】:

查看 GitHub 博客 github.blog/2014-04-28-task-lists-in-all-markdown-documents Markdown 要求您在复选框后添加一些文本。例如,- [ ] myLabel 【参考方案1】:

09 2021

如果您对标准降价代码有疑问。您可以使用表情符号。

本地 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

【讨论】:

【参考方案2】:

不幸的是,接受的答案对我不起作用(我使用的是 GitHub 风格的降价)。

既然我们要添加 html 元素,为什么不直接添加 <input>

| demo                                              | demo |
| ------------------------------------------------- | ---- |
| <input type="checkbox" disabled checked /> works  |      |
| <input type="checkbox" disabled /> works here too |      |

这应该适用于任何环境,因为它是纯 HTML(请参阅下面的仅供参考)。

仅供参考,这个例子是在 VS Code markdown 预览模式下测试的(GitHub 风格),截图也是在 VS Code 预览模式下拍摄的, 它并不完全在 GitHub 上运行。

上面提到的表情符号是一个不错的选择,如果这在您的目标环境中不起作用。

【讨论】:

【参考方案3】:
|checked|unchecked|crossed|
|---|---|---|
|&check;|_|&cross;|

在哪里

✓ 通过HTML Entity Code ✗ 通过HTML Entity Code _ 通过下划线字符 和表格通过降价table syntax。

【讨论】:

谢谢。这对我来说是最容易记住的。 :)【参考方案4】:

有非常好的Emoji图标说明可在

https://gist.github.com/rxaviers/7360908 或https://github.com/StylishThemes/GitHub-Dark/wiki/Emoji

您可以查看它们。我希望你能找到适合你写作的图标。

最好的,

【讨论】:

【参考方案5】:

现在支持表情符号! :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 上):

【讨论】:

这在渲染输出中看起来非常漂亮,但缺点是它在“源代码”中占用了大量空间并且在那里不是很可读。而可读性是markdown的主要概念之一。 我认为这可能已经过时了,因为:white_check_mark: 现在看起来像一个带有白色复选标记的绿色复选框。 @davidkonrad,见***.com/a/59674743/90287,特别是gist.github.com/rxaviers/7360908。我在 Windows 上使用 Firefox 76.0.1 和 Chrome 81.0.4044.138。 嗨,你真的有这张表可以显示哪些数据库支持哪些功能? @ERJAN,[OT] 是的,其中许多人,+100。它来自内部项目的文档,提供对各种 dbms 的同质访问。在本机支持不同或缺少 SQL 函数的地方,对功能进行了调整,因此无论平台如何,使用流行的 SQL 函数都会返回完全相同的结果,这就是灰色标记所表示的。不能承诺任何事情,但 购买了用于开源的域名 crudder.net。我需要的只是时间。【参考方案6】:

尝试在[][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

它的外观如下:

【讨论】:

最初存在格式错误。它适用于列表,但不适用于表格。 这看起来不错,但复选框已损坏。如果您单击一个复选框,它什么也不做。通常单击 GitHub Markdown 复选框会选中/取消选中它。解决方法是手动编辑 HTML,这不是很好,但可行。 这只会创建一个复选框的外观。该项目实际上并不响应点击事件,这取消了它们的目的:从 md 呈现模式检查,而不是原始文本。 @DumpsterDoofus 你的意思是这在问题/合并请求中不起作用吗?一般来说,虽然复选框在 GitHub / GitLab 问题和合并请求中是可点击的,因为对于这些位置,它作为一种购物清单是有意义的,用户点击文档中的复选框是什么意思?你真的想看到你的降价编辑吗? 在我看来,它在 GitHub 方面确实很糟糕。【参考方案7】:

您可以使用表情符号

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

【讨论】:

第一个表情符号应该写什么?我知道,第二个是 ":heavy_check_mark:" 取消复选框使用:white_large_square,复选框使用:white_check_mark【参考方案8】:

我将&amp;#9744; (☐) 用于[ ]&amp;#9745; (☑) 用于[x],它适用于marked.js,它表示它与Github markdown 兼容。我的解决方案基于answers for this question。另见this informative answer。

更新:我应该提到当你这样做时,你不需要&lt;ul&gt;,例如:

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

【讨论】:

除了接受的答案之外,这也适用。其实我已经在 GitHub 上成功使用过了。谢谢大家指出来。我应该早点这样做的。 ✔对于'✔'【参考方案9】:

编辑文档或 wiki 页面,并使用 - [ ]- [x] 语法更新您的任务列表。另外你可以参考this link。

【讨论】:

您可以使用管道创建表 |和连字符 - 要创建一个表,您可以在该表内部使用 - [ ] 和 - [x] 语法。这就是我绘制复选框的方式。 @JosephCharles 请您提供示例代码来展示您如何在表格中使用它? 这不起作用,也不能回答问题。【参考方案10】:

以下是关于 Markdown 复选框表的内容,可以帮助您和其他人。享受吧!

| 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> |

【讨论】:

【参考方案11】:

以下是我在表格中绘制复选框的方法!

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

显示如下:

【讨论】:

这对我不起作用。是 Github 风格的 Markdown 吗? 我明白了,不知怎的,它不能用Github flavoured markdown 渲染。但适用于其他降价预览器。

以上是关于如何在 GitHub Markdown 表中绘制复选框或刻度线?的主要内容,如果未能解决你的问题,请参考以下文章

如何在没有 QCheckBox 框的情况下绘制本机复选标记

再不用怕Markdown中的绘图了,GitHub官方支持Mermaid图表绘制工具

以编程方式选择时,CheckedTextView 未绘制复选标记

markdown 如何在Github Markdown文件上添加公式

如何在 Github/Markdown 中更改图像的大小?

【图文详解】如何利用Github在Markdown中插入图片?