Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WARNING: Could not lex literal_block as "jsx". Highlighting skipped. #15

Open
stevepiercy opened this issue Feb 5, 2022 · 3 comments
Open

Comments

@stevepiercy
Copy link
Contributor

When I attempt to highlight the following code snippet using Sphinx, MyST, and jsx-lexer, Sphinx returns a warning:

WARNING: Could not lex literal_block as "jsx". Highlighting skipped.

```jsx
import React from 'react';

const View = props => {
  return <div>I'm the Block view component!</div>;
};

export default View;
```

FWIW, if I try js as the lexer, it also does not lex.

See plone/volto#3038

@stevepiercy
Copy link
Contributor Author

stevepiercy commented Feb 6, 2022

Apparently the lexer does not permit ' within HTML tags. This gets lexed correctly:

import React from 'react';

const View = props => {
  return <div>I am the Block view component!</div>;
};

export default View;

@stevepiercy
Copy link
Contributor Author

We found another lexer bug.

If I remove aria-label="Cancel", or change it to camel-case as ariaLabel="Cancel", then it gets lexed. However the ReactJS docs specify that kebab-case for ARIA attributes is required.

```jsx
<button className="cancel" aria-label="Cancel" onClick={() => this.onCancel()}>
  <Icon
    name={clearSVG}
    className="circled"
    size="30px"
    title={this.props.intl.formatMessage(messages.cancel)}
  />
</button>
```

@stevepiercy
Copy link
Contributor Author

I confirm that v2.0 fixes the second example with aria-* attributes, but not the first example with single quotes ' in the text of the HTML tag. I gave it a try but... oof! the JavaScript lexer is a monster!

If only I could figure out how to lex arbitrary HTML tags and their text inside of jsx!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant