https://github.com/ziv/twoandhalfslash
twoandhalfslash
https://github.com/ziv/twoandhalfslash
Last synced: 8 months ago
JSON representation
twoandhalfslash
- Host: GitHub
- URL: https://github.com/ziv/twoandhalfslash
- Owner: ziv
- Created: 2025-08-27T07:28:38.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-08-27T10:08:59.000Z (9 months ago)
- Last Synced: 2025-08-27T15:12:34.831Z (9 months ago)
- Language: JavaScript
- Size: 395 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
//^
two and a half slashes
---
A [Siki](https://siki.dev) extension for annotating code with
_**twoandhalfslash**_ comments.
## Usage
```shell
npm instsall twoandhalfslash
```
Add transformer to your Shiki config:
```javascript
import {codeToHtml} from "shiki";
const html = codeToHtml(code, {
theme: "github-light",
lang: "javascript",
transformers: [
twoandhalfslash(),
],
});
```
## Syntax
* Start a comment (prefix) with `//^` (two slashes, a caret, and a space).
* After the prefix, the command is annotated in square brackets `[]`.
* The arguments are separated by carets `^`.
* The first argument is the command name.
```
//^ [command^arg1^arg2^...]
```
All annotations require additional CSS to be applied.
#### Banner
Add a block element with the content will replace the comment. Add `ths-banner` class to the parent element.
```javascript
//^ [b^content]
```
#### Floating Label
Add a floating label to an element under the cursor (`^`). Add `ths-floater` class to the parent element.
```javascript
const date = new Date();
//^ [f^..........^content]
```
#### Linker
Convert text into a link. First argument is the text to be converted, second argument is the URL, and a third argument
is the link title.
```javascript
const arr = new Int8Array(10);
//^ [l^Int8Array^https://developer.mozilla.org^check out docs]
```
### Example
The results of the above examples with CSS applied:
