チェックリストがブルットポイントに干渉する

UX
1

チェックボックスを含む箇条書きリストがあると、箇条書きが表示されません。これが機能なのかバグなのかはわかりません。確かに、制御するのは少し難しいです。

1. [] 通常の番号付き項目（チェックボックス付き）
   - 通常の箇条書き
    - [] 例：箇条書きのチェックボックス
[] 例：箇条書き項目2
- [] 例：箇条書き項目3
   - [] 例：箇条書き項目4
         - [] 例：箇条書き項目5

以下のように表示されます：

  1. 通常の番号付き項目（チェックボックス付き）
    • 通常の箇条書き
    • 例：箇条書きのチェックボックス
      例：箇条書き項目2
  • 例：箇条書き項目3
    • 例：箇条書き項目4
      - 例：箇条書き項目5
「いいね！」 1
2

これは機能ですが、もう少し洗練できるかもしれません。.has-checkbox の CSS は視覚的なノイズを避けるために意図的に省略されていることがわかります。

「いいね！」 6
3

接頭辞スペースの数が正しくなるように調整してみました。
もちろん、箇条書きはまだありませんが、かなり見栄えが良くなりました！

1. [] チェックボックス付きの通常の番号付き項目 A (接頭辞スペース 0 個)
    - 通常の箇条書き A.1 (接頭辞スペース 4 個)
      - [] 例の箇条書きチェックボックス A.1 (接頭辞スペース 4 + 2 = 6 個)
    - 通常の箇条書き A.2 (接頭辞スペース 4 個)
      - [] 例の箇条書きチェックボックス A.2 (接頭辞スペース 4 + 2 = 6 個)

注: ここで異なる種類のリストの間に改行を追加しました

- [] 例の箇条書き項目 B (接頭辞スペース 0 個)
  - [] 例の箇条書き項目 B.1 (接頭辞スペース 2 個)
    - [] 例の箇条書き項目 B.1.1 (接頭辞スペース 2 + 2 = 4 個)
      - [] 例の箇条書き項目 B.1.1.1 (接頭辞スペース 2 + 2 + 2 = 6 個)
      - [] 例の箇条書き項目 B.1.1.2 (接頭辞スペース 2 + 2 + 2 = 6 個)
    - [] 例の箇条書き項目 B.1.2 (接頭辞スペース 2 + 2 = 4 個)
  - [] 例の箇条書き項目 B.2 (接頭辞スペース 2 個)
    - [] 例の箇条書き項目 B.2.1 (接頭辞スペース 2 + 2 = 4 個)
    - [] 例の箇条書き項目 B.2.2 (接頭辞スペース 2 + 2 = 4 個)
  1. チェックボックス付きの通常の番号付き項目 A
    • 通常の箇条書き A.1
      • 例の箇条書きチェックボックス A.1
    • 通常の箇条書き A.2
      • 例の箇条書きチェックボックス A.2
  • 例の箇条書き項目 B
    • 例の箇条書き項目 B.1
      • 例の箇条書き項目 B.1.1
        • 例の箇条書き項目 B.1.1.1
        • 例の箇条書き項目 B.1.1.2
      • 例の箇条書き項目 B.1.2
    • 例の箇条書き項目 B.2
      • 例の箇条書き項目 B.2.1
      • 例の箇条書き項目 B.2.2
「いいね！」 3
4

弾丸とチェックボックスを同時に取得するにはどうすればよいですか？数字で取得できますが、弾丸で取得したいです。

1. []
   1. []
   - []

提案

リストで [] が次のように表示されると嬉しいです。

  1. 箇条書き記号なしで使用した場合、箇条書きの代わりとして
1.
   []
  1. 箇条書き記号と一緒に使用した場合、箇条書き + チェックボックスとして
1.
   - []

つまり、箇条書きは数字と同じように扱われます。

5

非常に高いインデント？

  • リスト
    - テスト
    • テスト
    • テスト
  • テスト
- リスト
      - [] テスト
    - [] テスト
  - [] テスト
- [] テスト

この方法では箇条書きになりませんが、ほとんど箇条書きのように見えるダッシュが残ります。

実際、ここに実際の回避策があります。

  • リスト
    • ​ アイテム A
      • ​ アイテム A.1
        • ​ アイテム A.1.1
          • ​ アイテム A.1.1.1
    • ​ アイテム B

この例の ␆ はすべてゼロ幅スペースに置き換えてください

- リスト
  - ␆[] アイテム A
    - ␆[] アイテム A.1
      - ␆[] アイテム A.1.1
        - ␆[] アイテム A.1.1.1
  - ␆[] アイテム B

テスト用にコピーできるゼロ幅スペース：

​
「いいね！」 3
6

@Firepup650 良い発見ですね！チェックボックスの前に文字を追加すると、箇条書きが表示されるようになります。

  • リスト
    • . ドット
      • ' シングルクォート（Excelの書式なしテキストのように）
        • | パイプ

一般的な解決策として、このカスタムCSSをDiscourseインスタンスに追加してください。

ul li.has-checkbox .list-item-checkbox {
  position: relative;
  left: 0;
}

.cooked ul li.has-checkbox,
.d-editor-preview ul li.has-checkbox {
  position: relative;
  list-style-type: disc;
}

.cooked ul ul li.has-checkbox,
.d-editor-preview ul ul li.has-checkbox {
  list-style-type: circle;
}

.cooked ul ul ul li.has-checkbox,
.d-editor-preview ul ul ul li.has-checkbox {
  list-style-type: square;
}
「いいね！」 2
7

それが一つの解決策であり、機能します。しかし、正直に言うと…Excelがテキストセルを強制的にマークする方法を強く思い出させて頭痛がします🤣

8

機能リクエストを作成しましょう。

機能：チェックボックスリストの箇条書きを保持するための特別な表記を追加する

現在、チェックボックスのリストがあると、箇条書きなしで表示されます。

- [] point 1
  - [] point 2
    - [] point 3
      - [] point 4
  • point 1
    • point 2
      • point 3
        • point 4

チェックボックスの前に単一引用符（例：Excel 書式なしテキスト）を追加すると、この機能は無効になり、箇条書きが表示されますが、さらに単一引用符は削除されるべきです。

- '[] point 1
  - '[] point 2
    - '[] point 3
      - '[] point 4
  • ' point 1
    • ' point 2
      • ' point 3
        • ' point 4

---
このマークダウンコード：
--
- '[] point

<!-- HTMLになるべき：（注：単一引用符は表示されない） -->
<ul>
  <li><span class="chcklst-box fa fa-square-o fa-fw"></span> point</li>
</ul>

<!-- HTMLの代わりに（注：単一引用符が表示されたまま）： -->
<ul>
  <li>'<span class="chcklst-box fa fa-square-o fa-fw"></span> point</li>
</ul>
「いいね！」 2
9

これをより簡単に修正/整理するには、2つのスペース（通常のスペースであり、ゼロptスペースではない）を使用すると、箇条書きとチェックボックスの両方が表示されることを示せます。

もちろん、コーディングは大変な作業になる可能性があります！