Skip to content

[BUG] New dcc.Markdown does not render markdown tables #3964

Description

@AnnMarieW

@KoolADE85 This is a breaking change from the update in #3960

As of react-markdown v5, the remark-gfm plugin is required to render tables

After the changes, this example:

dcc.Markdown(
    """
    # Products            
    
    | Product | Category | Price |
    | --- | --- | --- |
    | Apple | Fruit | $1.50 |
    | Broccoli | Vegetable | $2.25 |
    | Milk | Dairy | $3.50 |           
    
    """
),

renders like this:


Image

This is from the react-markdown README

Here is an example that shows how to use a plugin (remark-gfm, which adds support for footnotes, strikethrough, tables, tasklists and URLs directly):

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = `Just a link: www.nasa.gov.`

createRoot(document.body).render(
  <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>
)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions