Skip to main content

Code Hike Samples

This site uses Code Hike to enhance the code-reading experience.

Code Hike's documentation is sparse and tricky to follow at some points. This document will walk you through some basic samples of how to use Code Hike features.

The best way to learn what Code Hike is capable of is to look at some of the code accompanying the examples in the Styling portion of their documentation.

Basic Formatting​

Code Blocks​

Like traditional Markdown, CodeHike wraps code using triple backticks:


_10
## Lorem Ipsum
_10
_10
```javascript
_10
console.log("Hello world!");
_10
```
_10
_10
Dolor **sit** amet

If you add a title after the language, Code Hike will modify the UI to feature the filename (as in the example below):

lorem.md

_10
## Lorem Ipsum
_10
_10
```javascript hello.js
_10
console.log("Hello world!");
_10
```
_10
_10
Dolor **sit** amet

Annotations​

Annotations allow you to add focus to code by highlighting lines or inline tokens:

lorem.md

_10
## Lorem Ipsum
_10
_10
```javascript hello.js focus=1,2[12:28]
_10
console.log("Hello world!");
_10
console.log("Goodbye world!")
_10
```
_10
_10
Dolor **sit** amet

The Annotations documentation is very thorough for this feature.

Custom Components​

There are a few components that ship with Code Hike that provide additional features beyond what is capable with traditional triple backtick code blocks.

<CH.Code>​

When you include more than one code block inside a <CH.Code> component, Code Hike will show them as tabs:


_11
<CH.Code>
_11
_11
```python one.py
_11
print("Hello, one!")
_11
```
_11
_11
```python two.py
_11
print("Hello, two!")
_11
```
_11
_11
</CH.Code>

one.py
two.py

_10
print("Hello, one!")

You can also show multiple files at the same time in panels. Use a divider --- to separate the tabs:


_13
<CH.Code>
_13
_13
```python one.py
_13
print("Hello, one!")
_13
```
_13
_13
---
_13
_13
```python two.py
_13
print("Hello, two!")
_13
```
_13
_13
</CH.Code>

one.py

_10
print("Hello, one!")

two.py

_10
print("Hello, two!")

<CH.Section>​

You can use <CH.Section> to reference code from a section of text. Using a special syntax, you can write inline code with the appropriate language syntax.

Code mentions are a way to link code and text:


_10
<CH.Section>
_10
_10
```python
_10
def lorem(ipsum):
_10
ipsum + 1
_10
```
_10
_10
Hello, [hover me](focus://1[5:16])
_10
_10
</CH.Section>


_10
def lorem(ipsum):
_10
ipsum + 1

Hello, hover me

<CH.Scrollycoding>​

This feature is easier to demo than explain. Look at this doc's source code to see how the display below was generated:

Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Nova in illis at dabat legi harundine non, ova miratur? Quid in sole aer ad diffusa illis voluisti fidensque coniugiale laniata curam. Aras rivus eripuit, qua fistula haec partus; serpens, negat.

Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.

app.js

_26
const { lorem, ipsum } = dolor({
_26
sit: {
_26
amet: 1,
_26
consectetur: 2,
_26
adipiscing: (elit) => ({
_26
sed: elit,
_26
}),
_26
eiusmod: (tempor) => ({
_26
incididunt: tempor,
_26
}),
_26
ut: (labore) => ({
_26
et: labore,
_26
dolore: labore + 1,
_26
}),
_26
magna: (aliqua) => ({
_26
ut: aliqua,
_26
}),
_26
nostrud: (elit) => ({
_26
exercitation: elit,
_26
ullamco: elit,
_26
}),
_26
laboris: (elit) => ({
_26
nisi: elit,
_26
}),
_26
},
_26
})

Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.

Praesent elementum facilisis leo vel fringilla est ullamcorper eget.

Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.

Morbi quis commodo.

app.js

_26
const { lorem, ipsum } = dolor({
_26
sit: {
_26
amet: 1,
_26
consectetur: 2,
_26
adipiscing: (elit) => ({
_26
sed: elit,
_26
}),
_26
eiusmod: (tempor) => ({
_26
incididunt: tempor,
_26
}),
_26
ut: (labore) => ({
_26
et: labore,
_26
dolore: labore + 1,
_26
}),
_26
magna: (aliqua) => ({
_26
ut: aliqua,
_26
}),
_26
nostrud: (elit) => ({
_26
exercitation: elit,
_26
ullamco: elit,
_26
}),
_26
laboris: (elit) => ({
_26
nisi: elit,
_26
}),
_26
},
_26
})

Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu.

  • Nisi lacus sed viverra tellus in
  • Nibh cras pulvinar mattis nunc sed
  • Luctus accumsan tortor posuere ac

Ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.

app.js

_23
const { lorem, ipsum } = dolor({
_23
sit: {
_23
amet: 1,
_23
consectetur: 2,
_23
adipiscing: (elit) => ({
_23
sed: elit,
_23
}),
_23
eiusmod: (tempor) => ({
_23
incididunt: tempor,
_23
}),
_23
ut: (labore) => ({
_23
et: lorem(labore * ipsum),
_23
dolore: lorem(labore + 1),
_23
}),
_23
nostrud: (elit) => ({
_23
exercitation: elit,
_23
ullamco: elit,
_23
}),
_23
laboris: (elit) => ({
_23
nisi: elit,
_23
}),
_23
},
_23
})

Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt.

Sed blandit libero volutpat sed cras.

  • Nisi lacus sed viverra tellus in
  • Nibh cras pulvinar mattis nunc sed

Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae.

app.js

_23
const { lorem, ipsum } = dolor({
_23
sit: {
_23
amet: 1,
_23
consectetur: 2,
_23
adipiscing: (elit) => ({
_23
sed: elit,
_23
}),
_23
eiusmod: (tempor) => ({
_23
incididunt: tempor,
_23
}),
_23
ut: (labore) => ({
_23
et: lorem(labore * ipsum),
_23
dolore: lorem(labore + 1),
_23
}),
_23
nostrud: (elit) => ({
_23
exercitation: elit,
_23
ullamco: elit,
_23
}),
_23
laboris: (elit) => ({
_23
nisi: elit,
_23
}),
_23
},
_23
})

Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.

Praesent elementum facilisis leo vel fringilla est ullamcorper eget.

Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat.

Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra.

  • Fringilla ut morbi tincidunt augue interdum velit euismod.
  • Luctus accumsan tortor posuere ac ut consequat semper viverra.

Morbi quis commodo.

app.js

_23
const { lorem, ipsum } = dolor({
_23
sit: {
_23
amet: 1,
_23
consectetur: 2,
_23
adipiscing: (elit) => ({
_23
sed: elit,
_23
}),
_23
eiusmod: (tempor) => ({
_23
incididunt: tempor,
_23
}),
_23
ut: (labore) => ({
_23
et: lorem(labore * ipsum),
_23
dolore: lorem(labore + 1),
_23
}),
_23
nostrud: (elit) => ({
_23
exercitation: elit,
_23
ullamco: elit,
_23
}),
_23
laboris: (elit) => ({
_23
nisi: elit,
_23
}),
_23
},
_23
})

Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Nova in illis at dabat legi harundine non, ova miratur? Quid in sole aer ad diffusa illis voluisti fidensque coniugiale laniata curam. Aras rivus eripuit, qua fistula haec partus; serpens, negat.

Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.

Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.

Praesent elementum facilisis leo vel fringilla est ullamcorper eget.

Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.

Morbi quis commodo.

Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu.

  • Nisi lacus sed viverra tellus in
  • Nibh cras pulvinar mattis nunc sed
  • Luctus accumsan tortor posuere ac

Ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.

Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt.

Sed blandit libero volutpat sed cras.

  • Nisi lacus sed viverra tellus in
  • Nibh cras pulvinar mattis nunc sed

Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae.

Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.

Praesent elementum facilisis leo vel fringilla est ullamcorper eget.

Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat.

Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra.

  • Fringilla ut morbi tincidunt augue interdum velit euismod.
  • Luctus accumsan tortor posuere ac ut consequat semper viverra.

Morbi quis commodo.

app.js

_26
const { lorem, ipsum } = dolor({
_26
sit: {
_26
amet: 1,
_26
consectetur: 2,
_26
adipiscing: (elit) => ({
_26
sed: elit,
_26
}),
_26
eiusmod: (tempor) => ({
_26
incididunt: tempor,
_26
}),
_26
ut: (labore) => ({
_26
et: labore,
_26
dolore: labore + 1,
_26
}),
_26
magna: (aliqua) => ({
_26
ut: aliqua,
_26
}),
_26
nostrud: (elit) => ({
_26
exercitation: elit,
_26
ullamco: elit,
_26
}),
_26
laboris: (elit) => ({
_26
nisi: elit,
_26
}),
_26
},
_26
})

<CH.Spotlight>​

Spotlight is similar to Scrollycoding but differs in that the user must activate the next step by click. Look at this doc's source code to see how the display below was generated:

Change focus

Or change the code

Or change the file

Just make sure to leave enough veritcal whitespace to make a readable example!

app.js

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

<CH.Slideshow>​

The <CH.Slideshow> component provides a display where the user can step through code documentation as if it were a slideshow. Look at this doc's source code to see how the display below was generated:

src/index.js

_10
import React from "react"
_10
import ReactDOM from "react-dom"
_10
_10
const app = React.createElement(
_10
"h1",
_10
{ style: { color: "teal" } },
_10
"Hello React"
_10
)
_10
_10
ReactDOM.render(app, document.getElementById("root"))

React provides a createElement function to declare what we want to render to the DOM

Contents