Using Markdown and Attributed String in SwiftUI

0
98
Using Markdown and Attributed String in SwiftUI


Other than all the big features such as AsyncImage and searchable, the iOS 15 SDK also introduced some minor improvements to streamline the development of iOS apps. In this tutorial, we will show you how to use Markdown in SwiftUI’s Text view.

What’s Markdown

I assume you have used Markdown before, but in case if you have no idea what it is, let me give you a quick walkthrough. Created by John Gruber, Markdown is a lightweight markup language for adding formatting to a plain text document. Most importantly, it allows you to easily turn the formatted text into an HTML web page (or other types of documents). I have used Markdown for years to write my programming books. Because of its plain text nature, you don’t need any special tools to write Markdown, just a plain text editor is good enough.

Markdown is dead simple to learn and use. Let me show you a few examples. To bold some text, all you need to do is enclose the text in double asterisks (**):

Similarly, to make the text italic, you use a single asterisk like this:

You can cross the text like this:

To format the text as a heading, you write the Markdown syntax like this:

To highlight a command or a line of code, you can enclose the text with single backticks. Here is an example:

You can easily embed hyperlinks in a document by wrapping link text in square brackets (i.e. []) and then specify the URL inside parentheses. Here is an example:

When the text is rendered in HTML, it will show a hyperlink.

The above are just a few examples of the Markdown syntax. For details, you can refer to this document on GitHub.

Using Markdown in SwiftUI

I believe you should have some ideas about Markdown. So, how can you use Markdown in SwiftUI development? Starting from iOS 15, SwiftUI comes with built-in support for this markup language. You can easily format text using Markdown with the Text view.

To do that, all you need to do is pass the Text view with text in Markdown syntax. Here is a sample code snippet:

If you enter the code in your SwiftUI project, Xcode will automatically format the text.

swiftui-markdown-support

Of course, you can format a paragraph of text using Markdown. Here is another example:

swiftui-markdown-render-text

Working with AttributedString

AttributedString in iOS 15, which is the Swift version of NSAttributedString, also has a built-in support of Markdown. To create an attributed string in Markdown, you write the code like this:

And, you can mix Markdown and apply your preferred styling to the text. Here is an example that highlights some text with various colors:

SwiftUI’s text component has a built-in support for AttributedString. You can simply pass it to the Text view for rendering.

swiftui-attributed-text

Current Limitations

The current version of Swift doesn’t support all the Markdown syntax. For example, it can’t render heading, numbered list, and image. Hopefully, Apple will provide further improvement in future updates of SwiftUI.


Founder of AppCoda. Author of multiple iOS programming books including Beginning iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Follow me at Facebook, Twitter and Google+.





Source link

Leave a reply

Please enter your comment!
Please enter your name here