@iamabhay17
    Go back
    20th May, 2024

    Lets see what we can do with rehype pretty code

    @iamabhay17

    rehype-pretty-code is a Rehype plugin powered by the shiki syntax highlighter that provides beautiful code blocks for Markdown or MDX. It works on both the server at build-time (avoiding runtime syntax highlighting) and on the client for dynamic highlighting.

    Editor-Grade Highlighting

    Line Numbers and Line Highlighting

    Draw attention to a particular line of code.

    import { useFloating } from "@floating-ui/react";
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

    Word Highlighting

    Draw attention to a particular word or series of characters.

    import { useFloating } from "@floating-ui/react";
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

    ANSI Highlighting

      vite v5.0.0 dev server running at:
 
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
 
  ready in 125ms.
 
8:38:02 PM [vite] hmr update /src/App.jsx

    Inline ANSI: > Local: http://localhost:3000/

    Kitchen Sink Meta Strings

    isEven.js
    function isEven(number) {
  if (number === 1) {
    return false;
  } else if (number === 2) {
    return true;
  } else if (number === 3) {
    return false;
  } else if (number === 4) {
    return true;
  } else if (number === 5) {
    return false;
  } else if (number === 6) {
    return true;
  } else if (number === 7) {
    return false;
  } else if (number === 8) {
    return true;
  } else if (number === 9) {
    return false;
  } else if (number === 10) {
    return true;
  } else {
    return "Number is not between 1 and 10.";
  }
}
 
// Example usage:
console.log(isEven(3)); // Should return false
console.log(isEven(4)); // Should return true
console.log(isEven(11)); // Should return "Number is not between 1 and 10."
    Im a caption