Unified with Remark, FrontMatter and Shiki

remark.ts

/*
* usage:
*
* // parse markdown
* const file = await parseMarkdown('posts/foo.md')
* 
* // extract front matter
* const { title, summary, date, author, tags } = file.data.matter
*
* // access html
* file.value
*/

import remarkRehype from 'remark-rehype'
import remarkFrontmatter from 'remark-frontmatter'
import remarkParse from 'remark-parse'
import remarkStringify from 'remark-stringify'
import remarkHTML from 'remark-html'
import rehypeShiki from '@shikijs/rehype'
import rehypeStringify from 'rehype-stringify'
import { unified } from 'unified'
import type { VFile } from 'vfile'
import { read } from 'to-vfile'
import { matter } from 'vfile-matter'

export async function parseMarkdown(path: string): Promise<VFile> {
  const file = await unified()
    .use(remarkParse)
    .use(remarkStringify)
    .use(remarkFrontmatter, ['yaml'])
    .use(remarkHTML)
    .use(remarkRehype)
    .use(rehypeShiki, {
      langs: ['javascript', 'html', 'css'],
      themes: {
        light: 'vitesse-light',
        dark: 'vitesse-dark'
      }
    })
    .use(rehypeStringify)
    .use(() => (tree, file) => {
      matter(file)
    })
    .process(await read(path))

  return file
}