问题

你好，

我正在尝试使用Svelte创建一个Markdown预览器。我正在使用以下库来执行不同的任务：
- Marked库用于解析Markdown，
- Highlight.js用于高亮代码块，
- Sanitize-html用于清理生成的HTML以防止XSS攻击。

然而，我遇到了一个问题，即我应用于生成的HTML的自定义CSS类没有生效。以下是我正在使用的代码：

```html
<script lang="ts">
  import sanitizeHtml from 'sanitize-html';
  import { marked } from 'marked';
  import hljs from 'highlight.js';
  import { afterUpdate } from 'svelte';
  import 'highlight.js/styles/atom-one-dark.css';

  let markdown = `# 你好，世界`;

  $: html = sanitizeHtml(marked(markdown));
  afterUpdate(() => hljs.highlightAll());
  let edit = true;
</script>

<div class="container">
  <div class="editor">
    {#if edit}
      <textarea spellcheck="false" bind:value={markdown} />
    {:else}
      <div class="viewer">
        {@html html}
      </div>
    {/if}
  </div>
  <div>
    <input type="checkbox" bind:checked={edit} />
  </div>
</div>

<style>
.viewer h1 {
  font-size: 24px;
  color: #ff0000;
}
</style>

生成的h1元素没有样式

我以为可能是由于依赖冲突，所以尝试移除了所有依赖项，但仍然没有应用类。

<details>
<summary>英文:</summary>

Good day,

I am trying to create a markdown previewer using Svelte. I&#39;m using the following libraries for different tasks:
- Marked library for parsing markdown,
- Highlight.js for highlighting code blocks,
- Sanitize-html for sanitizing the generated HTML to prevent XSS attacks.

However, I&#39;m facing an issue where the custom CSS classes I apply to the generated HTML are not being applied. Here is the code I&#39;m using:

```html
&lt;script lang=&quot;ts&quot;&gt;
  import sanitizeHtml from &#39;sanitize-html&#39;;
  import { marked } from &#39;marked&#39;;
  import hljs from &#39;highlight.js&#39;;
  import { afterUpdate } from &#39;svelte&#39;;
  import &#39;highlight.js/styles/atom-one-dark.css&#39;;

  let markdown = `# Hello World`;

  $: html = sanitizeHtml(marked(markdown));
  afterUpdate(() =&gt; hljs.highlightAll());
  let edit = true;
&lt;/script&gt;

&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;editor&quot;&gt;
    {#if edit}
      &lt;textarea spellcheck=&quot;false&quot; bind:value={markdown} /&gt;
    {:else}
      &lt;div class=&quot;viewer&quot;&gt;
        {@html html}
      &lt;/div&gt;
    {/if}
  &lt;/div&gt;
  &lt;div&gt;
    &lt;input type=&quot;checkbox&quot; bind:checked={edit} /&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;style&gt;
.viewer h1 {
  font-size: 24px;
  color: #ff0000;
}
&lt;/style&gt;

The generated h1 element is not styled

I thought it might be because of the dependencies conflicts so I tried removing every dependencies but still no class is applied.

答案1

得分: 1

Svelte样式默认是有作用域的，您需要使用:global()来阻止作用域，因为通过@html生成的HTML将缺少用于作用域的类，例如：

.viewer :global(h1) { ... }

（如果您使用svelte-preprocess，您可以创建整个带有嵌套规则的:global块以减少冗余，这可能需要安装额外的预处理器，如PostCSS、SASS或LESS。）

.viewer :global(h1} { ... }