These are the old docs. Code Hike v1.0 is out! Read the announcement.

Annotations

Annotations allow you to change how the code is displayed and also to add interactivity.

There are two ways to add annotations:

  • using the codeblock metastring
  • using comments inside the code

```py focus=2 mark=4[6:8]
print(1)
print(2)
print(3)
# focus
print(4)
# link[1:8] http://foo.com
print(5)
```

The current stable annotations are:

  • focus: keep the targeted code bright while dimming the rest
  • mark: add a background color to the targeted tokens
  • withClass: add a class to the targeted code
  • link: add links inside the code
  • from: include code from external files

First, let's see the syntax to target different parts of the code.

Metastring syntax

Some examples:

focus=1 selects the first line

focus=3:5 selects the range of lines 3 to 5

focus=7[7:9] selects the columns 7 to 9 of the seventh line

focus=1,3:5,7[1:4,7:9] combines the above examples


_10
123456789012345678
_10
aaaaaaaaaaaaaaaaaa
_10
123456789012345678
_10
aaaaaaaaaaaaaaaaaa
_10
123456789012345678
_10
aaaaaaaaaaaaaaaaaa
_10
123456789012345678
_10
aaaaaaaaaaaaaaaaaa
_10
123456789012345678

Comment syntax

The syntax for comment annotations is slightly different.

// focus selects the line after the comment

// focus(1,3) selects the first and third line after the comment

// focus[3:8] selects the columns 3 to 8 of the line after the comment

// focus(1,3[3:8]) selects the next line and the columns 3 to 8 of the third line after the comment


123456789012345678
aaaaaaaaaaaaaaaaaa
123456789012345678
aaaaaaaaaaaaaaaaaa
123456789012345678
aaaaaaaaaaaaaaaaaa
123456789012345678
aaaaaaaaaaaaaaaaaa
123456789012345678

Currently, we don't support comment syntaxes for several programming languages. The two supported are // comment for C-style languages and the # comment for python, bash, etc. In the future, all languages will be supported, you can follow this issue for updates.

focus annotation

With the focus annotation, you can highlight a specific part of the code and dim the rest.

The other functionality of the focus annotation is to make sure the focused code is visible without the need to scroll:

focus=7

focus=2

focus=14


_15
123456789012345678
_15
aaaaaaaaaaaaaaaaaa
_15
123456789012345678
_15
aaaaaaaaaaaaaaaaaa
_15
123456789012345678
_15
aaaaaaaaaaaaaaaaaa
_15
123456789012345678
_15
aaaaaaaaaaaaaaaaaa
_15
123456789012345678
_15
aaaaaaaaaaaaaaaaaa
_15
123456789012345678
_15
aaaaaaaaaaaaaaaaaa
_15
123456789012345678
_15
aaaaaaaaaaaaaaaaaa
_15
123456789012345678

mark annotation

Sometimes you want to highlight code without dimming the rest. You can use the mark annotation to do that.

You can use it to highlight lines:

your.mdx

```py
print("This is line 1")
# mark
print("This is line 2")
print("This is line 3")
```

Or you can use it inline, for tokens:

your.mdx

```py
# mark[7:11]
class Lorem:
def dolor(self):
# mark[5:10]
return "sit"
```

If you want to change the background or any other style, you can pass a CSS class to the annotation:

your.mdx

```py
# mark[16:24] my-colors
print("This is Code Hike")
```

your.css

.my-colors {
outline: 2px solid royalblue;
background: navy !important;
}

withClass annotation

If you want to add a CSS class to a part of the code, without the default styles of mark, you can use the withClass annotation.

your.mdx

```py
# withClass[7:16] my-class
print("hover me")
```

your.css

.my-class {
display: inline-block;
border-radius: 4px;
outline: dotted 1px;
transition: 0.2s;
}
.my-class:hover {
transform: scale(1.5) rotate(-14deg);
}

You can only use withClass annotations as comments.

You can add links inside the code using the link annotation. The link URL could be absolute or relative.


function lorem() {
// link[7:14] https://codehike.org
let codehike = "be great";
// link[10:17] #mark-annotation
return codehike
}

You can only use link annotations as comments.

from annotation

Instead of writing the code inside the MDX file, you can use the from annotation to import it from another file.

src/your.mdx
src/assets/my-file.py

```py hello.py
# from ./assets/my-file.py
```

The path is relative to the MDX file.

If you want to import only a portion of the file, you can pass the starting and ending line number after the file path:

src/your.mdx
src/assets/my-file.py

```py hello.py
# from ./assets/my-file.py 2:3
```