# Comment annotations

You can use comments inside the code to make the focus relative.

```js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null && 0;
  dolor = sit - amet(dolor);
  // focus
  return sit ? consectetur(ipsum) : [];
}

// focus(1:4)
function adipiscing(...elit) {
  console.log(elit);
  return elit.map((ipsum) => ipsum.sit);
}

// focus[13:17]
console.log("hey");
```

Same with other annotations like `bg` and `box`.

```js
// bg(1:2)
function foo() {
  console.log("hover me");
  // box[3:10]
  return 8;
}
```

You can pass a string parameter to comment annotations

```js index.js
function lorem(ipsum, dolor = 1) {
  // bg(1:3) linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%)
  const sit = ipsum == null && 0;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum) : [];
}

function adipiscing(...elit) {
  console.log(elit);
  // box[19:38] aqua
  return elit.map((ipsum) => ipsum.sit);
}
```

## Links and labels

And now we introduce two more annotations: `link` and `label`

```js focus=4,8
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null && 0;
  dolor = sit - amet(dolor);
  // link[16:26] https://github.com/code-hike/codehike
  return sit ? consectetur(ipsum) : [];
}

function adipiscing(...elit) {
  // label something something
  console.log("hover me");
  return elit.map((ipsum) => ipsum.sit);
}
```
This demo is sponsored by
Stefan Judis
Frazer
Daniel Gray
Rich Haines
Cody

Comment annotations

You can use comments inside the code to make the focus relative.


function lorem(ipsum, dolor = 1) {
const sit = ipsum == null && 0;
dolor = sit - amet(dolor);
return sit ? consectetur(ipsum) : [];
}
function adipiscing(...elit) {
console.log(elit);
return elit.map((ipsum) => ipsum.sit);
}
console.log("hey");

Same with other annotations like bg and box.


function foo() {
console.log("hover me");
return 8;
}

You can pass a string parameter to comment annotations

index.js

function lorem(ipsum, dolor = 1) {
const sit = ipsum == null && 0;
dolor = sit - amet(dolor);
return sit ? consectetur(ipsum) : [];
}
function adipiscing(...elit) {
console.log(elit);
return elit.map((ipsum) => ipsum.sit);
}

Links and labels

And now we introduce two more annotations: link and label


function lorem(ipsum, dolor = 1) {
const sit = ipsum == null && 0;
dolor = sit - amet(dolor);
return sit ? consectetur(ipsum) : [];
}
function adipiscing(...elit) {
console.log("hover me");
return elit.map((ipsum) => ipsum.sit);
}