reactjs - 如何为内置的 markdown 标签应用样式？

Question

我正在学习 reactjs，我正在尝试创建一个文本编辑器，我想在其中对基于开始和结束索引选择的文本进行缩进。

我可以获取选定的文本，并且可以使用标记的包（例如**粗体和_斜体等）应用粗体、斜体，但我不能为标记的标签应用诸如text-align,之类的样式。text-decoration

如何为标记的标签应用样式？有没有其他方法可以做到这一点？

Answer 1

您需要定义 CSS 规则来设置生成的 HTML 样式。如果您希望样式仅应用于单个段落（或段落的子集），那么您可能需要在 Markdown 中使用原始 HTML 来定义段落上的类或至少定义内联样式。

正如原始语法规则所述（强调添加）：

Markdown 的语法有一个目的：用作网络写作的一种格式。

Markdown 不是 HTML 的替代品，甚至不能接近它。它的语法非常小，只对应非常小的 HTML 标记子集。我们的想法不是创建一种更容易插入 HTML 标记的语法。在我看来，HTML 标签已经很容易插入了。Markdown 的想法是让阅读、编写和编辑散文变得容易。HTML 是一种发布格式；Markdown 是一种写作格式。因此，Markdown 的格式化语法只解决了可以用纯文本传达的问题。

对于 Markdown 语法未涵盖的任何标记，您只需使用 HTML 本身。

由于 Markdown 不是一种“发布格式”，因此提供一种样式/布局文本的方法超出了 Markdown 的范围。也就是说，这并非不可能，因为您可以包含原始 HTML（并且 HTML 是一种发布格式）。例如，以下原始 HTML 将缩进一个段落：

<p style="padding-left:4em">A paragraph which is indented.<p>

或者，如果您在 CSS 中定义了一些样式：

.indent {
    padding-left: 4em;
}

然后您可以使用原始 HTML 将该类分配给一个段落：

<p class="indent">A paragraph which is indented.<p>

这样做的缺点是，根据规则，Markdown 文本不会在块级原始 HTML 标记内处理。这意味着您的链接以及粗体和斜体文本也需要使用原始 HTML 进行格式化。

另一种可能性是使用最初由 Markdown 的Markuru实现引入的非标准属性列表，后来被其他 一些 人采用（可能还有更多，但我只知道这四个）。在这种情况下，您可以为 Markdown 段落分配一个类（避免使用原始 HTML），然后使用 CSS 为该类定义布局。但是，您绝对必须使用实际支持非标准功能的少数实现之一，并且您的文档不再可移植到其他系统。