VitePress Plugin Annotations

hello

{
  markdown: {
    codeTransformers: [annotationsTransformer 1],
    config: (md) => {
      md.use(annotationsPlugin 2); 3
    },
  },
}

1
shiki transformer
2
markdown-it plugin
3
Three (here's some code): Hello World my name is lol
hello this is some more indented stuff:
- Hello
- World
- My
- Name
- Is:
1. One
2. Two
3. Hello jnsadjknckjsdnckjnskcnsdkcjnsdkcnsdkjcnsdkcnsdkjsdckjdsncks kjdnsckjdsncksdnci
4. To you!
md
```
Hello World!nldnlncjsdnckjdsnckjdsnckjdsnckjsdnckjsndkcjnsdkjcnsdkjncksdjncks daskldjas aslk jdasj alskdj aslkj aslkd jaslkd j lksadj laksdj lkjd salkdj laskdj
```
4
Four jhsdlasjdasjdlkasjdla kjlasdj lasjd laskjd lasjdlk ajsdl jasldj aslkdj laskdj laskjd lasjd lkasjd lkasj
5
Five
6
Six
7
Seven
8
Eight
9
Nine
10
Ten (double digit)

import { defineConfig } from "vitepress";
import { annotationsPlugin, annotationsTransformer } from "vitepress-plugin-annotations";

export default defineConfig({
  title: "VitePress Plugin Annotations",
  description: "A VitePress site with the annotations plugin.",
  themeConfig: {
    socialLinks: [{ icon: "github", link: "https://github.com/its-miroma/vpa" }],
  },

  markdown: {
    codeTransformers: [
      annotationsTransformer("--shiki-light:#6A737D;--shiki-dark:#6A737D") 1,
    ],
    config: (md) => {
      md.use(annotationsPlugin 2);
    },
  },
});

1shiki transformer
2markdown-it plugin

import DefaultTheme from "vitepress/theme";

import "vitepress-plugin-annotations/client/style.css"; 1
import "./style.css"; 2

export default DefaultTheme;

1Possibility 1: import directly in index.ts. This may also require env.d.ts with the contents below.
2Possibility 2: import within style.css. See below
INFO
Hello

declare module "*.css" {
  const content: any;
  export default content;
}

css

@import "vitepress-plugin-annotations/client/style.css";

VitePress Plugin Annotations ​

VitePress Plugin Annotations