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

ありがとう、それは完璧です。
Gaurav Bishnoi 2017年

5
これは良さそうですが、チェックボックスが壊れています。チェックボックスをクリックしても何も起こりません。通常、GitHub Markdownチェックボックスをクリックすると、チェックボックスがオン/オフになります。回避策は、HTMLを手動で編集することです。これは素晴らしいことではありませんが、実行可能です。
DumpsterDoofus 2018

これにより、チェックボックスの外観が作成されます。アイテムは実際にはクリックイベントに応答せず、クリックイベントの目的がキャンセルされます。生のテキストではなく、mdレンダリングモードからチェックしてください。
Eduardo Pignatelli、

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
これはレンダリングされた出力では非常に見栄えがしますが、「ソースコード」で多くのスペースを必要とし、そこではあまり読みにくいという欠点があります。そして、読みやすさはマークダウンの主要な概念の1つです。
ダニエル

:white_check_mark:白いチェックマークが付いた緑色のチェックボックスのように見えるので、これは古くなっていると思います。
ラミA.

@RamiA。、どのリーダー/ブラウザーを使用していますか?UbuntuのChromiumとFirefox(66.0.3)でチェックアウトしたところです。彼らは(まだ)両方とも上の画像のように見えます。ただし、ChromeやChrome / Chromium / FFのEdgeや絶対最新バージョンではわかりません...これらの絵文字は一般的に使用されているため、除外される可能性は低いと思われます。しかし、誰が知っているか:)
davidkonrad

@davidkonrad、stackoverflow.com / a/59674743/90287、特にgist.github.com/rxaviers/7360908を参照してください。WindowsではFirefox 76.0.1とChrome 81.0.4044.138を使用しています。
ラミA.

36

私は&#9744;(☐)for [ ]&#9745;(for)for を使用しましたが[x]marked.jsで動作し、Github マークダウンと互換性があると述べています。私の解決策は、この質問の回答に基づいています。この有益な回答も参照してください。

更新:私はあなたがこのようにそれをするとき、あなたはを必要としないことを述べるべきでした<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 2017年

どういうわけか、それはでレンダリングされませんGithub flavoured markdown。ただし、他のマークダウンプレビューアでは問題なく機能します。
vishwarajanand 2017年

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]構文を使用できます。これは、チェックボックスを描画する方法です。
ジョセフチャールズ

@JosephCharlesテーブルでどのように機能するかを示すサンプルコードを提供できますか?
Pocketsand

1
これは機能せず、質問に回答しません。
coisnepe

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.