Syntax Highlighting with a Color Font: Revolutionizing Code Display

Syntax highlighting is essential for developers, making code easier to read and understand. With the advent of advanced CSS and web font capabilities, it’s now possible to elevate syntax highlighting using color fonts, creating visually appealing and highly customizable code displays. This article dives into using CSS to achieve syntax highlighting with a color font, providing an eye-catching and functional experience.

How It Works

Here’s the CSS and HTML that power the technique:

HTML Example

<pre>
  <code>
  @keyframes rounded-mask-reveal {
    from {
      clip-path: inset(10% 10% 10% 10% round 30px);
    }
    to {
      clip-path: inset(0% 0% 0% 0% round 30px);
    }
  }
  video {
    animation: rounded-mask-reveal linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 50%;
  }
  </code>
</pre>

<p>
It's always been annoying to have highlighting with inline code tags too... but not anymore! See, I can say <code>function rad() {}</code> or <code>a { color: red; }</code>
</p>

CSS Code

1. Define a Custom Font

Using the @font-face rule, load a font specifically designed for syntax highlighting:

@font-face {
  font-family: 'Monaspace';
  src: url('https://webdevservices.in/upload/fonts/MonaspaceKrypton-SyntaxHighlighter-Regular.woff2') format('woff2');
}

You can download this font from here

2. Create Custom Palettes

Use @font-palette-values to define colors for different syntax elements:

@font-palette-values --kung-fury {
  font-family: "Monaspace";
  override-colors:
    0 hsl(225 100% 40%), /* curlies and tags */
    1 hsl(250 100% 80%), /* ? */
    2 hsl(225 100% 40%), /* function */
    3 hsl(225 100% 40%), /* ? */
    4 hsl(270 50% 40%),  /* () */
    5 hsl(210 40% 2%),   /* property name */ 
    6 hsl(210 10% 30%),  /* ? */
    7 hsl(327 100% 54%)  /* numbers */
  ;
}

3. Support Dark Mode

Adapt the color palette for dark mode:

@media (prefers-color-scheme: dark) {
  @font-palette-values --kung-fury {
    font-family: "Monaspace";
    override-colors:
      0 hsl(188 100% 75%), /* curlies and tags */
      1 hsl(250 100% 80%), /* ? */
      2 hsl(188 100% 75%), /* function */
      3 hsl(188 100% 75%), /* ? */
      4 hsl(250 100% 80%), /* () */
      5 hsl(210 40% 98%),  /* property name */ 
      6 hsl(210 40% 80%),  /* ? */
      7 hsl(300 100% 80%)  /* numbers */
    ;
  }
}

4. Apply Styles

Finally, apply the font and palette to code blocks:

code {
  font-family: "Monaspace", monospace;
  font-palette: --kung-fury;
}

pre {
  min-width: 0;
  overflow-x: auto;
  padding: 2ch;
}

Advantages of Syntax Highlighting with Color Fonts

1. Enhanced Readability: With precise color definitions for each syntax element, developers can quickly identify critical parts of the code.
2. Customization: Developers can design their own palettes to match project themes or preferences.
3. Seamless Integration: The technique works across modern browsers with native support for color fonts and CSS variables.
4. Dynamic Themes: Adapting to light or dark modes is straightforward, ensuring a consistent user experience.

Conclusion

Syntax highlighting with a color font is a game-changer for developers and designers who want to make their code blocks stand out. By leveraging CSS properties like @font-palette-values, we can create highly customized, visually stunning code displays that enhance comprehension and engagement.

Demo on Codepen