Code Examples

These are examples of codeblock components you can build using Code Hike.

You can find the explanation and implementation in each example's page. Feel free to copy, paste, modify and combine them to create the perfect codeblocks for your project.

Callout

Add callouts inside your code blocks.

content.md

```js
const lorem = ipsum(dolor, sit)
// !callout[/amet/] This is a callout
const [amet, consectetur] = [0, 0]
lorem.adipiscing((sed, elit) => {
  if (sed) {
    amet += elit
  }
})
```

const lorem = ipsum(dolor, sit)
const [amet, consectetur] = [0, 0]
This is a callout
lorem.adipiscing((sed, elit) => {
  if (sed) {
    amet += elit
  }
})

See Callout implementation.

ClassName

Add a class name to a piece of code.

content.md

```js
function lorem(ipsum, dolor = 1) {
  // !className line-through
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  // !className[/sit/] bg-red-700 rounded-lg px-1
  return sit ? consectetur(ipsum) : []
}
```

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

See ClassName implementation.

Code Mentions

Add a language picker when you need to switch between languages in a code block.

content.mdx

<HoverContainer>

The [base case](hover:one) returns 1.

```cpp
int factorial(int n) {
  if (n == 0) {
    // !hover one
    return 1;
  } else {
    // !hover two
    return n * factorial(n - 1);
  }
}
```

The [recursive case](hover:two) multiplies something.

</HoverContainer>

The base case returns 1.

int factorial(int n) {
  if (n == 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

The recursive case multiplies something.

Hover the mentions

See Code Mentions implementation.

Collapse

Fold and unfold blocks of code.

content.md

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

// !collapse(1:4) collapsed
function ipsum(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : 1
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}
```

  const sit = ipsum == null ? 0 : 1
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}

}

Click on the function signature to collapse/expand the content of the function

See Collapse implementation.

Copy Button

Add a copy button to a code block.

content.md

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

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

See Copy Button implementation.

Diff

Show inserted and deleted lines.

content.md

```js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  // !diff -
  dolor = ipsum - sit
  // !diff +
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}
```


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

See Diff implementation.

File name

Show a title or file name with the code block.

content.md

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

index.js

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

See File name implementation.

Focus

Focus blocks of code. Dim the unfocused code. Ensure the focused code is visible when there's overflow.

Useful when you want to change a codeblock focus depending on the user's interaction.

content.md

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

function ipsum(ipsum, dolor = 1) {
  return dolor
}

// !focus(1:5)
function dolor(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}
```

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

function ipsum(ipsum, dolor = 1) {
  return dolor
}

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

You can also change the focus annotations on a rendered codeblock:

See Focus implementation.

Fold

Fold inline content.

content.md

```jsx
// !fold[/className="(.*?)"/gm]
function Foo() {
  return (
    <div className="bg-red-200 opacity-50">
      <span className="block">hey</span>
    </div>
  )
}
```

function Foo() {
  return (
    <div className="">
      <span className="">hey</span>
    </div>
  )
}

Click on the ... to unfold the className

See Fold implementation.

Footnotes

Append footnotes to your code.

content.md

```rb
# !ref Library import
require 'sinatra'

# !ref URL mapping
get '/hi' do
  "Hello World!"
end
```

require 'sinatra'

get '/hi' do
  "Hello World!"
end

Library import
URL mapping

See Footnotes implementation.

Language Switcher

Add a language picker when you need to switch between languages in a code block.

content.mdx

<CodeSwitcher>

```java !!
public class Main {
  public static int factorial(int n) {
    if (n == 0) {
      return 1;
    } else {
      return n * factorial(n - 1);
    }
  }
}
```

```cpp !!
int factorial(int n) {
  if (n == 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}
```

```scala !!
object Main {
  def factorial(n: Int): Int = {
    if (n == 0) {
      return 1
    } else {
      return n * factorial(n - 1)
    }
  }
}
```

```py !!
def factorial(n):
  if n == 0:
    return 1
  else:
    return n * factorial(n - 1)
```

```matlab !!
function result = factorial(n)
  if n == 0
    result = 1;
  else
    result = n * factorial(n - 1);
  end
end
```

```js !!
function factorial(n) {
  if (n === 0) {
    return 1
  } else {
    return n * factorial(n - 1)
  }
}
```

```kotlin !!
fun factorial(n: Int): Int {
  return if (n == 0) {
    1
  } else {
    n * factorial(n - 1)
  }
}
```

```go !!
func factorial(n int) int {
  if n == 0 {
    return 1
  } else {
    return n * factorial(n - 1)
  }
}
```

```swift !!
func factorial(n: Int) -> Int {
  if n == 0 {
    return 1
  } else {
    return n * factorial(n: n - 1)
  }
}
```

```rust !!
fn factorial(n: i32) -> i32 {
  if n == 0 {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}
```

```fsharp !!
let rec factorial n =
  if n = 0 then
    1
  else
    n * factorial (n - 1)
```

</CodeSwitcher>

public class Main {
  public static int factorial(int n) {
    if (n == 0) {
      return 1;
    } else {
      return n * factorial(n - 1);
    }
  }
}

Pick a different language from the dropdown to see the code block change.

See Language Switcher implementation.

Line Numbers

Display line numbers.

content.md

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

1function lorem(ipsum, dolor = 1) {
2  const sit = ipsum == null ? 0 : 1
3  dolor = sit - amet(dolor)
4  return sit ? consectetur(ipsum) : []
5}

See Line Numbers implementation.

Link

Add links to code snippets.

content.md

```js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  // !link[/ipsum/] https://example.com
  return sit ? consectetur(ipsum) : []
}
```

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

ipsum is a link to example.com

See Link implementation.

Mark

Highlight lines.

content.md

```js
function lorem(ipsum, dolor = 1) {
  // !mark
  return dolor
}

function ipsum(lorem, dolor = 1) {
  // !mark(1:2) gold
  const sit = lorem == null ? 0 : lorem.sit
  dolor = sit - amet(dolor)
  // !mark[/sit/] pink
  return sit ? consectetur(lorem) : []
}
```

function lorem(ipsum, dolor = 1) {
  return dolor
}

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

See Mark implementation.

Tabs

Show multiple code blocks in tabs.

content.mdx

<CodeWithTabs>

```js !!tabs main.js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}
```

```css !!tabs styles.css
body {
  margin: 0;
  padding: 0;
}
```

</CodeWithTabs>

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

See Tabs implementation.

Token Transitions

Animate the transition between code blocks at a token level.

content.md

```scala
object Main {
  def factorial(n: Int): Int = {
    if (n == 0) {
      return 1
    } else {
      return n * factorial(n - 1)
    }
  }
}
```

```python
def factorial(n):
    if n == 0:
        return 1
    else:
        return n * factorial(n - 1)
```

object Main {
  def factorial(n: Int): Int = {
    if (n == 0) {
      return 1
    } else {
      return n * factorial(n - 1)
    }
  }
}

See Token Transitions implementation.

Tooltip

A tooltip annotation where the tooltip content can be any MDX content.

content.mdx

<CodeWithTooltips>

```js !code
// !tooltip[/lorem/] description
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  // !tooltip[/consectetur/] inspect
  return sit ? consectetur(ipsum) : []
}
```

## !!tooltips description

### Hello world

Lorem ipsum **dolor** sit amet `consectetur`.

Adipiscing elit _sed_ do eiusmod.

## !!tooltips inspect

```js
function consectetur(ipsum) {
  const { a, b } = ipsum
  return a + b
}
```

</CodeWithTooltips>

function (ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? (ipsum) : []
}

Hover (or focus) the lorem and consectetur tokens to see the respective tooltips.

See Tooltip implementation.

Transpile

Sometimes you have a code block that you want to show together with its versions in different languages. It may be typescript and javascript, or sass and css, or maybe you want to transform a cURL command into calls to SDKs in different languages.

If you are using React Server Components and you have a function to transpile the code, you can call that function inside the component.

Here's an example showing how to transpile a typescript code block to javascript, and then showing both versions in tabs:

content.md

```ts
interface Greeter {
  greet(): string
}

function sayHello(greeter: Greeter) {
  console.log(greeter.greet())
}
```

interface Greeter {
  greet(): string
}

function sayHello(greeter: Greeter) {
  console.log(greeter.greet())
}

See Transpile implementation.

Typescript

Include Typescript compiler's information in your code blocks using Typescript Twoslash.

content.md

```ts
const hi = "Hello"
const msg = `${hi}, world`
//    ^?

// @errors: 2588
msg = 123
```

const  = "Hello"
const  = `${}, world`
const msg: "Hello, world"

 = 123
Cannot assign to 'msg' because it is a constant.

See Typescript implementation.

Word Wrap

Wrap lines to avoid horizontal overflow.

content.md

```js
function lorem(ipsum, dolor, sit) {
  ipsum.amet(
    { consectetur: [0, 1] },
    {
      adipiscing: elit.sed,
      eiusmod: "lorem ipsum dolor sit amet",
      sit,
    },
  )
}
```

1function lorem(ipsum, dolor, sit) {
2  ipsum.amet(
3    { consectetur: [0, 1] },
4    {
5      adipiscing: elit.sed,
6      eiusmod: "lorem ipsum dolor sit amet",
7      sit,
8    },
9  )
10}

Drag the right handle to resize the width

See Word Wrap implementation.