Markdown in text

The markdown extension displays the value of the text property of the text element as text with Markdown markup.

{
  "type": "text",
  "text": "# Heading\n\nText with **bold** and *italic* emphasis.",
  "extensions": [
    {
      "id": "markdown"
    }
  ]
}

The extension has no parameters.

How it works

  • The extension is applied only to the text element.

  • The set of supported Markdown constructs depends on the platform:

    • Android: Basic CommonMark syntax. Additional constructs are added with plugins of the Markwon library.
    • iOS: Headings, bold, italic, and strikethrough text, links, inline code, bulleted and numbered lists, block quotes.
    • Web: Defined by the function that converts Markdown to HTML and is passed by the application.

Connection

build.gradle

dependencies {
    implementation "com.yandex.div:div-markdown:${versions.divkit}"
}

In the code:

val divConfiguration = DivConfiguration.Builder(imageLoader)
    .extension(DivMarkdownExtensionHandler(context))
    .build()

You can pass a list of Markwon plugins as the second constructor parameter.

The handler is located in the DivKitMarkdownExtension module:

import DivKitMarkdownExtension

DivKitComponents(
  ...
  extensionHandlers: [
    MarkdownExtensionHandler()
  ]
)

DivKit doesn't contain a Markdown parsing library. Pass a function that converts Markdown to HTML to markdownExtensionBuilder:

import { markdownExtensionBuilder } from '@divkitframework/divkit/client';
import markdownit from 'markdown-it';

const md = markdownit();
const map = new Map();

map.set('markdown', markdownExtensionBuilder(str => md.render(str)));

render({
    id: 'test',
    target: element,
    json: {},
    extensions: map
});

As the second argument, you can pass an object with the cssClass field: a CSS class that is added to the container with the conversion result.

Learn more

You can discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_en.

DivKit Repository

Previous
Swipe gestures
Next
Shimmer placeholder for images