Omniscope Custom Blocks › Preparation/Markdown-to-HTML

Markdown to HTML

Converts Markdown text in a field (bold, lists, links, headings, tables) to HTML in a new field, keeping the other fields.

Preparation Python

Open the demo in Omniscope Download demo.ioz Sample data: product-descriptions.csv Source on GitHub

Omniscope custom block · Preparation

Descriptions written with asterisks, dashes and pipes? Real bold, lists, links and tables as HTML, next to the record they belong to.

Python · pandas, Python-Markdown · Python-Markdown installed on first run

The problem it solves

A product catalogue keeps its descriptions in Markdown, because that is what the buying team writes in: bold for the material, bullet lists for the dimensions, a link to a guide, a small table of sizes. Shown as it is, the text is full of asterisks, dashes and pipes; a web page, an email or a view that displays HTML needs HTML.

This block converts each record's Markdown to HTML in a new field, keeping the product's other fields beside it.

How it works

What goes in

Product descriptions

7 invented products from a garden supplies catalogue, with descriptions in Markdown.

SKU Product Description
PL-30 Terracotta pot 30cm Frost-resistant **terracotta**, hand-finished.
- 30 cm across, 26 cm tall
- Drainage hole and saucer
- Made in Italy
CP-50 Peat-free compost 50L ... for *pots and borders*. See our [growing guide](https://example.com/guides/compost) ...
HR-01 Hose reel with 25m hose ## What's included
1. Wall-mounted reel
2. 25 m reinforced hose ...
WC-09 Watering can 9L | Size | Capacity | Weight | ... (a table)
NT-04 Netting 4m

7 rows in the sample file.

The options

Option Demo setting What it does
Markdown field Description The text field holding Markdown.
HTML field name HTML The new field.
Keep the input fields ticked SKU, Product and Description stay beside the HTML.
Tables, fenced code and footnotes ticked WC-09's size table becomes an HTML table.

What comes out

Products with HTML (selected records)

SKU HTML
PL-30 <p>Frost-resistant <strong>terracotta</strong>, hand-finished.</p><ul><li>30 cm across, 26 cm tall</li>...</ul>
CP-50 <p>Peat-free, multi-purpose compost for <em>pots and borders</em>.</p><p>See our <a href="https://example.com/guides/compost">growing guide</a> ...</p>
HR-01 <h2>What's included</h2><ol><li>Wall-mounted reel</li>...</ol>
WC-09 <table><thead><tr><th>Size</th><th>Capacity</th><th>Weight</th></tr></thead>...</table>
NT-04

7 records, 4 fields (line breaks inside the HTML not shown). Untick the extensions and WC-09's table stays a paragraph of pipes.

Where it pays off

Retail: Product descriptions for the web

Convert descriptions kept in Markdown into the HTML a shop page or a product feed expects.

Communications: Formatted emails

Build the body of a scheduled email (a weekly summary, an alert) from Markdown text assembled in the workflow.

Support and project tools: Comments and notes

Ticket comments and notes exported in Markdown can be shown formatted in a report instead of as raw markup.

Documentation: Release notes

Turn release notes written in Markdown into HTML for a web page or a newsletter.

Use cases describe typical scenarios and are illustrative; the sample data is invented.

Why do this in Omniscope

How it fits into an Omniscope workflow

Product list (File or Database) → Markdown to HTML → Join (stock and prices) → Output (file or email) or Report

Try it

  1. Open the demo project (demo.iox on the demo server, or import demo.ioz from this folder): 7 products with Markdown descriptions.
  2. The question: what does each description look like as HTML?
  3. Open Markdown to HTML: Markdown field Description. Run it.
  4. Look at the HTML field: <strong>, <ul>, <a href>, <h2>, <table>, and an empty value for NT-04.
  5. Untick Tables, fenced code and footnotes and run again: WC-09's table comes out as a paragraph of pipes.

Running in Omniscope

Omniscope workflow
Omniscope workflow

The demo project's workflow: the sample data, the block, and a Validate data check on its output.

Language and libraries

Python. It uses pandas and Python-Markdown.

pandas is part of Omniscope's Python environment. Python-Markdown (markdown) is listed in the block's dependencies, so Omniscope installs it with pip on first run if it is missing.

Tested

The block is covered by automated tests that run its script against a stand-in for Omniscope's Python API: the sample data, empty values, input fields kept and dropped, the HTML field's name and in-place conversion, the extensions on and off, footnotes per record, number fields, empty input and bad options, HTML passed through, and 20,000 records.

Reference

Fields it reads

NameTypeWhat it does
Markdown fieldFieldThe text field holding Markdown.

Options

NameTypeWhat it does
HTML field nameTextName of the new field holding the HTML. Use the Markdown field's name to replace it.
Keep the input fieldsYes / noOutput the input fields with the HTML field after them. Unticked, only the HTML field.
Tables, fenced code and footnotesYes / noAlso convert tables, fenced code blocks, footnotes, abbreviations, definition lists and attribute lists (the 'extra' extension). Unticked: standard Markdown only.

Outputs

OutputWhat it holds
HTMLThe input records with the Markdown converted to HTML in a new field.