Thursday, July 7, 2022
HomeiOS DevelopmentUtilizing Markdown and Attributed String in SwiftUI

Utilizing Markdown and Attributed String in SwiftUI


Apart from all the large options corresponding to AsyncImage and searchable, the iOS 15 SDK additionally launched some minor enhancements to streamline the event of iOS apps. On this tutorial, we are going to present you use Markdown in SwiftUI’s Textual content view.

What’s Markdown

I assume you’ve used Markdown earlier than, however in case when you have no concept what it’s, let me offer you a fast walkthrough. Created by John Gruber, Markdown is a light-weight markup language for including formatting to a plain textual content doc. Most significantly, it permits you to simply flip the formatted textual content into an HTML internet web page (or different sorts of paperwork). I’ve used Markdown for years to jot down my programming books. Due to its plain textual content nature, you don’t want any particular instruments to jot down Markdown, only a plain textual content editor is nice sufficient.

Markdown is lifeless easy to be taught and use. Let me present you a number of examples. To daring some textual content, all you have to do is enclose the textual content in double asterisks (**):

Equally, to make the textual content italic, you employ a single asterisk like this:

You’ll be able to cross the textual content like this:

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

To focus on a command or a line of code, you’ll be able to enclose the textual content with single backticks. Right here is an instance:

You’ll be able to simply embed hyperlinks in a doc by wrapping hyperlink textual content in sq. brackets (i.e. []) after which specify the URL inside parentheses. Right here is an instance:

When the textual content is rendered in HTML, it should present a hyperlink.

The above are only a few examples of the Markdown syntax. For particulars, you’ll be able to seek advice from this doc on GitHub.

Utilizing Markdown in SwiftUI

I imagine you need to have some concepts about Markdown. So, how are you going to use Markdown in SwiftUI improvement? Ranging from iOS 15, SwiftUI comes with built-in assist for this markup language. You’ll be able to simply format textual content utilizing Markdown with the Textual content view.

To try this, all you have to do is go the Textual content view with textual content in Markdown syntax. Here’s a pattern code snippet:

If you happen to enter the code in your SwiftUI venture, Xcode will robotically format the textual content.

swiftui-markdown-support

In fact, you’ll be able to format a paragraph of textual content utilizing Markdown. Right here is one other instance:

swiftui-markdown-render-text

Working with AttributedString

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

And, you’ll be able to combine Markdown and apply your most popular styling to the textual content. Right here is an instance that highlights some textual content with numerous colours:

SwiftUI’s textual content element has a built-in assist for AttributedString. You’ll be able to merely go it to the Textual content view for rendering.

swiftui-attributed-text

Present Limitations

The present model of Swift doesn’t assist all of the Markdown syntax. For instance, it will possibly’t render heading, numbered record, and picture. Hopefully, Apple will present additional enchancment in future updates of SwiftUI.


Founding father of AppCoda. Creator of a number of iOS programming books together with Starting iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Observe me at Fb, Twitter and Google+.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments