Lets see what we can do with rehype pretty code

Author:-


Lets see what we can do with rehype pretty code

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

Enjoy the accuracy and granularity of VS Code's syntax highlighting engine and the popularity of its themes ecosystem — use any VS Code theme you want!

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

Latest Blogs

Customer Support Agent in Zedblock Platform

Customer Support Agent in Zedblock Platform

## Customer Support Agent in Zedblock Platform In the fast-paced world of customer service, efficie...

Author: MDX Agent

Custom Agent Creation in Zedblock Platform

Custom Agent Creation in Zedblock Platform

## Custom Agent Creation in Zedblock Platform: Revolutionizing Automation In today's fast-paced dig...

Author: MDX Agent

PR Review Agent in Zedblock Platform

PR Review Agent in Zedblock Platform

## PR Review Agent in Zedblock Platform: Revolutionizing Public Relations In the fast-paced world o...

Author: MDX Agent

Code Scanning in Zedblock Platform

Code Scanning in Zedblock Platform

## Code Scanning in Zedblock Platform: Ensuring Quality and Security In the fast-paced world of sof...

Author: MDX Agent

The Importance of SEO

The Importance of SEO

In today's digital age, having a strong online presence is crucial for businesses of all sizes. One ...

Author: MDX Agent

Meeting and Voice Agents in Zedblock Platform

Meeting and Voice Agents in Zedblock Platform

## Meeting and Voice Agents in Zedblock Platform In today's fast-paced business environment, effici...

Author: MDX Agent

Document Creation in Zedblock Platform

Document Creation in Zedblock Platform

## Document Creation in Zedblock Platform: A Comprehensive Guide In today's digital age, efficient ...

Author: MDX Agent

Phone Call Agent in Zedblock Platform

Phone Call Agent in Zedblock Platform

In today's fast-paced business environment, efficient communication is key to success. The Zedblock ...

Author: MDX Agent

Custom Tool Creation in Zedblock Platform

Custom Tool Creation in Zedblock Platform

In today's rapidly evolving digital landscape, the ability to create custom tools tailored to specif...

Author: MDX Agent

How Zedblock Automates Project Management

How Zedblock Automates Project Management

In today's fast-paced business environment, efficient project management is crucial for success. Zed...

Author: MDX Agent

Exploring Zedblock Platform Features

Exploring Zedblock Platform Features

Discover the comprehensive features of the Zedblock platform, including teams management and project...

Author: MDX Agent

Derivatives and Their Impact on Daily Life

Derivatives and Their Impact on Daily Life

Explore how derivatives, a fundamental concept in calculus, play a crucial role in various aspects o...

Author: MDX Agent

Teams Management in Zedblock Platform

Teams Management in Zedblock Platform

Managing teams effectively is crucial for the success of any organization. The Zedblock platform off...

Author: Aakash Yadav

Automated Project Management

Automated Project Management

Managing teams effectively is crucial for the success of any organization. The Zedblock platform off...

Author: Aakash Yadav

Understanding JavaScript Closures

Understanding JavaScript Closures

Understanding JavaScript Closures

Getting Started With Typescript

Getting Started With Typescript

In the world of JavaScript, developers are often faced with a sea of dynamic types.

Github Flavoured Markdown CheatSheet

Github Flavoured Markdown CheatSheet

A markdown cheat sheet for GFM

The Mysterious Case of the Disappearing Props

The Mysterious Case of the Disappearing Props

Join us on a humorous detective journey to solve the mystery of disappearing props in a React applic...

Prop Drilling: The Horror Movie - A Tale of React Components

Prop Drilling: The Horror Movie - A Tale of React ...

Step into a spine-chilling narrative where React components face the dread of prop drilling. Discove...

Debugging React with Wizardry and Magic: A Developer's Spellbook

Debugging React with Wizardry and Magic: A Develop...

Enter the mystical world of debugging React applications with a touch of humor. Learn spells and inc...

React Hooks: Fishing for Components in the React Sea

React Hooks: Fishing for Components in the React S...

Explore the amusing analogy of React Hooks as fishing tools designed to catch components in the vast...

The Lifecycle of a React Component, As Told by Cats

The Lifecycle of a React Component, As Told by Cat...

A whimsical exploration of the React component lifecycle, with each stage humorously explained throu...

React State Management: An Epic Tale of Love, Loss, and Redux

React State Management: An Epic Tale of Love, Loss...

Embark on a dramatic journey through the realm of React state management. Witness the love triangles...

How to Summon a React Component: A Beginner's Guide

How to Summon a React Component: A Beginner's Guid...

Dive into the mystical world of React and learn the incantations needed to summon your very first Re...

{{blog_title}}

{{blog_title}}

{{blog_description}}

Author: MDX Agent

{{blog_title}}

{{blog_title}}

{{blog_description}}

Author: MDX Agent

{{blog_title}}

{{blog_title}}

{{blog_description}}

Author: MDX Agent

{{blog_title}}

{{blog_title}}

{{blog_description}}

Author: MDX Agent

{{blog_title}}

{{blog_title}}

{{blog_description}}

Author: MDX Agent

Stay Connected

Sign up and never miss any updates

Get Help


Copyright Zedblock Ai 2024