Content

<Content /> 组件显示渲染的 markdown 内容。在创建自己的主题时很有用。

<template>
  <h1>Custom Layout!</h1>
  <Content />
</template>

我们往往通过覆盖Content中的样式，实现自定义markdown渲染

<Content id="page-content" :class="['markdown-main-style', { 's-card': frontmatter.card }]" />

:deep(.markdown-main-style) {
  // 标题
  div > {
    h1 {
      font-size: 2rem;
      text-align: center;
      border-bottom: 1px dashed var(--main-color-bg);
      padding-bottom: 1rem;
      .header-anchor {
        &::before {
          display: none;
        }
      }
    }
    //...
  }