MarkdownRenderer

The MarkdownPanel is a FloatingTile that can be used to display the documentation for your plugin using the markdown syntax. However for some use cases, this is overkill and requires to setup a file directory (unless you give it a custom string to parse).

If you need more customizability, you can now create an object of this type using Content.createMarkdownRenderer() and use it to render dynamic markdown text directly on a Panel (or any other paint callback with a Graphics object like LAF functions).

In order to use it, create an object, give it a string to display, set the width of the render area (so that it can calculate the line breaks and layout) and then call Graphics.drawMarkdownText() in order to render it on your panel.

Class methods

getStyleData

Returns the current style data.

MarkdownRenderer.getStyleData()

Returns an object containing the style information for the markdown text.

setImageProvider

Creates an image provider from the given JSON data that resolves image links.

MarkdownRenderer.setImageProvider(var data)

This function lets you define an image provider which is used to resolve image links in the markdown text

By default, the image rendering is non-functional when using a MarkdownRenderer, but you can supply it with image files and even Path objects to render a path. The parameter you pass in must be a JSON object with a list of metadata objects that will be used to determine how to resolve image links.

Property	Type	Description
URL	String	the URL that points to the image. Should be a relative and valid markdown link URL
Type	"Path" or "Image"	A string describing the type of the image - whether its a (pooled) image or a monochromatic icon rendered from a path.
Data	String or Path	Depending on the type, this must either be a image reference (using the {PROJECT_FOLDER} ) wildcard or a reference to a path object. Note: You can also just pass in the Base64 string describing the path so you don't need to create a path object just for this function.
Colour	32bit (ARGB)	the colour of the path (only useful when rendering a path obviously).

Note that you can use the non-standard syntax of defining the size of the path inside the link:

• if you want it to have an absolute size, use ![](link-to-image:80px) .
• if you want it to have a relative size, use ![](link-to-image:50%)

Example:

const var md = Content.createMarkdownRenderer();

const var p = Content.createPath();

// Create a triangle
p.startNewSubPath(0.0, 0.0);
p.lineTo(1.0, 1.0);
p.lineTo(0.0, 1.0);
p.closeSubPath();

const var imageData = 
[
{
	"URL": "my-path",
	"Type": "Path",
	"Data": p,
	"Colour": Colours.blue
}];

md.setImageProvider(imageData);

md.setText("### Example\n> Please render a path like an icon\n![](/my-path:30%)this is text after the icon");

md.setTextBounds([10, 10, 200, 9000]);

const var Panel1 = Content.getComponent("Panel1");

Panel1.setPaintRoutine(function(g)
{
	g.fillAll(0xFF111111);
	g.drawMarkdownText(md);
});

setStyleData

Sets the style data for the markdown renderer.

MarkdownRenderer.setStyleData(var styleData)

Allows you to style the markdown output. In order to use it, get a JSON object with the default values using getStyleData() , then change the properties and call this method.

It's very likely that these properties will change over time (which is why I don't provide a soon-to-be-deprecated list of available properties). The best "documentation" for the available properties is using Console.print(trace(md.getStyleData())) .

setText

Set the markdown text to be displayed.

MarkdownRenderer.setText( String markdownText)

Sets the text and parses the markdown elements. You need to call this before rendering the text obviously.

If you want a newline, you need to use the raw \n character

setTextBounds

Parses the text for the specified area and returns the used height (might be more or less than the height of the area passed in).

MarkdownRenderer.setTextBounds(var area)

Call this after you've set the text in order to create the layout of the text. This will also set the absolute position in the graphics context later. The argument must be a valid Rectangle (= array of 4 float numbers), however since the height is being calculated automatically, there's absolutely no reason to NOT use 9000 as height.