在 strapi Markdown 文本字段中向 table 添加样式

Question

目前，我在 strapi 中有一个富文本字段，其内容使用 markdown。我想在其中添加一个 table 所以我写了以下代码：

<table style="border:2">
  <tbody>
    <tr>
      <td>
        <strong>Country</strong>
      </td>
      <td>
        <strong>Visa free</strong>
      </td>
      <td>
        <strong>Visa on arrival</strong>
      </td>
      <td>
        <strong>eVisa</strong>
      </td>
      <td>
        <strong>Duration of stay and notes</strong>
      </td>
    </tr>
    <tr>
  </tbody>
  </table>

这会在网页上产生以下输出：

我希望至少有一个实心边框 table。

以下是我的 React 代码，用于显示来自 strapi 的丰富内容：

<ReactMarkdown children={posts.Content} remarkPlugins={[remarkGfm]} />

我也尝试过以下操作：

| Col1Row1    | Col2Row1  |
| Col1Row2    | Col2Row2  |
| Col1Row3    | Col2Row3  |
| Col1Row4    | Col2Row4  |
| Col1Row5    | Col2Row5  |
| Col1Row6    | Col2Row6  |
| Col1Row7    | Col2Row7  |

但这给了我这个输出：

Answer 1

首先，strapi 中的富文本编辑器是一个 markdown 编辑器，因此它不能正确理解和解释 HTML。为了使用 markdown 生成 table，你必须遵循 markdown cheat sheet.

此外，在前端你必须使用 markdown parser 来正确解释和显示降价。

示例 table markdown 语法

| Col1Row1    | Col2Row1  |
|-------------|-----------|
| Col1Row2    | Col2Row2  |
| Col1Row3    | Col2Row3  |
| Col1Row4    | Col2Row4  |
| Col1Row5    | Col2Row5  |
| Col1Row6    | Col2Row6  |
| Col1Row7    | Col2Row7  |

Markdown 输出

Col1Row1	Col2Row1
Col1Row2	Col2Row2
Col1Row3	Col2Row3
Col1Row4	Col2Row4
Col1Row5	Col2Row5
Col1Row6	Col2Row6
Col1Row7	Col2Row7

React 中的示例 Markdown 解析器实现

import React from 'react'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = `Just a link: https://reactjs.com.`

ReactDom.render(
  <ReactMarkdown children={markdown} remarkPlugins={[remarkGfm]} />,
  document.body
)

注意：

确保你没有任何 CSS 样式隐藏 table 上的边框显示，否则你会浪费很多花一点时间调试降价。

P.S：您可以使用 this 伟大的工具轻松地为复杂的 table 生成降价并查看更改实时。

在 strapi Markdown 文本字段中向 table 添加样式

Adding styles to a table in strapi Markdown text field

markdown

reactjs

strapi

示例 table markdown 语法

Markdown 输出

React 中的示例 Markdown 解析器实现

注意：