MicroLighter: Syntax Highlighter | CSS-Methods

Right here we go! Syntax highlighting for code blocks with out the sophisticated markup, spans, courses, and bloated JavaScript, courtesy of Uncle Dave.

  const reply = 42;


MicroLighter is just about straight-up CSS leaning on Customized Highlights, utilizing the ::spotlight() pseudo… which is Baseline this 12 months!

It accomplishes precisely each we’d like round right here at CSS-Methods — themes, line numbers, a number of language assist, semantic markup, and many others. — however with out the added dependencies we depend on. 
Chris made a customized WordPress block years and years in the past that plugs in Prism.js. There’s actually nothing mistaken with Prism. It’s strong, helps a crap-ton of languages, can be tremendous light-weight, and many battled-tested. Both method, I’ll actually be  integrating this into our WordPress block.
It’s not that there isn’t any JavaScript concerned. It’s that much less of it’s wanted. And it leans so arduous into trendy CSS that it brings issues like light-dark() assist and customized properties alongside for the trip, which means rolling your personal theme is completely doable.
--syntax-background: light-dark(#ffffff, #0d1117);
--syntax-foreground: light-dark(#24292f, #c9d1d9);
--syntax-comment: light-dark(#6e7781, #8b949e);
--syntax-keyword: light-dark(#cf222e, #ff7b72);
--syntax-operator: light-dark(#24292f, #c9d1d9);
--syntax-string: light-dark(#0a3069, #a5d6ff);
--syntax-constant: light-dark(#0550ae, #79c0ff);
--syntax-function: light-dark(#8250df, #d2a8ff);
--syntax-type: light-dark(#8250df, #d2a8ff);
--syntax-variable: light-dark(#953800, #ffa657);
--syntax-property: light-dark(#0550ae, #79c0ff);
--syntax-tag: light-dark(#116329, #7ee787);
--syntax-selector: light-dark(#8250df, #d2a8ff);
--syntax-inserted: light-dark(#116329, #7ee787);
--syntax-deleted: light-dark(#cf222e, #ff7b72);
Plus, it’s tremendous modular within the sense that you may snag the belongings you need à la carte: particular themes, simply the languages it’s essential assist, line numbers, an online part.
import "microlighter/micro-lighter-element.min.js";

  
    const reply = 42;
  

Jogs my memory too of this intelligent little net font that brings syntax highlighting alongside for the trip. I’ve been fortunately utilizing that on my private website for some time with none fuss.

                              

                  Direct Hyperlink →