How do you style the custom markdown elements

Question

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

2.1k

Posted by

dimsumthinking

Reply

Add a Comment

Answer 1

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.

Posted by

Frameworks Engineer

Add a Comment

Answer 2

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.

Posted by

tecentmoon

Add a Comment

How do you style the custom markdown elements

Replies