Render markdown & clickable links with TextMeshPro in Unity.
Try it yourself -- check out the live demo!
Unity's advanced text rendering library, TextMeshPro, supports using rich text tags to format the text. While rich text tags are powerful, they are an absolute pain in the ass to use. FancyTextRendering offers convenient conversion from markdown to TMP Rich Text, which makes it much easier to write styled text in Unity.
| Markdown source | Converted to rich text | Looks like |
|---|---|---|
Text can be *italic*, or **bold**, or even ***both!*** |
Text can be <i>italic</i>, or <b>bold</b>, or even <i><b>both!</b></i> |
Text can be italic, or bold, or even both! |
Additionally, while TMP contains a link tag, this only provides metadata; TMP lacks any functions to make links actually clickable with an action that occurs when you click them. FancyTextRendering contains modules for rendering links properly: they are given a separate color from the rest of the text, then a second color when the cursor hovers over them, and a third color when the mouse button is held down on them. When the mouse button is released, the links can now execute arbitrary code, such as opening a URL in a browser.
Also, it's pretty darn fast, with minimal GC. On my machine it parses a 12,000 word markdown document in under 100ms.
FancyTextRendering was written for our game Logic World. It is primarily for our in-game chat, but it's also used for displaying various pages of information like the in-game changelog.
FancyTextRendering is part of LogicUI, the custom UI library we're writing for Logic World. The entire LogicUI library will be open sourced at some point; FancyTextRendering is just the first module to be released from it.
If you use this you should keep in mind that I don't actually know what the hell I'm doing. There are probably established coding conventions for how you're supposed to write a markdown parser, but I didn't look them up because I wanted the personal challenge of puzzling out how to do it myself. As such, there are many parts of markdown spec that are missing, and there are several bugs with the parser.
If you have a bug report or feature request, please put it on the issues page. And if you'd like to help out with development, I am absolutely accepting pull requests, so please go ahead and make one :D
- Create a standard TextMeshPro GameObject
- Add the MarkdownRenderer component
- Type markdown in the MarkdownRenderer's
Sourcetextbox - Adjust the MarkdownRenderer's
Render Settingsproperties to preference
- Start with a TextMeshPro GameObject (it can be the one used in the steps above)
- Give the text some links, either directly using TMP's
<link>tag or by using a MarkdownRenderer - Add the TextLinkHelper component
- Adjust link color properties to preference
- Optional: add the SimpleLinkBehavior component to make the links actually do something when you click on them
-
NaughtyAttributes is used to draw the inspectors.
-
JimmysUnityUtilities is used for many things, but in particular the StringBuilder extensions are used extensively.
Both of these libraries are pre-installed if you simply clone the project, but you will need to add them yourself if you want to use FancyTextRendering in another project.