5
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Asciidocの表の中でチェックボックスを使う

Last updated at Posted at 2017-09-16

確認環境

AtomのAsciiDoc Preview 2.10.2

そもそもAsciidocでチェックボックスを書くには

Asciidocでチェックボックスを書くには

checklist.adoc
* [*] checked
* [x] also checked
* [ ] not checked

と書くように、ドキュメントに書かれています。
↓出力例
基本的なチェックリスト

が、表の中に書こうとすると[ ]がそのまま出てしまいます。

チェックリストにはならず、そのまま表示される

表の中にチェックボックスを書くには

+++で囲った文書またはpass:[]の[]内に書いた文書ではHTMLタグが使用できるので、↓のように書くと表の中でもチェックボックスを表示することができます。

checklist.adoc
+++<input type="checkbox">+++
pass:[<input type="checkbox">]

単にチェックマークを書くのが目的なら↓のようにも書けます。

checklist.adoc
icon:check[]
✓
&#10003;

出力結果
表の中でもチェックボックスが表示される

より簡潔に表の中でチェックボックスを使う

9/20 追記しました。azarasiさん、ありがとうございます!

tableを書く際に、cols属性で幅を指定しますが、数字の後ろにaをつけると、その列ではAsciiDocの記法が有効になります:dizzy_face:

[cols="50,50a"]
|===
|タスク名
|完了?

|タスク1
|
* [*] checked
* [x] also checked
* [ ] not checked

|タスク2
|
* [x] checked

|タスク3
|
* [ ] not checked
|===

↓出力結果

colsの数値にaをつけた場合の出力

参考:

この投稿に至った経緯

これまでドキュメントをmarkdownで記述していましたが、AsciiDocがプロジェクトで採用されたため、書き方を調べていました。

5
10
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?