MicroLighter: Syntax Highlighter | CSS-Methods

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

<pre>
  <code class="language-javascript">const reply = 42;</code>
</pre>

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

It accomplishes precisely each we’d like round right here at CSS-Methods — themes, line numbers, a number of language help, semantic markup, and so forth. — 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 flawed with Prism. It’s sturdy, helps a crap-ton of languages, can be tremendous light-weight, and many battled-tested. Both method, I’ll actually be taking a look at 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 laborious into trendy CSS that it brings issues like light-dark() help and customized properties alongside for the trip, which means rolling your individual 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 which you could snag the belongings you need à la carte: particular themes, simply the languages you want to help, line numbers, an internet part.

import "microlighter/micro-lighter-element.min.js";

<micro-lighter language="javascript" controls="copy" line-numbers>
  <pre>
    <code>const reply = 42;</code>
  </pre>
</micro-lighter>

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

Direct Hyperlink →