How to add data-gutter to code tag

[hadikman]

Hi friends,
Lexcial Playground has "Convert to HTML" feature that convert wysiwyg to html and you can edit the content as html. I copied all relevant codes into mine editor, but I don't have column of lines counter that shows number of each lines. I noticed the the code tag tath render the content in html mode, must have data-gutter attribute but my editor doesn't add data-gutter so I don't have the column of lines counter (I've added this attribute via Inspector and notice it would shows the column of lines counter and the UI is okay). Where I should fix the issue.

Lexical Playground converted content to HTML:

Converted content to HTML without data-gutter (my editor):

Converted content to HTML with added data-gutter manualy via Inspector (my editor):

Thank you in advance 🌹

[Meliceanu]

data-gutter isn't part of the exported HTML — it's added at runtime by the code-highlighting plugin, and the line-number column itself is pure CSS. That's why copying the static "Convert to HTML" output doesn't carry it.

In the source (@lexical/code-prism, CodeHighlighterPrism.ts), updateCodeGutter() builds the line-number string and does codeElement.setAttribute('data-gutter', gutter) ("1\n2\n3…"), run from a mutation listener registered by registerCodeHighlighting(editor). The Playground theme then draws it straight from the attribute:

.PlaygroundEditorTheme__code:before {
  content: attr(data-gutter);
  position: sticky; left: 0; float: left;
}

So, to get the gutter in your editor (not by editing the exported HTML):

1. Register code highlighting — registerCodeHighlighting(editor) from @lexical/code-prism (or the -shiki variant). That's what writes data-gutter live; make sure CodeNode is in your editor's nodes.
2. Copy the gutter CSS — the …code:before { content: attr(data-gutter); … } rule. Without it the attribute is present but nothing renders the column.

If you're displaying the exported HTML statically (outside a live Lexical editor), data-gutter will never appear because it's computed at runtime — either mount the HTML in an editor that has registerCodeHighlighting, or post-process the HTML to inject data-gutter="1\n2\n…\nN" (N = line count) plus the CSS above.

[etrepum]

For export you can restructure the html any way that you like with a DOMRenderExtension override