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.

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.

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.

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) {
  const sit = ipsum == null ? 0 : ipsum.sit
  // !mark(1:2)
  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 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.