markdown と格闘

ssg svelte markdown

post に TOC を付けようとして試行錯誤。 直接 remark と rehype した。 TOC を本文と離れたところ(sidebar) に出すべく弄っていたのだが、 最終的に2回 remark すればいいじゃん、となった。 slug が同じになるのが条件だが、同じになっている。 gatsby のときとか、markdown のオプション複雑でむずいなーと思っていたが、 直接触ってみればそうでもなかった。 remark / rehype がラップされることで解りにくくなっているかもしれない。

見出し

Hoge

Fuga

<script lang="ts">
  // 抜粋


  // body
  const mkBody = unified()
    // mdast
    .use(remarkParse)
    // hast
    .use(remark2rehype)
    .use(rehypeSlug)
    .use(rehypeHighlight)
    .use(rehypeStringify);
  const body = mkBody.processSync(data.body).value;


  const mkToc = unified()
    // mdast
    .use(remarkParse)
    // hast
    .use(remark2rehype)
    .use(rehypeSlug)
    .use(rehypeToc, {})
    .use(onlyToc)
    .use(rehypeStringify);
  const toc = mkToc.processSync(data.body).value;


</script>


<div class="container">
  <div class="toc">
    <div class="markdown">
      {@html toc}
    </div>
  </div>
  <div class="body">
    <PostTitle post={data} />
    <div class="markdown">
      {@html body}
    </div>
  </div>
</div>
👈新

svelte static の画像

ssg svelte

だいぶ手が拡がってしまった

ssg svelte