I am using PostgreSQL language and finding some trouble with syntax highlighting.
Here is the link for codemirror try Try CodeMirror
With the same query, the highlighting is done different in React CodeMirror - CodeMirror component for React. with language pgsql. It looks correct.
I have attached the screenshots to show the difference.
Is there anything change recently.
Those are using different themes. The highlighting being different is expected.
No I am not talking about the colors. If I inspect it in the console, the keywords are not identified.
Please check the screenshots.
Not all themes style all tokens.
I think I am failing to explain. What you mean is the parsing of text depends on themes? I thought it is based on lang parser.
What I am trying to say is, I am trying to write a custom theme. But since the tokens are not identified there color doesn’t change.
Like I shared in the screenshot - public.film_in_stock is read as “public”, “.”, “film_in_stock” all separately.
But, latest code reads it as single word. How do I change the styling in this case?
The parsing doesn’t depend on the theme, but the highlighting spans that are generated does. If a highlight tag isn’t styled by the theme, no span will be created for it.
So it looks mandatory to define a theme first? I am using syntaxHighlighting(classHighlighter) to change the colors.
Hi @marijn,
How can I proceed with this please?
Read the docs, read what I told you before, figure it out. The fact that I provide a forum does not imply that I will hand-hold every non-paying user through every issue they run into, sorry.
Hi @marijn,
I definitely did a good search in docs/SO and other places before asking here. Nevermind, thanks.
@adityatoshniwal : were you able to find a solution for this ?
import {
syntaxHighlighting,
} from '@codemirror/language';
import {tagHighlighter, tags} from '@lezer/highlight';
export const extendedClassHighlighter = tagHighlighter([
{tag: tags.keyword, class: 'tok-keyword'},
{tag: tags.number, class: 'tok-number'},
{tag: tags.string, class: 'tok-string'},
{tag: tags.variableName, class: 'tok-variableName'},
{tag: tags.propertyName, class: 'tok-propertyName'},
{tag: tags.local(tags.variableName), class: 'tok-variableName tok-local'},
{tag: tags.definition(tags.variableName), class: 'tok-variableName tok-definition'},
{tag: tags.special(tags.variableName), class: 'tok-variableName2'},
{tag: tags.definition(tags.propertyName), class: 'tok-propertyName tok-definition'},
{tag: tags.operator, class: 'tok-operator'},
{tag: tags.comment, class: 'tok-comment'},
{tag: tags.punctuation, class: 'tok-punctuation'},
{tag: tags.typeName, class: 'tok-typeName'},
{tag: tags.namespace, class: 'tok-namespace'},
{tag: tags.name, class: 'tok-name'},
{tag: tags.standard(tags.name), class: 'tok-name2'},
]);
export default syntaxHighlighting(extendedClassHighlighter);
I’m using this now. schema name and object name are separated in dom but they’re still identified as tok-name.