Creating custom tokens

[ngtrthinh169TPC]

What pain point are you perceiving?.
I'm trying to add custom token and not sure how to do it or if it's possible

For example, I want to parse

{{ something here }}

into

<div style={{ backgroundColor: "red" }}>something here</div>

I'm reading the extensibility docs and thinking maybe walkTokens or Renderer would work. But all I can achieve is customizing tokens that are already exist. What am I missing?

Here's what I've tried:

walkTokens: (token) => {
  const { type, raw } = token;

  if (
    type === "paragraph" &&
    raw.startsWith("{{ ") &&
    raw.endsWith(" }}")
  ) {
    token.type = "code";
    token.text = token.raw.slice(3, -3);
  }
},

but after this I don't really know what to do next, since I need a new token, not overriding code token.

Describe the solution you'd like
I think this is something markedjs has already solved, but I can't find out how. If this is the case, I can help adding this to the docs.

If this requires something new, the closest thing I can think of is exposing an API for adding custom tokens, but that might ruin the speed and at the least, typescript support(?). If there's nothing we can easily do, maybe I should fork this repo?

[ngtrthinh169TPC]

a reference to what I've tried above: https://qubyte.codes/blog/custom-markdown-blocks-with-marked
but this is deprecated

[UziTech]

You can create a tokenizer extensions like the example under the custom extension docs

Also look at some of the known extensions repos to see how they did it.

[ngtrthinh169TPC]

@UziTech hey this should be enough. Thanks for your help!