DEV Community: Vaishnav

Syntax highlight with Shiki and Adding Copy Functionality to Codeblocks

Vaishnav — Sun, 22 Dec 2024 06:00:36 +0000

Recently, I decided to add a code snippets section to my website. I realized two key features would greatly improve the user experience:

Better syntax highlighting
A copy code block button

Let's walk through how to implement these features step by step.

Implementing Syntax Highlighting

First, let's look at our current setup. We're using MDX with next-mdx-remote to render our content. Here's the basic structure of our MDX processing:

const source = fs.readFileSync(contentPath);
const { data, content } = matter(source);

const mdxSource = await serialize(content, {
  mdxOptions: {
    format: "mdx",
    remarkPlugins: [remarkGfm],
    rehypePlugins: [
      rehypeSlug,
      [rehypeAutolinkHeadings, { properties: { className: ["anchor"] } }],
      [rehypePrettyCode, shikiOptions],
      rehypeAccessibleEmojis,
    ],
  },
  scope: data,
});

This code reads the content file, processes it with various plugins, and prepares it for rendering. The key plugin for our syntax highlighting is rehypePrettyCode. 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.

To use a specific theme, we can configure shikiOptions like this:

const shikiOptions = {
  theme: "catppuccin-latte",
};

I'm using the "catppuccin-latte" theme, but you can explore more themes at https://shiki.style/themes.

Adding copy button to codeblocks

Now that we have syntax highlighting working, let's add a copy button to our code blocks. Instead of creating a new custom component for each code block in our MDX files, we'll modify how the code blocks are rendered on the UI. Here's how a code block typically looks in the DOM:

We'll create a custom Figure component that will be used by MDXRemote to render these elements. This approach doesn't require importing the component in each MDX file.

const Figure = (props) => {
  const { children, ...rest } = props;
  const figureRef = useRef(null);

  const isReactElement = (node) => {
    return React.isValidElement(node);
  };

  const childArray = React.Children.toArray(children);
  const figCaptionChild = childArray.find(
    (node) => isReactElement(node) && node.type === "figcaption"
  );
  const preChild = childArray.find(
    (node) => isReactElement(node) && node.type === "pre"
  );

  const handleCopyClick = async () => {
    const codeBlock = figureRef.current;
    if (codeBlock) {
      const codeNode = codeBlock.querySelector("code");
      if (codeNode) {
        navigator.clipboard.writeText(codeNode.textContent || "");
      }
    }
  };

  return (
    <figure ref={figureRef} {...rest}>
      {figCaptionChild && React.isValidElement(figCaptionChild) ? (
        <FigureCaption
          {...figCaptionChild.props}
          handleCopyClick={handleCopyClick}
        />
      ) : null}
      {preChild}
    </figure>
  );
};

This component does the following:

Finds the figcaption and pre elements among its children
Implements a handleCopyClick function to copy the code content
Renders a custom FigureCaption component with the copy button

const FigureCaption = ({ children, handleCopyClick, ...rest }) => {
  const [isCopied, setIsCopied] = useState(false);

  const onClick = () => {
    setIsCopied(true);
    handleCopyClick();
    setTimeout(() => setIsCopied(false), 1000);
  };

  return (
    <figcaption {...rest} className="flex items-center justify-between">
      {children}
      <button type="button" onClick={onClick}>
        {isCopied ? <CopiedSVG /> : <CopySVG />}
      </button>
    </figcaption>
  );
};

Usages

import { MDXRemote } from "next-mdx-remote";
import Figure from "./Figure";

const MDXComponents = {
  // ...other components
  figure: Figure,
};

const RenderContent = () => {
  return <MDXRemote {...snippet.source} components={MDXComponents} />;
};

Finally rendered codeblock will look like this.

Try demo here

Currency Converter | Javascript Build

Vaishnav — Sat, 02 Jan 2021 12:52:38 +0000

3rd Project for Javascript Build.

Live Demo

vaishnavme / builds-Javascript

Vanilla Javascript Projects

learnings

Special way to work with promises Async/Await.
Adding option to HTML select using Javascript.

If you built your version of them please tag me, I would love to try them out.

Find any bugs or have any suggestion please Write to me.

Let's Connect 😄

Cash Register Manager | Javascript Build

Vaishnav — Tue, 29 Dec 2020 10:13:59 +0000

I'm trying to build various tools that helps us daily.
So, In any local store you can find Cash Register and I built it using Vanilla JavaScript.

Cash Register Manager

This is first time I'm creating Mockup

Live Demo

vaishnavme / builds-Javascript

Vanilla Javascript Projects

I'm going to create series of post, with about Simple JavaScript apps. All of them are Open Source.

If you built your version of them please tag me, I would love to try them out.

Find any bugs or have any suggestion please Write to me.

Let's Connect 😄

Storing theme state in localStorage

Vaishnav — Sat, 26 Dec 2020 15:18:12 +0000

Creating Dark-Light mode for website and storing user preferred theme state to local storage.

So, Earlier I wrote a post about creating Dark-Light mode theme for website. Explaining how it work, way to create it.
But, Problem with that code is when you refresh or if site have multiple pages and you go to another page, theme revert back to it's default theme. We don't want that .

Let's Solve this problem

I tweak original code.

Our HTML

Simple tiny HTML code.
<a type="button" class="nav-item theme" id="theme-toggle">🌚</a>

Now the CSS

// Default Light theme color pallet
:root {
    --bg-color: #ffffff; 
    --bg-light: #e3fdfd;

    --font-color:#1f2933;   
    --font-light: #000000;
}
// Dark theme color pallet
body.dark-theme {
    --bg-color: #111216; 
    --bg-light: #24252c;

    --font-color: #9999b3;   
    --font-light: #fff;
}

The JavaScript part

const themeToggle = document.querySelector("#theme-toggle");

const currentTheme = localStorage.getItem("theme");
const pageTheme = document.body;

let isDark = true

if (currentTheme == "dark") {
  pageTheme.classList.add("dark-theme");
  themeToggle.innerText="🌞";
} else {
    themeToggle.innerText = "🌚"
}

function themeMode() {
    isDark = !isDark;
    isDark ? themeToggle.innerText = "🌚" : themeToggle.innerText = "🌞";
    pageTheme.classList.toggle("dark-theme");

    let theme = "light";
    if (pageTheme.classList.contains("dark-theme")) {
      theme = "dark";
    }
    localStorage.setItem("theme", theme);
}

themeToggle.addEventListener("click", themeMode)

What is localStorage?

The localStorage properties allow to save key/value pairs in a web browser. The localStorage property is read-only.

For storing data to localStorage.

localStorage.setItem("key", "value");
For reading data from localStorage.

var lastname = localStorage.getItem("key");
Learn more about localStorage

What is toggle?

toggle is method of DOMTokenList() interface.
It remove token from token list and return false.
If token doesn't exist, then it add token and return true.

What's happening here?

By default our theme is Light.
This part of code check if user already changed theme or has seleted theme, by getting theme data from localStorage.

const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
  pageTheme.classList.add("dark-theme");
  themeToggle.innerText="🌞";
} else {
    themeToggle.innerText = "🌚"
}

themeToggle.innerText is our button. We are changing emoji if it's Light Mode then emoji is Moon🌚. and if it's Dark Mode then emoji is Sun🌞.

When we click our button to change theme, it add dark-theme class to body tag. Dark theme color pallet is applied to site.
It set's current theme to localStorage, using localStorage.setItem("theme", theme);

Here's pen

Zen Music Player | Javascript Build

Vaishnav — Sun, 13 Dec 2020 06:33:03 +0000

Hey Everyone, I started with Project based learning. Idea is to build project, at every step of your learning.

I set myself goal:

For every weekend, I try working on new project or write a blog.

This weekend I bulit Music Player using Vanilla Javascript. This is how it turns out...

Live Demo
Source Code

Give it try...
If you made your version of Record player do tag me. I love to see your version.
It would really great to hear your Feedback and Suggestions 😃.

Let's Connect 😄

Simple Dark-Light theme with VanillaJs

Vaishnav — Wed, 09 Dec 2020 12:59:34 +0000

Dark mode designs and functionality that enable to toggle between Dark and Light theme is trending UI/UX Design🔥. So, here's the guide to create Simple dark-light toggle.
I wanted this to be simple so I didn't create any fancy toggle switch just use simple button.
Codepen at end.🤖

Let's Start with HTML

I'm using list for navbar elements, so
<li class="nav-item" id="toggle">🌞</li>

and we are done with HTML. let's do CSS

CSS

// by default dark theme

:root {
    --bg-color: #171923;
    --bg-light: #232535;
    --font-color: #c5cddb;
    --font-light: #ffffff;
}

// light theme colors

.lightMode {
  --bg-color: #E8E6DC;
  --bg-light: #DCDACA;
  --font-color: #3D3D3D;
  --font-light: #202020;
}

lightMode is class which would be added to body using js.

Final Part - Javascript

const toggle = document.querySelector("#toggle");
toggle.addEventListener("click", modeSwitch);

let isLight = true;

function modeSwitch() {
  isLight = !isLight;
  isLight ? toggle.innerText = "🌞" : toggle.innerText = "🌚";
  var rootElement = document.body;
  rootElement.classList.toggle("lightMode");
}

What is toggle?

toggle is method of DOMTokenList() interface.
It remove token from token list and return false.
If token doesn't exist, then it add token and return true.

What is happening?

When we click on toggle button, event listener respond to it and call modeSwitch() function. In modeSwitch() function, class lightMode is added to body activating lightMode color schema.

Contribution @casiimir

There are different ways to crate dark-light mode toggle. This one simple way I found out to explain how it work.
Love to here your suggestions and feedback🤩.

Embed Dev.to blog post with vanilla-JS

Vaishnav — Sat, 05 Dec 2020 06:43:43 +0000

Easiest guide to embed Dev.to blog post to your personal website using Javascript.

Recently, I started writing blog and also working on my portfolio. Portfolio is best way to showcase your Project, Technical blogs and more..
I'm working on portfolio site and hosting it using Github and Netlify. No Framework
It's static site, and I didn't want to manually update HTML every time I write blog, So here's solution I find out.
Codepen at the end

Let's Start 🤘

First thing I need is API to get data from Dev.to, I googled little bit and find the API.
https://dev.to/api/articles?username=
We don't need to give any other key:value just your username.

Here's the HTML

clean simple and small

Working with JS

Initial Declaration

blogPos is div where we want to show all our blog data.
You should assign your Dev.to username
Creating helper functions

We are going to create few HTML elements using javascript. To create element we have method document.createElement().
createNode()- creating element.
append()- append element.
It's not necessary to create this function, I create them to make code simpler.
Create ul for list of elements.

const ul = createNode('ul');
ul.classList.add("blog-feed");

Important Part

I create buildURL() function for API url with our username. It is assign to finalURL. This is our buildURL()

function buildURL(userName) {
  return `${api}username=${userName}`;
}

Now fetch, fetches and we get response in object with series of methods. There are different methods, here we use JSON as we want to handle our data as JSON object.

Why I use posts.length = 5?
Basic: Want to limit number of post we want to show.
Suppose you have 10-15 blog post, the fetch API will get every one of them. You can change how many post you want to show.

posts.forEach()
For every post we are going to create elements. Look,at that clean code🤩 PS: Still room for improvement.

a.target = 'blank - to open blog link in new tab.
p.classList.add() - to add class to p tag.
a.href = post.url - giving post url link to a:href tag.
a.innerText = 'post.title' - post title to a tag inner text.
p.innerText = 'post.description' post description to paragraph.
You can add more thing, like publish date, time, #tags, public reactions. So here I add public reactions.

small.innerText = '💕 ' + post.public_reactions_count;
Now appending part,
li <- h2 <- a
li <- p
li <- small and
ul <- li

append(h2, a);
append(li, h2);
append(li, p);
append(li, small);
append(ul, li);

append(blogPos, ul) - Adding this list to div element.

One thing Always create error handle. I didn't create error handler here.

Here's the pen

Hope this article helped you. If you have any suggestions or find any mistake please write to me.😃

Displaying loading animation on Fetch API calls

Vaishnav — Wed, 02 Dec 2020 08:50:55 +0000

In web development, one of the most important part is to use REST api. When I start working on api with vanilla JS, I noticed small time difference between call and response. It's good practice to show end user something is happening after his interaction with website.
So here's the guide of showing loading animation on fetch api calls with vanilla JS.
Let's get started

HTML

Let's start with html.

<textarea> to get user input.
<button> to submit data.
<h1> to display response.

We are displaying loading animation using <div id="loading"></div>. This element is hidden by default. We are going to manipulate it, to show or hide it according our requirement.

Creating loader animation CSS

Working with Javascript

In function displayLoading():

loader.className = "display"; this will add display class to
<div id="#loading"></div>, which turn visibility: visible;
We are using setTimeout to hide loading animation after 5 second. Sometimes we may get late response, then timeout time should be increased.

Now, when displayLoading() called it will display loading animation and when hideLoading() called it will hide loading animation setting visibility: hidden;

Now for remaining JS
This part is straight forward. fetchHandler() to fetch data from api.

url I'm using is dummy url which only return 'Testing, you are' for any input.

Here's the pen.

Hey there, I'm #codenewbie, started documenting my journey of learning. Any suggestions are welcome

DEV Community: Vaishnav

Syntax highlight with Shiki and Adding Copy Functionality to Codeblocks

Implementing Syntax Highlighting

Adding copy button to codeblocks

Usages

Currency Converter | Javascript Build

3rd Project for Javascript Build.

Live Demo

vaishnavme / builds-Javascript

Vanilla Javascript Projects

learnings

Let's Connect 😄

Cash Register Manager | Javascript Build

Cash Register Manager

Live Demo

vaishnavme / builds-Javascript

Vanilla Javascript Projects

Let's Connect 😄

Storing theme state in localStorage

Let's Solve this problem

Our HTML

Now the CSS

The JavaScript part

What is localStorage?

For storing data to localStorage.

For reading data from localStorage.

What is toggle?

What's happening here?

Zen Music Player | Javascript Build

I set myself goal:

Let's Connect 😄

Simple Dark-Light theme with VanillaJs

Let's Start with HTML

CSS

Final Part - Javascript

Embed Dev.to blog post with vanilla-JS

Let's Start 🤘

Here's the HTML

Working with JS

Important Part

Here's the pen

Displaying loading animation on Fetch API calls

HTML

Creating loader animation CSS

Working with Javascript