Markdown is cool, and we as developers are seeing more and more of it all around us; documentation, chat, or even just trying to store dynamic displayed strings without storing the crazy extra characters of xml or html.
Markdown is used by parsing it through a series of Regex
comparisons and outputting the html equivalent of what is to be displayed. In web, that’s awesome! Parse the markdown, dump it in the DOM. Bam.
But what about native mobile development? I’ve seen solutions out there where people just create a WebView on their platform, and dump the parsed html from the markdown string into that WebView. It might get the job done in a simple scenario, but WebViews
are hefty and really should be avoided.
I’ve created a free and open sourced solution to this problem – The MarkdownTextView
.
Here’s the repo: https://github.com/SuavePirate/MarkdownTextView
This is a Xamarin.Forms control that renders on iOS and Android. It consumes a string through the Markdown
property, and then the custom render on the respective platform renders it out via a UILabel
on iOS and a TextView
on Android.
Using the MarkdownTextView
To use the control, clone the repository and reference the library projects in your application. Reference the PCL in your PCL or Shared Library, and reference the native library with the renderer in your platform specific project.
In your platform projects, be sure to call:
MarkdownTextView.Init();
Then use the control in either your XAML or your C# page/view:
<ContentPage ... xmlns:spcontrols="clr-namespace:SPControls.Forms;assembly=SPControls.MarkdownTextView" ...> <spcontrols:MarkdownTextView Markdown="{Binding MarkdownString}" /> </ContentPage>
var mdTextView = new MarkdownTextView(); mdTextView.Markdown = "# this is my *header* tag";
How It Works
There are five core steps to how the control works:
- The Xamarin.Forms control takes the string value from the
Markdown
property - The Native custom renderer gets the updated string
- The native control calls the PCL Markdown class to parse the string into an html string (with some extra clean up)
- The native library parses the html string into a platform specific attributed string that the control can render.
- iOS:
NSAttributedString
- Android:
ICharSequence
- iOS:
- The native renderer then renders the value from the above type into the native control.
- iOS:
UILabel.AttributedText
- Android:
TextView.TextFormatted
- iOS:
There are a few smaller steps specific to the platform to handle some tags that are not normally built in, but that’s the basics.
In a follow-up blog post, I will talk about the details of how this is accomplished for each platform, and how to take this outside Xamarin.Forms to use in your native Xamarin applications.
3 thoughts on “Xamarin.Controls – MarkdownTextView”