Custom Syntax Highlighting

[emmajane1313]

Is there a way to customise which specific words in the textarea are colored/highlighted based on a custom regex function or similar? I saw the issue regarding the prism plugins but am unclear on how to implement a custom function with these that is not language related.

For example being able to detect words that start with # and color them blue.

Thanks

[jaywcjlove]

@emmajane1313

react-textarea-code-editor/src/style/index.less

Lines 3 to 63 in 8154d1b

	@media (prefers-color-scheme: dark) {
	.@{w-textarea} {
	--color-fg-default: #c9d1d9;
	--color-canvas-subtle: #161b22;
	--color-prettylights-syntax-comment: #8b949e;
	--color-prettylights-syntax-entity-tag: #7ee787;
	--color-prettylights-syntax-entity: #d2a8ff;
	--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
	--color-prettylights-syntax-constant: #79c0ff;
	--color-prettylights-syntax-string: #a5d6ff;
	--color-prettylights-syntax-keyword: #ff7b72;
	--color-prettylights-syntax-markup-bold: #c9d1d9;
	}
	}
	@media (prefers-color-scheme: light) {
	.@{w-textarea} {
	--color-fg-default: #24292f;
	--color-canvas-subtle: #f6f8fa;
	--color-prettylights-syntax-comment: #6e7781;
	--color-prettylights-syntax-entity-tag: #116329;
	--color-prettylights-syntax-entity: #8250df;
	--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
	--color-prettylights-syntax-constant: #0550ae;
	--color-prettylights-syntax-string: #0a3069;
	--color-prettylights-syntax-keyword: #cf222e;
	--color-prettylights-syntax-markup-bold: #24292f;
	}
	}
	.@{w-textarea}[data-color-mode*='dark'],
	[data-color-mode*='dark'] .@{w-textarea},
	[data-color-mode*='dark'] .@{w-textarea}-var,
	body[data-color-mode*='dark'] {
	--color-fg-default: #c9d1d9;
	--color-canvas-subtle: #161b22;
	--color-prettylights-syntax-comment: #8b949e;
	--color-prettylights-syntax-entity-tag: #7ee787;
	--color-prettylights-syntax-entity: #d2a8ff;
	--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
	--color-prettylights-syntax-constant: #79c0ff;
	--color-prettylights-syntax-string: #a5d6ff;
	--color-prettylights-syntax-keyword: #ff7b72;
	--color-prettylights-syntax-markup-bold: #c9d1d9;
	}
	.@{w-textarea}[data-color-mode*='light'],
	[data-color-mode*='light'] .@{w-textarea},
	[data-color-mode*='light'] .@{w-textarea}-var,
	body[data-color-mode*='light'] {
	--color-fg-default: #24292f;
	--color-canvas-subtle: #f6f8fa;
	--color-prettylights-syntax-comment: #6e7781;
	--color-prettylights-syntax-entity-tag: #116329;
	--color-prettylights-syntax-entity: #8250df;
	--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
	--color-prettylights-syntax-constant: #0550ae;
	--color-prettylights-syntax-string: #0a3069;
	--color-prettylights-syntax-keyword: #cf222e;
	--color-prettylights-syntax-markup-bold: #24292f;
	}