A Shiki extension for annotating code with twoandhalfslash comments.

Add floating labels to your code samples using twoandhalfslash comments.

❦

Install

Usage

Add the following CSS to your project:

Shiki transformer configuration:

Vitepress configuration:

Syntax

//^ content[^arrow[,x[,y]]]

• content the text to show in the floating label
• arrow the direction the arrow is pointing to, default is left
• x horizontal offset in CSS units, default is 0
• y vertical offset in CSS units, default is 0

Example

The following comments

//^ time package^left,.5em,-.9em

//^ time object^up,-4em,1em

on the following GO language code sample produces the labels:

Styling

CSS variables to customize the appearance:

❦

Story

It started as a joke, a bunch of scripts to enhance internal documentation code examples, inspired by the great work of Twoslash.

Some of my coworkers ask me for the scripts, so instead I created this package.

Inspired by Ttwoslash