How is code highlighting supposed to work?

[sherrellbc]

The documentation on this is rather sparse (none?).

https://lexical.dev/docs/api/modules/lexical_code
https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/CodeHighlightPlugin/index.ts

I've pieced together this example from various sources online, as well as scouring the code and what documentation does exist (it's mostly just an API reference without any explanation of how to use it).

https://codesandbox.io/p/sandbox/stoic-pasteur-j3czn4

With the above code I can see in developer tools that the editor's code appears to be tokenized as you would expect ...

but no colors are applied

Am I missing something or is this an issue specifically with @lexical/markdown? From looking at the code I can see that prismjs is used internally. Though I am unable to get it to properly apply.

Can code highlightning be used with either RichTextPlugin and PlainTextPlugin? I've tried both.

Also, shouldn't <code> generally be wrapped in <pre>? Without that I'm not sure how to distinguish inline code from block code.

[2wheeh]

My guess:

In the lexical state, code block is CodeNode and inline code is TextNode.
lexical uses a <code> for both when creating DOM:
block:

lexical/packages/lexical-code/src/CodeNode.ts

Lines 104 to 113 in 9d247ac

	createDOM(config: EditorConfig): HTMLElement {
	const element = document.createElement('code');
	addClassNamesToElement(element, config.theme.code);
	element.setAttribute('spellcheck', 'false');
	const language = this.getLanguage();
	if (language) {
	element.setAttribute(LANGUAGE_DATA_ATTRIBUTE, language);
	}
	return element;
	}

inline:

lexical/packages/lexical/src/nodes/LexicalTextNode.ts

Lines 99 to 102 in 9d247ac

	function getElementOuterTag(node: TextNode, format: number): string | null {
	if (format & IS_CODE) {
	return 'code';
	}

And I think code highlighting should be used with RichTextPlugin as playground:

lexical/packages/lexical-playground/src/Editor.tsx

Line 155 in 9d247ac

{isRichText ? (

[sherrellbc]

Thanks for the reply here, but as you can see from my linked code sandbox (and the picture above) there is no <pre> wrapping <code>. Either those unit tests are no longer working or it is testing some different use-case than I have contrived here.

In the lexical state, code block is CodeNode and inline code is TextNode.
That may be, but I was concerned moreso with applying CSS to inline vs block code with e.g.

pre code {} //block code
code {} //inline code

But without <pre> I'm not sure how to do this. Anyway, code should be wrapped in a pre and a workaround should not be necessary here.

Code highlighting seems to work over at the Playground, but only if you first apply the code in markdown and then switch back. Typing the code out and then marking it as a code block from the rich editor's code button does not work (and in fact the formatting is different from the markdown->text path as well).

The playground also does not emit <pre> wrapping <code>, but it does very clearly apply many more classes to the tokenized code blocks that likely have something to do with which colors are applied; this does not happen in my code sandbox example. Not sure what the differences are.

[sherrellbc]

You can see from this code that it is also transforming the markdown in a similar way. Though it appears to assume that first node of the root node will be a code block itself with language set to markdown. It creates this code just below in the default case. This is the only major difference I can spot.

lexical/packages/lexical-playground/src/plugins/ActionsPlugin/index.tsx

Lines 143 to 154 in 9d247ac

	if ($isCodeNode(firstChild) && firstChild.getLanguage() === 'markdown') {
	$convertFromMarkdownString(
	firstChild.getTextContent(),
	PLAYGROUND_TRANSFORMERS,
	);
	} else {
	const markdown = $convertToMarkdownString(PLAYGROUND_TRANSFORMERS);
	root
	.clear()
	.append(
	$createCodeNode('markdown').append($createTextNode(markdown)),
	);

PLAYGROUND_TRANSFORMERS here is a custom list that prefixes a few transformers to the same ones exported from @lexical/markdown.

[2wheeh]

but it does very clearly apply many more classes to the tokenized code blocks that likely have something to do with which colors are applied; this does not happen in my code sandbox example

In your code, you also need to pass theme for the inline code and code block:

lexical/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts

Lines 13 to 18 in 9d247ac

	const theme: EditorThemeClasses = {
	blockCursor: 'PlaygroundEditorTheme__blockCursor',
	characterLimit: 'PlaygroundEditorTheme__characterLimit',
	code: 'PlaygroundEditorTheme__code',
	codeHighlight: {
	atrule: 'PlaygroundEditorTheme__tokenAttr',

The DOM you are seeing on the DevTools is created by createDOM through lexical state which have elements like CodeNode, TextNode.
and while creating DOM, classes are added as you pass as theme.

[sherrellbc]

I see. I certainly missed adding the theme. Now I see the updated classes in each of the items of the deconstructed code block. I used the same theme as the playground, so it now seems quite similar.

And so now highlighting is working as expected. Many thanks for your help here. I have used other highlighting tooling in the past that was far more opinionated at color scheme and such, so it was lost on me that both the theme object + CSS is required to make it work here.