エディタ内でのリストの折返しインデントを揃えたい

お世話になっております.

plainエディター(画像左)においても,Preview画面(画像右)のように - タグに合わせてぶら下げの表記にトグルなどができれば,可読性の面で嬉しいです.
example

Koike

(連続での投稿,すみません)

Hi Kento,

すでにそのようになっています。
どのバージョンと環境を使っていますか?(こちらはWindowsの4.5.2を使っています)

Peilun_Ma,

ご返信ありがとうございます.
環境は,Macの4.5.2です.

伝わりづらくてすみません,左側のPlainエディタ上で,

- コンテンツコンテ
  ンツコンテンツコ
  ンテンツ
- あああ

のように,改行しない場合にぶら下げの表記にしたいのです.
(上記は手動でスペースを入れてインデントしていますが,これが自動でスペースを含まずそういう表記になるように)

下図のような効果を出したいのですね。

styless.less のハックが必要ですが、以下のように設定してみていかがでしょうか?
この例はプレビューの50%のところで改行するようになります。

.editor {
  .mde-preview li {
    max-width: 50% !important;
  }
}

参考

Style Tweaksのマニュアル

迅速にご返信頂き大変ありがとうございます!

丁寧に教えて頂いてる中,こちらの説明が不足しており大変恐縮なのですが,プレビューは関係無く,エディタ上で似た表記にしたいと思っています.

image

エディタの部分ですか。。。
明確に区切りがなく、単純なスタイルのカスタマイズで変更できそうにない気がします。

ご返信ありがとうございます!
そうですよね,,,色々ご丁寧に教えて下さりありがとうございます.

こんにちは。

@Peilun_Ma Thanks for helping him!

@Kento_Koike
以下のような カスタムCSS を適用すれば目的のようなテキストインデントが実現できます:

.list-line.list-line-1.CodeMirror-line {
  padding-left: 1.3em;
  text-indent: -1.3em;
}

.list-line.list-line-2.CodeMirror-line {
  padding-left: 2.4em;
  text-indent: -2.4em;
}

.list-line.list-line-3.CodeMirror-line {
  padding-left: 3.5em;
  text-indent: -3.5em;
}

もしかすると副作用があるかもしれません。
あくまでworkaroundですので、その点はご了承ください。

2 Likes

Matsuyamaさん

ありがとうございます,希望通りの表記になりました!
狭い幅で使うことが多いので,これで読みやすくなります.

1 Like

よかったです!

こちら、v4.6.1にて本体に取り込みました!ありがとうございます〜

2 Likes

ありがとうございます!とても嬉しいです.

1 Like