How can I theme so that it matches the rest of my app?

[drekka]

Hi, I'm using your excellent API to provide documents embedded in my app. The issue I'm trying to figure out is how to theme the markdown so it looks like the headings, lists, paragraphs etc in the SwiftUI code.

I've been looking at the doco you've provided but I'm still not sure how to approach this. I currently have a range of custom fonts in my app, some of which I was to apply to the markdown. But it appears I can't just set a font and have to effectively define each font style again.

Or am I missing something? ie. is there a way to do something like heading1.font = myFont?

Thanks

[gonzalezreal]

Hi @drekka,

The theming API in MarkdownUI works at two levels.

On the one hand, you have the styles for the inline text; these styles define the attributes (font, size, foreground color, background color, etc.) for each Markdown inline: text, strong text, emphasized text, inline code, links, and strikethrough text. The Theme type provides default values for these styles:

• text (base): the body system font
• strong text: base + semibold
• emphasized text: base + italic
• inline code: base + monospaced variant
• links: base + accent foreground color
• strikethrough: base + single strikethrough style

These styles can be combined together. For instance, a strongly emphasized text (i.e., ***Some text***) will use a text style that combines the strong and emphasis text styles (base + semibold + italic). In addition, the theming API provides a custom DSL to define your own text styles. Every attribute that you can apply to a text style is a type that conforms to the TextStyle protocol. See the docs for more info.

On the other hand, you have block styles. These are conceptually similar to SwiftUI styles (ButtonStyle, ToggleStyle, etc.) and provide the opportunity to customize the appearance of a block of text (paragraph, headings, tables, etc.). For example, you can customize the top and bottom margins and the line spacing and add additional views (horizontal scrolling) to code blocks. You can also customize the base text style for headings, making all the text bold and changing the font.

You can get the idea by looking at the basic, docC, and gitHub themes source code.

In summary, if you want to use a different font for your Markdown, you need to override the base text style:

Markdown {
  // Contents
}
.markdownTextStyle(\.text) {
  FontFamily(.custom("Avenir"))
}

If you want to use a different font just for the headings, you will need to override all the heading styles:

Markdown {
  // Contents
}
.markdownBlockStyle(\.heading1) { configuration in
  configuration.label
    .markdownMargin(top: .rem(1.5), bottom: .rem(1))
    .markdownTextStyle {
      FontFamily(.custom("Avenir"))
      FontWeight(.semibold)
      FontSize(.em(2))
    }
}

If you need to customize the Markdown appearance fully, it is better to create your own theme. My suggestion is to start by copying the code of the basic theme and tweak it until you get what you need.