设置 Markdown 输出的样式

Question

我正在使用 Sveltekit 和 SCSS 进行开发。

我一直在尝试使用标记的 npm 包将 Markdown 放到我的网站上。我已经能够使降价工作，但在设计它显示的输出样式时遇到问题。所有这些都在 .svelte 页面内。

这是 Markdown 输出的代码

import { marked } from 'marked';
import DOMPurify from 'dompurify';

let markdownContent = '';
let clean;

markdownContent = setups[0].description;

clean = DOMPurify.sanitize(marked(markdownContent));

这是 Markdown 代码的输出

我尝试在全局级别添加 css，例如 h1、h2、h3 等。但我没有应用任何样式到正在输出的 markdown。

我已经查看了我的CSS，其他所有内容都应用了样式，所以我只能相信它工作正常。

Answer 1

只有在使用

:global()

伪类时，样式才是真正全局的，因此要设置标题样式，您可以执行以下操作：

<style>
  :global(h1) { font-size: 1.5rem; }
  :global(h2) { font-size: 1.25rem; }
  ...
</style>

（使用

svelte-preprocess

，您可以拥有全局样式元素或块。）