Gatsby Starters & Templates Logo Gatsby Starters & Templates
Gatsby Remark Highlight Code screenshot

Gatsby Remark Highlight Code

Author Avatar Theme by Deckgo
Updated: 8 Jan 2023
67 Stars

Adds stylish cards and syntax highlighting to code blocks in markdown files

Github

Overview

If you’re looking to enhance the code display on your Gatsby website, the gatsby-remark-highlight-code plugin is an excellent choice. This innovative feature, inspired by popular design tools, turns simple code blocks into stylish cards with syntax highlighting, making your markdown files not only functional but visually appealing. Created for web presentations with DeckDeckGo, this plugin utilizes the power of Stencil and Prism.js to ensure your code looks as good as it performs.

What sets this plugin apart is its versatility in design options, giving developers the freedom to select from multiple themes and customize their code blocks according to their aesthetic preferences. Whether you’re creating a personal portfolio, a technical blog, or documentation, the eye-catching presentation offered by gatsby-remark-highlight-code can significantly elevate the user experience.

Features

  • Stylish Cards: Transform your code blocks into visually striking cards with layouts inspired by popular design tools like Carbon and Ubuntu.

  • Multiple Themes: Choose from a variety of pre-designed themes including 3024-night, dracula, and more to customize the look and feel of your code snippets.

  • Flexible Styling: No predefined designs? No problem! Utilize a range of CSS variables to craft your unique styling preferences.

  • Syntax Highlighting: Powered by Prism.js, this plugin provides accurate and colorful syntax highlighting that makes code blocks easier to read and understand.

  • Easy Installation: Simple configuration process allows for quick integration into your existing Gatsby site, whether you’re using gatsby-transformer-remark or gatsby-plugin-mdx.

  • Customizable Plugin Options: Adjust various properties, such as terminal style and theme settings, to fit your specific project needs.

  • Responsive Display: The design ensures that your code blocks remain legible on all devices, maintaining functionality without compromising aesthetics.

This plugin is an essential tool for any developer looking to enhance their Gatsby site’s presentation capabilities.