清理HTML格式以获得更好的pre标签/ HighlightJS输出

Question

使用Vue开发小型内部组件库。我使用的是highlightjs vue包装器程序包，它很好，但是想看看是否有可能在不影响编辑方面的情况下获得更好的输出。

当前的工作方式是，我有一个主要的“组件模板”组件，该组件具有一些名称槽，其中包括一些代码块。

// component-template
<div class="component-codearea">
    <div class="component-codearea-title">CSS</div>
    <pre v-highlightjs><code class="css" v-remove><slot name="css"></slot></code></pre>
</div>

在另一个包含该插槽内容的vue文件中，我目前必须将代码块包装在HTML注释中，并将其全部对齐到左侧：

<template>
    <component-template>

<template slot="css"><!--
-->.library\:btn {
    display: inline-block;
    appearance: none;
}
.library\:btn--001 {
    background-color: #cacaca;
    padding: 10px 20px;
    font-size: 20px;
    color: white;
}<!--
--></template>

    </component-template>
</template>

我真的想适当地嵌套名为css的css，但当然pre标签会输出其他新行以及所有空格等，在输出中看起来是

我可以在vue过滤器中写一些JS来清理空白吗？

谢谢。