Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit modi, cumque maxime odit perspiciatis sequi.

---
title: Hello World!
date: 22 October 2022
category: Blog
description: Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit modi, cumque maxime odit perspiciatis sequi.
author: Kaartik Nayak
duration: 1 min read
tags: ["general"]
---

So Hey Guys this is my first of many blog posts.

I am going to be blogging about my journey as a developer and my experiences with different technologies and languages and intend to contribute to the web dev community.

I want to enhance my writing skills and also document stuff that I learn.

> "The best way to learn is to teach."



Hello World!

MDX Code highlighting and styling using rehype and remake plugins with TailwindCSS

---
title: MDX Code Highlighting and Styling
date: 26 October 2022
category: Blog
description: MDX Code highlighting and styling using rehype and remake plugins with TailwindCSS
author: Kaartik Nayak
duration: 10 min read
tags: ["MDX", "syntax-highlighting","next.js","tailwindcss"]
---

In this blog we will see how to style the code blocks in MDX files using rehype and remake plugins.

## End Result Of This Blog

Before we start, let's see how the code blocks will look like in MDX files:

```js:App.js
const a = 10;
var b = 90;
// this is a comment
const func=()=>{
    return a;
}
console.log("Hello World");
```

```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>
```

```css:style.css
body{
    background-color: red;
}
```

```python:script.py
a=10
for i in range(10):
    print(i)
```

```java:script.java
public class Main{
    public static void main(String[] args){
        System.out.println("Hello World");
    }
}
```

## Code Blocks without styling 💀
![code-block-without-styling](/mdx-without-plugins.png)

So lets start with adding the styling to the code blocks.

## Adding Dependencies to the project
Required Dependencies:

`rehype`
`rehype-autolink-headings`
`rehype-code-titles`
`rehype-prism-plus`
`rehype-slug`
`remark-gfm`

```bash
npm install rehype rehype-autolink-headings rehype-code-titles rehype-prism-plus rehype-slug remark-gfm
yarn add rehype rehype-autolink-headings rehype-code-titles rehype-prism-plus rehype-slug remark-gfm
```

> I am using `MDX-Remote` for MDX files. If you are using `@next/mdx` then you can use the same plugins in `next.config.js` file.

## Adding plugins to our MDX object
Now let's see how to use these plugins in `MDX-Remote`:

```js:MDX-Remote
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypeCodeTitles from 'rehype-code-titles'
import rehypePrism from '@mapbox/rehype-prism'
import rehypeSlug from 'rehype-slug'
import remarkGfm from 'remark-gfm'

const components = { /* your components */ }

export default function Blog({ source }) {
  return (
    <MDXRemote {...source} components={components} />
  )
}

export async function getStaticProps({params}) {
  const { fileContents } = getBlogBySlug(params.slug); // get the MDX file contents
  const { data, content } = matter(fileContents); // get the frontmatter, content
  const mdxSource = await serialize(source, {
    mdxOptions: {
      remarkPlugins: [remarkGfm],
      rehypePlugins: [
        rehypeSlug,
        rehypeCodeTitles,
        rehypePrism,
        [
          rehypeAutolinkHeadings,
          {
            properties: {
              className: ["anchor"],
            },
          },
        ],
      ],
      format: "mdx",
    },
  })

  return { props: { source: mdxSource } }
}
```
Add the `mdxOptions` object in the `serialize` function. This will add the plugins to the MDX files.

## Adding Customizable Styles

Now go to `globals.css` file and add the following code so that the code blocks have syntax highlighting

```css:globals.css
.rehype-code-title {
  @apply px-5 py-3 font-mono text-sm font-bold text-neutral-800 bg-neutral-100 border border-b-0 border-neutral-300 rounded-t-lg dark:text-neutral-200 dark:border-neutral-700 dark:bg-neutral-900;
}

.rehype-code-title + pre {
  @apply mt-0 rounded-t-none;
}

.prose .anchor {
  @apply absolute invisible no-underline delay-[50ms] transition-all -ml-10 pr-2 cursor-pointer;
}

.anchor:hover {
  @apply visible;
}

.prose a {
  @apply transition-all;
}

.prose .anchor:after {
  @apply text-neutral-300 dark:text-neutral-700;
  content: "#";
}

.prose *:hover > .anchor {
  @apply visible;
}

.prose pre {
  @apply border shadow-md border-neutral-300 bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800;
}

.prose code {
  @apply font-mono text-neutral-800 dark:text-neutral-200 px-1 py-0.5 border border-neutral-400 dark:border-neutral-800 rounded-lg bg-neutral-300 dark:bg-neutral-800;
}

.prose pre code {
  @apply text-neutral-800 dark:text-neutral-200 p-0;
  border: initial;
}
.code-line {
  @apply bg-neutral-200 dark:bg-neutral-800;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata,
.token.console {
  @apply text-neutral-700 dark:text-neutral-300;
}
.token.punctuation {
  @apply text-blue-400;
}

.token.number,
.token.symbol,
.token.boolean,
.token.constant,
.token.property,
.token.tag,
.token.deleted {
  @apply text-blue-500;
}
.token.string {
  @apply text-blue-600;
}
.token.attr-name,
.token.builtin,
.token.char,
.token.selector,
.token.inserted {
  @apply text-purple-500;
}

.token.entity,
.token.important,
.token.operator,
.token.regex,
.token.url,
.token.variable,
.language-css .token.string,
.style .token.string {
  @apply text-yellow-900 dark:text-yellow-300;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  @apply text-red-600;
}

.token.function,
.token.class-name {
  @apply text-purple-500;
}

code[class*="language-"],
pre[class*="language-"] {
  @apply text-neutral-800 dark:text-neutral-200;
}

blockquote p {
  @apply font-mono;
}
blockquote p::before {
  content: "" !important;
}
```
## Conclusion
In this article, we learned how to add syntax highlighting to code blocks in Next.js using MDX and TailwindCSS.
All the styles can be customized as per your need. You can also add more plugins to the `mdxOptions` object to add more features to your MDX files.

Resources
- [MDX-Remote](https://github.com/hashicorp/next-mdx-remote)
- [Next-MDX](https://nextjs.org/docs/advanced-features/using-mdx)
- [MDX](https://mdxjs.com)
- [Next.js](https://nextjs.org)
- [TailwindCSS](https://tailwindcss.com)

Plugins
- [rehype-autolink-headings](https://github.com/rehypejs/rehype-autolink-headings)
- [rehype-code-titles](https://www.npmjs.com/package/rehype-code-titles)
- [rehype-prism-plus](https://www.npmjs.com/package/rehype-prism-plus)
- [rehype-slug](https://www.npmjs.com/package/rehype-slug)
- [remark-gfm](https://www.npmjs.com/package/remark-gfm)

Thats a wrap! If you like this blog, please share it with your friends.
Also, do follow me on [Twitter](https://twitter.com/KaartikNayak). Peace Out! ✌️


MDX Code Highlighting and Styling

An approach of using useRef since useState causes unnecessary rerenders.

---
title: Using Refs for form data
date: 23 October 2022
category: Tutorial
description: An approach of using useRef since useState causes unnecessary rerenders.
author: Kaartik Nayak
duration: 5 min read
tags: ["react.js", "react-hooks"]
---

In this blog we will see how to use useRef hook instead of the useState hook.

The usual way:
```js:🤓.jsx
export default function Form() {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");

  const submit = (e) => {
    e.preventDefault();
    console.log(email, password);
  };
  // rerenders component eveytime when a character is added in the input field
  React.useEffect(() => {
    console.log("value changed");
  }, [email, password]);

  return (
    <form onSubmit={submit}>
      <label htmlFor="email">Email</label>
      <input
        type="email"
        name="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <label htmlFor="password">Password</label>
      <input
        type="password"
        name="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}
```

## Using `useRef` hook

```js:😎.jsx
export default function Ref() {
  const emailRef = React.useRef(null);
  const passwordRef = React.useRef(null);
  const submit = (e) => {
    e.preventDefault();
    console.log(emailRef.current.value, passwordRef.current.value);
  };
  return (
    <form onSubmit={submit}>
      <label htmlFor="email">Email</label>
      <input ref={emailRef} type="email" name="email" />
      <label htmlFor="password">Password</label>
      <input ref={passwordRef} type="password" name="password" />
      <button type="submit">Submit</button>
    </form>
  );
}
```
When we use `useRef`hook, the component does not rerender when the value of the input field changes. This is because the `useRef` hook does not cause any rerenders. It is used to store the reference of the DOM element.

## Conclusion

In this blog we saw how to use `useRef` hook instead of `useState` hook. This is useful when we want to store the value of the input field without causing any rerenders 👌

So that's it for this blog.
Hope you liked it 🤗

Hello! I am Kaartik Nayak

Front End Developer with a passion of learning and creating, currently a final year IT Engineering Student.

Blogs