Dark mode with Shiki and Code Hike

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • codehike

    Marvellous code walkthroughs

    Warning: This article refers to versions of Code Hike before 0.8.0. Since version 0.8.0, Code Hike uses lighter instead of Shiki. The approach presented in this article uses shiki's color replacement method, which no longer works with lighter.

  • lighter

    The syntax highlighter used by Code Hike. (by code-hike)

    Warning: This article refers to versions of Code Hike before 0.8.0. Since version 0.8.0, Code Hike uses lighter instead of Shiki. The approach presented in this article uses shiki's color replacement method, which no longer works with lighter.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • shiki

    A beautiful yet powerful syntax highlighter

    Warning: This article refers to versions of Code Hike before 0.8.0. Since version 0.8.0, Code Hike uses lighter instead of Shiki. The approach presented in this article uses shiki's color replacement method, which no longer works with lighter.

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    If you use Tailwind CSS and use the dark mode with the class strategy instead of media query, you can override the variables like this:

  • vscode-textmate

    A library that helps tokenize text using Text Mate grammars.

    Shiki does this because the underlying library vscode-textmate or vscode-oniguruma returns black if the value is not a valid color. This explains why Code Hike uses blackish color codes instead of variables. But what if we write a variable directly into the theme instead of the color code.

  • vscode-oniguruma

    Oniguruma Bindings for VS Code

    Shiki does this because the underlying library vscode-textmate or vscode-oniguruma returns black if the value is not a valid color. This explains why Code Hike uses blackish color codes instead of variables. But what if we write a variable directly into the theme instead of the color code.

  • convert-sh-theme

    For more information about the converter tool, have a look at convert-sh-theme.

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts