DEV Community: Kunal Tanwar

trimoji — Unicode and emoji-aware text truncation for JavaScript

Kunal Tanwar — Mon, 13 Apr 2026 01:23:56 +0000

The problem

Most text truncation in JavaScript looks like this:

str.slice(0, 100) + "..."

Looks fine until you hit real-world content. This breaks in several ways:

Emoji — 👨‍👩‍👧 is multiple codepoints. Slicing mid-sequence produces garbage characters.
Accented characters — é can be e + a combining accent codepoint. Naive slicing splits them.
Word boundaries — you get "Hello, W..." instead of "Hello,..."
Ellipsis budget — the ... itself takes space that most implementations don't account for.

The solution

trimoji uses the native Intl.Segmenter API — no regex hacks, no dependencies — to truncate strings at proper grapheme, word, or sentence boundaries.

import { trimoji } from "trimoji"

// word boundary (default)
trimoji("Hello 👋, World!", 10)
// ➡️ "Hello 👋,…"

// grapheme boundary
trimoji("Café 🎉 World!", {
    maxLength: 7,
    boundary: "grapheme"
})
// ➡️ "Café 🎉…"

// sentence boundary
trimoji("Hello, World! How are you?", {
    maxLength: 15,
    boundary: "sentence"
})
// ➡️ "Hello, World!…"

// custom ellipsis
trimoji("Hello, World!", {
    maxLength: 10,
    ellipsis: "..."
})
// ➡️ "Hello,..."

// empty ellipsis — hard cut
trimoji("Hello, World!", {
    maxLength: 5,
    ellipsis: ""
})
// ➡️ "Hello"

Why `Intl.Segmenter`?

Intl.Segmenter is a native browser API that understands Unicode text segmentation rules. It knows that 👨‍👩‍👧 is one visible character, that é (as e + combining accent) is one grapheme, and where word and sentence boundaries actually are across different languages.

It's supported in all modern browsers, Node.js 16+, Bun, and Deno — so no polyfills needed.

Fallback behavior

When the budget is tight, trimoji falls back gracefully:

sentence ➡️ falls back to word if the first sentence doesn't fit
word ➡️ falls back to grapheme if the first word doesn't fit

So you never get an empty string or a crash.

API

trimoji(str: string, options: number | TrimOptions): string

Option	Type	Default	Description
`maxLength`	`number`	—	Max visible length including ellipsis
`ellipsis`	`string`	`"…"`	Appended at the cut point
`boundary`	`"grapheme" \	"word" \	"sentence"`
`locale`	`string`	`"en"`	BCP 47 locale for `Intl.Segmenter`

There's also a utility export:

import { graphemeLength } from "trimoji"

graphemeLength("café")   // 4
graphemeLength("👨‍👩‍👧")     // 1
graphemeLength("Hi 👋!")  // 5

Install

bun add trimoji
# or
npm install trimoji

4.4 kB packed. Zero dependencies.

📦 npm
🐙 GitHub

I rewrote zxcvbn in TypeScript — and fixed 16 bugs the original never addressed

Kunal Tanwar — Fri, 27 Mar 2026 19:00:38 +0000

I've been using zxcvbn — Dropbox's password strength estimator — for a while. It's a great library but the original is written in CoffeeScript, hasn't been maintained in years and has a long list of open issues nobody every fixed.

So I rewrote it in TypeScript from scratch. Here's what I found along the way

Why rewrite it?

The original library has a few fundamental problems:

No TypeScript Support — you get any everywhere, no autocomplete, no type safety on the match objects
7.72MB Unpacked — nearly all of it hardcoded string data compiled into every build target
Open Security Issues — a ReDoS vulnerability reported in 2023 that was never patched
Stale Regex — the "recent year" detector stopped working in 2020

I wanted a version I could actually use in a modern TypeScript project without fighting it.

What I built

zxcvbn-ts — a full TypeScript rewrite with:

Strict TypeScript, discriminated-union Match type for exhaustive pattern narrowing
Dual CJS/ESM output
93,855 dictionary words bundled
Optional AI-powered feedback via Claude, ChatGPT, or Gemini
1.1MB unpacked (down from 7.72MB)

bun add zxcvbn-ts
# or
npm install zxcvbn-ts

The bugs I fixed

ReDoS vulnerability (#327)

The original has a catastrophic backtracking bug in its repeat matcher. This regex:

lazy_anchored = /^(.+?)\1+$/

When fed a crafted string like '\x00\x00' + '\x00'.repeat(54773), it hangs the process. On a server this is a denial-of-service attack.

The fix was replacing the anchored regex with a safe string-length comparison that produces identical results without the backtracking. The attack string now processes in ~79ms instead of hanging indefinitely.

Dictionary matching silently disabled (#326 + lazy init bug)

This one was subtle. The original uses a lazy initialization pattern:

init_ranked_dicts = ->
  return if ranked_dictionaries
  # ... build dictionaries

In our TypeScript rewrite, setUserInputDictionary() was called before omnimatch(), which triggered the guard and caused the init to short-circuit before the frequency lists were loaded. Every password fell back to bruteforce matching.

The fix: replace lazy init with eager module-level initialization.

// Before — lazy, broken
let RANKED_DICTIONARIES: RankedDictionaries = {};

function initRankedDictionaries(): void {
  if (Object.keys(RANKED_DICTIONARIES).length > 0) return; // short-circuits!
  // ...
}

// After — eager, correct
const RANKED_DICTIONARIES: RankedDictionaries = Object.fromEntries(
  Object.entries(frequencyLists).map(([name, lst]) => [name, buildRankedDict(lst)])
);

Outdated year detection (#318)

The "recent year" regex only matched up to 2019:

recent_year: /19\d\d|200\d|201\d/g

Fixed to cover up to 2039:

recent_year: /19\d\d|20[0-3]\d/g

Capitalisation scoring inconsistency (#232)

uppercaseVariations() didn't strip non-letter characters computing the multiplier, causing 12345Qwert to score higher than 12345qwerT — the opposite of what you'd want.

// Before — computes on "12345Qwert", Q looks mid-word
const word = match.token;

// After — strips digits first, Q is now correctly start-position
const lettersOnly = word.replace(/[^a-zA-Z]/g, "");

12345Qwert and 12345qwerT now both yield 1009 guesses instead of 2521 vs 1009.

No feedback when password matches user input (#231)

If you passed zxcvbn("alice@example.com", ["alice@example.com"]), the score dropped to 0 but the feedback was completely empty. Fixed with a specific case in feedback.ts:

if (match.dictionary_name === "user_inputs") {
  return {
    warning: "This password is on your personal info list — avoid using personal details",
    suggestions: [
      "Avoid words or phrases connected to yourself",
      "Avoid information others might know about you",
    ],
  };
}

Diacritics not stripped before dictionary lookup (#97)

pässwörd should be caught as a weak password. It wasn't, because the dictionary only contains password. Fixed by NFD-normalising and stripping diacritics before lookup:

const passwordNormalized = passwordLower
  .normalize("NFD")
  .replace(/[\u0300-\u036f]/g, "");

pässwörd now correctly matches password and scores 0.

The AI Feedback Feature

This is the part I'm most excited about. The library already knows exactly why a password is weak — it has the full pattern analysis. So I added an optional zxcvbnAI() that sends that structured analysis to an LLM and gets back a plain-English explanation:

import { zxcvbnAI, anthropic, openai, gemini } from "zxcvbn-ts/ai";

const result = await zxcvbnAI("password123", {
  provider: anthropic({ apiKey: "sk-ant-..." }),
});

console.log(result.feedback.explanation);
// "Your password combines one of the most commonly used passwords with a
//  predictable number suffix. Attackers specifically try these combinations
//  first. A passphrase of four or more random words would be far more secure."

Supports Anthropic, OpenAI, Gemini, and any custom adapter. The core library stays zero-dependency — you only pay the cost if you opt in.

Numbers

Metric	Original	zxcvbn-ts
Unpacked Size	7.72MB	1.1MB
Packed Size	—	480KB
TypeScript	❌	✅
ReDoS Safe	❌	✅
AI Feedback	❌	✅
Recent Years	up to 2019	up to 2039

Try it

bun add zxcvbn-ts
npm install zxcvbn-ts

npm: npmjs.com/package/zxcvbn-ts
GitHub: github.com/KunalTanwar/zxcvbn-ts

Issues, PRs, and feedback welcome.

Why Every JavaScript Keyboard Shortcut Library Is Broken (And What I Built Instead)

Kunal Tanwar — Sun, 22 Mar 2026 19:36:33 +0000

A few weeks ago, I was working on converting zxcvbn to TypeScript when I started thinking — what other JavaScript libraries haven't been properly ported to TypeScript yet?

That rabbit hole led me to keyboard shortcut libraries. And what I found was shocking.

Every Popular Library Uses Deprecated APIs

I started auditing the most popular keyboard shortcut libraries on npm. Here's what I found:

Library	Weekly Downloads	API Used
mousetrap	~500k	`which` (deprecated)
hotkeys-js	~9M	`keyCode` (deprecated)
react-hotkeys-hook	~1.5M	`code` (incorrect for i18n)
combokeys	~200k	`which` (deprecated)

Every single one. keyCode, which, code — all deprecated or incorrect for international layouts.

Why Does This Matter?

The browser gives us two ways to identify which key was pressed:

KeyboardEvent.code — the physical position of the key on the keyboard
KeyboardEvent.key — the actual character produced by the key

If you use code or keyCode, a user on a French keyboard pressing what they think is / will trigger your shortcut for , instead — because the physical key positions are different.

KeyboardEvent.key is the correct API. It gives you the actual character the user intended to type, regardless of their keyboard layout.

Every popular library gets this wrong. That means every shortcut built with these libraries is silently broken for a significant portion of users.

Why Not Just Port an Existing Library?

My first instinct was to port Mousetrap to TypeScript — it's the most well-known library and has a clean API. But then I checked the GitHub repo.

47 open pull requests. Zero merges in years. The maintainer has moved on.

There's no point submitting a PR that will never get reviewed. And there's no point porting a library that's built on the wrong foundation.

So I built a new one from scratch.

Introducing keystrok

keystrok is a modern, TypeScript-native keyboard shortcut library built on KeyboardEvent.key exclusively.

npm install keystrok
# React bindings
npm install keystrok-react

The API

import { keystrok } from 'keystrok'

// basic binding
keystrok.bind('ctrl+k', () => openSearch())

// prevent default
keystrok.bind('ctrl+s', save, { preventDefault: true })

// unbind
keystrok.unbind('ctrl+k')

Modifier aliases that feel natural

keystrok.bind('cmd+k', handler)     // macOS users can use cmd
keystrok.bind('option+f', handler)  // option instead of alt
keystrok.bind('win+k', handler)     // win instead of meta

Sequence shortcuts

Multi-step shortcuts like GitHub's g then h to go home:

keystrok.bind(['g', 'h'], () => goHome())
keystrok.bind(['g', 's'], () => goSettings())

Scoped shortcuts

Activate different shortcuts based on context — perfect for modals, editors, or any contextual UI:

keystrok.bind('ctrl+b', bold, { scope: 'editor' })
keystrok.bind('escape', close, { scope: 'modal' })

// activate a scope
keystrok.scope('editor').activate()

// override mode — suppresses all other scopes
keystrok.scope('modal').override()

React bindings

import { useKeystrok, KeystrokScope } from 'keystrok-react'

function App() {
  useKeystrok('ctrl+k', () => openSearch())
  useKeystrok('ctrl+s', () => save(), { preventDefault: true })

  return (
    // auto-activates scope on mount, deactivates on unmount
    <KeystrokScope name="editor">
      <Editor />
    </KeystrokScope>
  )
}

Dev-time conflict detection

keystrok.bind('ctrl+k', openSearch)
keystrok.bind('ctrl+k', openCommandPalette)
// ⚠ [keystrok] Conflict detected: "ctrl+k" is already bound in scope "global". Both handlers will fire.

How I Built It

The library is a TypeScript monorepo with two packages:

keystrok — the framework-agnostic core
keystrok-react — React hooks and components

The core is split into focused modules:

src/
├── types.ts       — all TypeScript types
├── parser.ts      — "ctrl+k" → ParsedKey
├── normalizer.ts  — KeyboardEvent → ParsedKey
├── registry.ts    — stores and looks up bindings
├── scope.ts       — manages active scopes
├── sequence.ts    — multi-step shortcut matching
└── keystrok.ts    — wires everything together

Everything is tested with Bun's built-in test runner. The parser alone has 40+ tests covering modifier aliases, key aliases, whitespace handling, and error cases.

The key insight in the matching logic — when comparing a parsed shortcut against a live event, we check all four modifiers strictly. This means ctrl+k won't fire if the user also happens to be holding shift. Most libraries get this wrong too.

const modifiersMatch =
  (parsed.modifiers.has('ctrl') === event.ctrlKey) &&
  (parsed.modifiers.has('shift') === event.shiftKey) &&
  (parsed.modifiers.has('alt') === event.altKey) &&
  (parsed.modifiers.has('meta') === event.metaKey)

There's one interesting edge case — characters like ? and ! are naturally "shifted" characters. When you press ?, shiftKey is true in the event, but you don't want to have to write shift+? in your binding. keystrok detects these automatically:

const isShiftedChar =
  parsed.key.length === 1 &&
  parsed.modifiers.size === 0 &&
  !/^[a-zA-Z0-9]$/.test(parsed.key)

What's Next

keystrok/vue — Vue composables
keystrok/svelte — Svelte actions
Rebindable shortcuts — let users customize their own keybindings
A visual shortcut reference component

Try It

npm install keystrok
npm install keystrok-react

If you've ever wondered why your keyboard shortcuts work for you but not for your French or German users — this is why. And now there's a fix.

Built with TypeScript, tested with Bun, zero dependencies.

Introducing Varwolf 🐺 - Dynamic CSS Variables for React

Kunal Tanwar — Sun, 19 Oct 2025 07:20:36 +0000

I just shipped Varwolf v1.0 - a lightweight library (2KB gzipped!) that lets you control CSS variables dynamically with pseudo-classes like :hover, :focus, and :active in React.

💡 The Problem

Ever tried to make a CSS variable change on hover?

// ❌ This doesn't work
<div 
  style={{ 
    '--color': 'red',
    backgroundColor: 'var(--color)'
  }}
  onMouseEnter={() => /* how to change --color? */}
/>

You'd need state management, event handlers, and lots of boilerplate just to change one variable on hover.

✨ The Solution

import { varwolf } from "varwolf"

<varwolf.button
  style={{
    __bg: "red",
    backgroundColor: "var(--bg)",
    _hover: {
      __bg: "blue"
    }
  }}
>
  Hover me!
</varwolf.button>

The __ prefix creates CSS variables, and _hover makes them change on hover. Pure CSS, no JavaScript!

🚀 Key Features

1. Pseudo-Classes with Underscore Prefix

Use camelCase with _ prefix for any pseudo-class:

<varwolf.div
  style={{
    __opacity: 1,
    opacity: "var(--opacity)",

    _hover: { __opacity: 0.8 },
    _active: { __opacity: 0.6 },
    _focus: { __opacity: 0.9 },
    _disabled: { __opacity: 0.3 }
  }}
/>

2. Nested Selectors

Combine multiple states:

<varwolf.button
  style={{
    __color: "black",
    _hover: {
      __color: "blue",
      _disabled: {
        __color: "gray"  // :hover:disabled
      }
    }
  }}
/>

3. currentValue Functions

Modify existing values instead of replacing:

<varwolf.div
  style={{
    __size: "100px",
    width: "var(--size)",
    _hover: {
      __size: (currentValue) => `calc(${currentValue} * 1.2)`
    }
  }}
/>

4. Cross-State References

Reference values from other pseudo-states:

<varwolf.button
  style={{
    __bg: "red",
    _hover: { __bg: "blue" },
    _active: {
      __bg: (cv, from = "hover") => cv  // Use hover's value
    }
  }}
/>

5. Hybrid Rendering

Combine CSS variables with dynamic inline styles:

const [scrollY, setScrollY] = useState(0)

<varwolf.div
  style={{
    __bg: "red",
    _hover: { __bg: "blue" }
  }}
  inlineStyle={{
    transform: `translateY(${scrollY}px)`
  }}
/>

📊 Why Varwolf?

Size Comparison

Format	Size	Description
Package (.tgz)	19.4 KB	Includes TypeScript types
Minified	~8 KB	Production JavaScript
Gzipped	~2 KB	Actual download size ✅

vs Competition

Library	Gzipped	vs Varwolf
styled-components	15.2 KB	8.4x larger
Emotion	8.9 KB	4.9x larger
Stitches	5.8 KB	3.2x larger
vanilla-extract	4.2 KB	2.3x larger
Varwolf	1.8 KB	Winner! 🏆

💻 Real-World Example

Here's an animated button with hover, active, and disabled states:

import { varwolf } from "varwolf"
import { useState } from "react"

function AnimatedButton() {
  const [loading, setLoading] = useState(false)

  return (
    <varwolf.button
      style={{
        __bg: "blue",
        __scale: "1",

        backgroundColor: "var(--bg)",
        transform: "scale(var(--scale))",
        padding: "10px 20px",
        border: "none",
        color: "white",
        cursor: "pointer",
        transition: "all 0.3s ease",

        _hover: {
          __bg: "darkblue",
          __scale: "1.05"
        },

        _active: {
          __scale: "0.95"
        },

        _disabled: {
          __bg: "gray",
          cursor: "not-allowed"
        }
      }}
      disabled={loading}
      onClick={() => setLoading(true)}
    >
      {loading ? "Loading..." : "Click me!"}
    </varwolf.button>
  )
}

🔧 How It Works

Varwolf injects CSS rules into a <style> tag:

.varwolf-abc123 {
  --bg: red;
}

.varwolf-abc123:hover {
  --bg: blue;
}

Your component gets the class name, and CSS variables update on interaction. No JavaScript event handlers needed!

📦 Installation

npm install varwolf

⚡ Features at a Glance

✅ 2KB gzipped - Smallest CSS-in-JS library
✅ Zero dependencies - No bloat
✅ TypeScript - Full type safety
✅ Pseudo-classes - :hover, :focus, :active, etc.
✅ Nested selectors - :hover:disabled
✅ Dynamic values - currentValue functions
✅ Cross-state refs - Reference other states
✅ Performance optimized - Smart caching & hashing

🎯 Use Cases

Theme Switching

<varwolf.div
  style={{
    __theme: darkMode ? "dark" : "light",
    __bg: "white",
    __color: "black",

    '[data-theme="dark"]': {
      __bg: "black",
      __color: "white"
    }
  }}
/>

Loading States

<varwolf.button
  style={{
    __opacity: 1,
    opacity: "var(--opacity)",

    '[aria-busy="true"]': {
      __opacity: 0.5
    }
  }}
/>

Responsive Hover Effects

<varwolf.card
  style={{
    __elevation: "2px",
    boxShadow: "0 var(--elevation) 10px rgba(0,0,0,0.1)",

    _hover: {
      __elevation: "8px"
    }
  }}
/>

🔮 What's Next?

Planned features for future releases:

Media query support (_md, _lg)
Animation helpers
Theme presets
Container queries
More pseudo-classes

💬 Feedback Welcome!

This is v1.0, and I'd love your thoughts:

What features would you add?
How can the API be improved?
Found any bugs?

Drop a comment or open an issue on GitHub!

🔗 Links

🙏 Thanks!

If you find varwolf useful:

⭐ Star it on GitHub
💬 Share your feedback
🐛 Report bugs
🚀 Try it in your project

Built with 🐺 by Kunal Tanwar

Have you tried CSS variables in React? What challenges have you faced? Let me know in the comments! 👇

Generate Custom Properties (CSS Variables) using SASS

Kunal Tanwar — Sat, 18 Feb 2023 20:28:14 +0000

We've all encountered situations where we need to create variables with different units for various purposes, such as margin, padding, or border-radius. In CSS, this typically involves hard-coding each unit individually. However, there's a more efficient way to handle this and save time using SCSS.

To create a range of pixel units using a @for loop in SCSS, you can do the following:

:root {
  @for $i from 1 through 8 {
    --unit-#{$i}: #{$i}px;
  }
}

This will generate the following CSS output:

:root {
  --unit-1: 1px;
  --unit-2: 2px;
  --unit-3: 3px;
  --unit-4: 4px;
  /* ... up to --unit-8 */
}

If you want to convert these pixel units to rem, you can use a helper function:

@use 'sass:math';

@function rem($value) {
  @return math.div($value, 16) * 1rem;
}

Remember to include @use 'sass:math'; as the first line in your SCSS file.

Then, apply the function like this:

:root {
  @for $i from 1 through 4 {
    --unit-#{$i}: #{rem($i)};
  }
}

This will result in the following CSS output:

:root {
  --unit-1: 0.0625rem;
  --unit-2: 0.125rem;
  --unit-3: 0.1875rem;
  --unit-4: 0.25rem;
}

To take it further and use CSS variables within variables, you can do the following:

:root {
  @for $i from 0 through 4 {
    @if $i == 0 {
      --base: rem(1);
    } @else {
      --unit-#{$i * 2}: calc(var(--base) * #{$i * 2});
    }
  }
}

This will result in the following CSS output:

:root {
  --base: 0.0625rem;
  --unit-2: calc(var(--base) * 2);
  --unit-4: calc(var(--base) * 4);
  --unit-6: calc(var(--base) * 6);
  --unit-8: calc(var(--base) * 8);
}

You can customize the base value and utilize the helper function as needed for more flexibility.

Improve Your Visual Studio Code's Look with Custom Fonts

Kunal Tanwar — Wed, 15 Jun 2022 19:42:00 +0000

Are you tired of the default Windows OS font, Segoe UI, making your Visual Studio Code look not-so-great? Take a look at the transformation below:

Today, I'm going to show you a simple way to switch up your VS Code's user interface (UI) font. You can select any font you like and install all its weights, as we're not entirely sure which one VS Code uses. I've personally gone with Inter.

Here's how to do it:

First, locate the workbench.desktop.main.css file. You can usually find it in your Microsoft VS Code installation directory. On my machine, it's here:
C:\Users\<Your User Name>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench.
Open the workbench.desktop.main.css file, ensuring that your code formatter is disabled if you're editing in VS Code.
Look for this piece of code:

.windows {
    font-family: Segoe WPC, Segoe UI, sans-serif;
}

Modify it with your custom font. You can also add a couple of optional properties for improved readability:

.windows {
    font-family: Inter, Segoe WPC, Segoe UI, sans-serif;
    /* works only in Windows and Linux */
    text-rendering: optimizeLegibility;
    /* works only in Mac OS */
    -webkit-font-smoothing: antialiased;
}

Save your file, restart VS Code, and witness the changes!

Your VS Code will now have a fresh new look:

But here's a small caveat: you'll see a [Unsupported] warning every time you open your code editor:

You can disable this warning by clicking on the little cog icon and selecting Don't Show Again:

Unfortunately, the above method won't work for the Context Menu, Search Bar, and Markdown previews (mainly iframes) because their styling is generated by JavaScript, and configuring those can be quite complicated.

For these elements, you'll need to customize the workbench.desktop.main.js file, which you can find in the same location.

Context Menu:

Search for :host-context(.windows)

Search Bar:

Search for DEFAULT_FONT_FAMILY

For Markdown, you'll need to customize a third file. Yes, it's a bit of work, but it's worth it!

Markdown Preview:

The file to modify is markdown.css, located inside: C:\Users\<Your User Name>\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\markdown-language-features\media. Replace the default code with this updated one:

html, body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", system-ui, "Ubuntu", "Droid Sans", sans-serif;
}

Now, for the not-so-great news - you'll need to repeat this process after each VS Code update (which can be frequent). I had plans to create an extension to simplify this process, though I couldn't due to college commitments.

And with that, it's time to bid you goodbye:

How to customize and combine 2 fonts in VS Code?

Kunal Tanwar — Wed, 02 Mar 2022 16:57:59 +0000

We as developers loves many monospace fonts.

Some fonts have good pair of "regular" variant and some ace in "italics".

So, today I will show you how you can combine regular and italic variant of 2 different fonts in VS Code.

Firstly in your settings.json

{
  "editor.fontFamily": 'Roboto Mono',
}

add any font you like. Personally I change my font every week or whenever I feel like changing.

For this I am combining Roboto Mono and italic variant of Operator Mono SSm.

As I have written in my previous article try to find workbench.desktop.main.css.

In windows you can find this file in the following PATH :
C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench

Now, If you were following along open that css file i.e. workbench.desktop.main.css. After opening the respective file make sure your code formatter is disabled because we need to save the minified version not the formatted one.

At the top of the css file create a class .mtki and add following :

.mtki {
  font-family: 'Operator Mono SSm' !important;
}

Don't forget to add !important in order to neglect default font.

Restart your VS Code. The result will look like this -

Important Information

After each update of VS Code you need to repeat the entire process again.

As I have also mentioned in title customize your VS Code. For that paste the following code in your settings.json.

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "entity.name.function",
        "settings": {
          "fontStyle": "bold"
        }
      },
      {
        "scope": "comment",
        "settings": {
          "fontStyle": "italic",
          "foreground": "#616161"
        }
      },
      {
        "scope": ["entity.other.attribute-name", "variable.parameter"],
        "settings": {
          "fontStyle": "italic"
        }
      }
    ]
  }
}

"scope" : "entity.name.function" will convert function name in bold letters.

"scope": "comment" will make comments italic also change color.

"scope": ["entity.other.attribute-name", "variable.parameter"] will make html attributes and function parameters italic.