Source code: https://github.com/pomber/remix-codehike

Code and Focus

Code Hike will apply syntax highlighting to any code block


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

It works by default with many languages


def f() {
   return [2, 3]
}
(a, b) = f()
println a
println b

Use focus to show the code that's important to the reader


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

You can specify a list of line numbers


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

And also columns


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

Filenames

Adding a filename to the codeblock

app.js


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

Tabs

To add more tabs, wrap multiple codeblocks with <CH.Code/>:

app.js

styles.css


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

Panels

The editor can be splitted vertically in two panels using ---

app.js


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

styles.css


.lorem {
  color: #fff;
  padding: 10px;
  background: #000;
}

Comment annotations

Instead of defining the focus on the codeblock metastring, you can us 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 bg and box.


function foo() {
  console.log("hover me");
  return 8;
}

You can pass a string parameter to comment annotations. For bg and box, it will be used as a color.

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);
}

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);
}

Sections

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem dolor sit amet, consectetur adipiscing elit, sed do.

index.js

styles.css


function () {
  return 3
}

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Spotlight

This is how to use the <CH.Spotlight> component. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quia! Quidem, quisquam.

Change focus

Or change the code

Or change the file

By the way

you can
put any
markdown
here

👍

app.js


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

Scrollycoding

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.

Step 1

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.

Step 2

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.

Step 3

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.

Step 4

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.

Step 5

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


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