Skip to content

[BUG] 新建 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

    标签

    No labels
    No labels

    Type

    No type

    项目

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions