How do you style the custom markdown elements

Question

Created Nov ’21

Replies 2

Boosts 0

Views 2.2k

Participants 3

In the "What's new in Foundation" and "What's new in SwiftUI" talks there were examples of creating custom Attributed String styles. The example shown was for a rainbow style.

They showed creating the style, serializing the style, using the style in a String - but did not show how to actually render the text in the rainbow style. How is that part done in SwiftUI.

ie if I have Text("My fake example of ^[a custom style](customStyle: redAndEmphasized).")

How would i create the piece that renders "a custom style" with foregroundColor red and a heavy font?

Thanks,

Daniel

Boost

Answer 1

Frameworks Engineer OP

Apple

Dec ’21

This sample project is a great example of the piece you are looking for - transforming custom attributes to attributes like foregroundColor and font that SwiftUI understands. In particular, you can take a look at the RainbowText view and its annotateRainbowColors function to see how the rainbow attribute is transformed into the foreground color attribute.

In short, you can write a custom view that wraps a SwiftUI Text view initialized with an AttributedString. You can use the AttributedString(localized:) initializer to get the same markdown parsing / localization behavior as Text's LocalizedStringKey initializer, but you can then transform the attributes before passing the AttributedString to your Text view.

0

Answer 2

tecentmoon OP

Sep ’23

How about if the attribute is a custom one, not the standard attribute(e.g. foregroundColor, font etc)? For example, an colorful underline with height 10pt.

0