How to use Markdown for a content template

Introduction

You can use Markdown "a lightweight markup language" as defined at Wikipedia, when creating the templates for your Infowindow and Listing content

The goal is to write a template in plain text format including your data within {{datasheet-header}} placeholders, that would later render as rich HTML content
The Markdown template is a (premium) option for the Infowindow and the default option for the Listing (see more on Preferences under Infowindow and Listing)
On the add-on Preferences under Infowindow and Listing, there is a Markdown editor with a realtime rendering view
There is a lot of documentation about Markdown and at the bottom of this page we include some relevant links as well
- Otherwise, we can also "learn by example(s)" or in other words "copy - paste - try -edit - done"

Markdown snippets/renders as suggestions

In addition / combination with the standard Markdown you can also use simple html markup if you feel comfortable doing that.

Find below some examples just as a reference

Infowindow template with plain markdown

### {{Name}} ({{Choice}})

{{Category}} >> [{{Feature}}]({{Extras}})

![]({{Picture}})

> {{Notes}}

just minimal simple markdown

Infowindow template with sticky header

## {{Name}} ({{Choice}})

</div>

[More details on {{Feature}}]({{Extras}} " ")\

[![]({{Picture}})]({{Picture}})

> {{Notes}}

the sticky style provides the header-like behaviour for the div content | the empty line before the markdown header within the div is required | the space " " as title in the link shows as a square-arrow image

Listing template with plain markdown

### {{Name}} ({{Choice}}, {{Range}})

{{Category}} >> with [{{Feature}}]({{Extras}}) feature

> {{Notes}}

just minimal simple markdown

TL;DR (Notes and References)

As a Markdown parser and compiler, we are using marked (documentation, demo and library)
As a sanitizer for the HTML output we use DOMPurify (library and documentation)
Also available the GitHub Markdown style as a CSS file (style-sheet and demo page)

Report abuse