This is a guide to create a beautiful code block in Gatstby Markdown in the VScode theme of your choice.

Some thing beautiful like this.

console.log("looks soo goood 🤤");

In this blog post I assume you have the blog setup with gatsby-transformer-remark and the just need to add the amazing looking code block.

My setup is I am using .md files to genrate theses blog posts and parse it into HMTL.

We will be using gatsby-transformer-remark and gatsby-remark-vscode plugin.

The setup is that we have a markdown files that have with code blocks

This is the theme and font I am using,

• Theme: Dark+ (default theme)
• Font: JetBrains Mono

First, Setup

Install the package, gatsby-remark-vscode:

npm install --save gatsby-remark-vscode

We add an plugin to gastby-config.js:

// gastby-config.js

{
  // ...
  plugins: [{
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [{
        resolve: `gatsby-remark-vscode`,
        options: {
          theme: 'Dark+ (default dark)' // Or install your favorite theme from GitHub
        }
      }]
    }
  }]
}

Write code examples in your markdown file as usual:

    ```js
    console.log("I in a code block")

    ```

Ok, Now That is all working,

We will add the the little Language tab in the top right corner.

To do this, gatsby-remark-vscode creates a data attribute called language we can use to identify what laguage the code block is.

To create the little tab, we will use wrap .grvsc-container the a container div with class .lang-tabbed_container and we put a div with class `.lang-tabbed-item with the language attribute in it.

I placed in the useEffect hook of my Blog post Template component.

  useEffect(() => {
    let blogContent = document.querySelector('.blog-post-content');
    blogContent.querySelectorAll('pre.grvsc-container').forEach(item => {
      item.outerHTML = `
      <div class= "lang-tabbed_container">
        <div class="lang-tabbed-item">
          ${item.dataset.language.toUpperCase()}
        </div>
        ${item.outerHTML}
      </div>
      `;
    }
  }, []);

Here is the css, to place in the corner.

  .lang-tabbed_container {
    position: relative;
  }
  .lang-tabbed-item {
    font-size: 0.9rem;
    height: 39px;
    width: fit-content;
    padding: 2px 8px;
    color: white;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background: #1E1E1E;
    position: absolute;
    font-family: "JetBrainsMono";
    font-weight: 700;
    top: -33px;
    right: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }  

Thank you for reading.😀