# 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 `mark`.

```js
function foo() {
  // mark
  console.log("lorem ipsum")
  return 8
}
```

You can pass a string parameter to comment annotations

```js index.js
function lorem(ipsum, dolor = 1) {
  // mark(1:3) line-through
  const sit = ipsum == null && 0
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}

function adipiscing(...elit) {
  console.log(elit)
  // withClass[19:38] line-through
  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
t11s
Vincent Schramer
Glenn Gillen
Michael Carter
Jesse Hall

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 mark.


function foo() {
console.log("lorem ipsum")
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)
}