Is it possible to change the indent distance of list items?

[ylin]

I find the left indent of lists to be too wide. Here is what it looks like now:

I would like it to look like this:

If you can point me to the code, perhaps I can create a PR for it. Best if it's already built in though, but for .markdownMargin(), I only see the top and bottom options, not leading.

[gonzalezreal]

Hi @ylin,

Currently, the list markers have a minimum width of 1.5em (that is 1.5 * current font size):

swift-markdown-ui/Sources/MarkdownUI/Theme/BlockStyle/ListMarkerConfiguration.swift

Line 21 in c0daf6e

.relativeFrame(minWidth: .em(1.5), alignment: .trailing)

You can create custom list markers with a different minimum width (i.e. 1em) to achieve the desired effect.

[EryouHao]

@gonzalezreal Hi, Can you tell me how to adjust this setting in markdownBlockStyle?

I seem to have not found the correct method.

import SwiftUI
import MarkdownUI

struct MarkdownView: View {
    let note: Note
    let containerHeight: CGFloat = 180
    
    var body: some View {
        Markdown(note.content)
            .markdownTheme(.docC)
            .markdownTextStyle {
                FontSize(10)
            }
            .markdownBlockStyle(\.listItem) { configuration in
                configuration.label.relativeFrame(minWidth: .em(0.5), alignment: .trailing) // ✖ not work
            }
            .frame(maxHeight: containerHeight, alignment: .top)
//          .clipped()
            .mask {
                  LinearGradient(
                    colors: [.black, .clear],
                    startPoint: UnitPoint(x: 0.5, y: 1 - 10 / containerHeight), endPoint: .bottom
                  )
                }
    }
}

[gonzalezreal]

You need to override the bulletedListMarker, numberedListMarker and taskListMarker styles instead of the listItem one.

For instance, this replaces the bulleted list markers with a dash - using the current font size (1em) as the indent size.

Markdown("...")
  .markdownBlockStyle(\.bulletedListMarker) { configuration in
    Text("-")
      .relativeFrame(minWidth: .em(1), alignment: .trailing)
  }

[EryouHao]

@gonzalezreal Thanks for your reply. but it seems still not work.

my code:

import SwiftUI
import MarkdownUI

struct MarkdownView: View {
    let note: Note
    let maxHeight: CGFloat?
    let fontSize: CGFloat
    
    init(note: Note, fontSize: CGFloat = 14, maxHeight: CGFloat? = nil) {
        self.note = note
        self.fontSize = fontSize
        self.maxHeight = maxHeight
    }
    
    var body: some View {
        let content = Markdown(note.content)
            .markdownTheme(.docC)
            .markdownTextStyle {
                FontSize(fontSize)
            }
            .markdownBlockStyle(\.bulletedListMarker) { configuration in
                Text("-")
                  .relativeFrame(minWidth: .em(1), alignment: .trailing)
              }
        
        if let maxHeight = maxHeight {
            return AnyView(content.frame(maxHeight: maxHeight, alignment: .top).mask {
                LinearGradient(
                    colors: [.black, .clear],
                    startPoint: UnitPoint(x: 0.5, y: 1 - 10 / maxHeight), endPoint: .bottom
                )
            })
        } else {
            return AnyView(content)
        }
    }
}

[EryouHao]

Got it. because I use .docC theme, when I remove it, it works.