3

I have a question about my Stack Overflow post: How can I change a TextInput's selection and fire its onSelectionChange event in unit testing?

I have some code blocks in my question and my self-answer. Every single one of the code blocks has syntax highlighting declared for either ts or tsx, like this:


```tsx
some code here
```

What is syntax highlighting and how does it work? says this should be just fine as a way to declare my syntax highlighting and tsx is a supported name. And yet, I have no syntax highlighting! This is a screenshot:

screenshot of code from my post which is all black text with no syntax highlighting

Even the pure ts block doesn't have syntax highlighting.

two lines of ordinary typescript code in all black text

I can see syntax highlighting in other posts. Why is processing a sorted array faster than processing an unsorted array? has colored text just fine, as in this screenshot:

screenshot of good syntax highlighting in a c++ code block

Even more surprisingly I can actually get working tsx syntax highlighting elsewhere on the site for this exact code—I had it while using the rich text editor on the ask a question page! If I copy my code over there now, wrapped with tsx code block markdown as seen at the top of this post, I get exactly the syntax highlighting I'd expect. Here's a screenshot of it, with a peek at the markdown so you can see it's exactly the same kind of code block I'm using in my question:

the "ask a question" page showing some markdown for my code... ...which produces, in the rich text editor, a perfectly syntax highlighted block of code

0

2 Answers 2

6

When you specify a language for a code block without the lang- prefix, like with ```tsx, you're telling the highlighter to go look at the tag to get a highlighter hint (this is also mentioned in that same FAQ, though maybe not as prominently as it should be).

Unfortunately, doesn't have a highlighter set, which means the experience will vary from fine to bad to no highlighting at all, depending on some other factors.

Replacing ```tsx with ```lang-tsx (or lang-ts, since they mean the same thing, as you correctly recognized from the FAQ) will fix the problem:

type Selection = { start: number, end?: number };

const Component = () => {
  const [value, setValue] = useState("");
  const [selection, setSelection] = useState<Selection>({ start: 0, end: 0 });

  // do some things with value and selection, e.g.:
  useEffect(() => {
    console.debug(value.slice(selection.start, selection.end));
  }, [value, selection.start, selection.end]);

  const onSelectionChange = (event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
    setSelection(event.nativeEvent.selection);
  };

  return (
    <TextInput
      testID="input"
      value={text}
      onChangeText={setMessageText}
      selection={selection}
      onSelectionChange={onSelectionChange}
    />
  );
}

...

const input = screen.getByTestId("input");
fireEvent.changeText(input, "some text");

Looks like someone went ahead and edited these into your post already.

1
  • 1
    Thank you! I think I've been confused by the second bullet point under "How do I use syntax highlighting?". It provided an example of using lang-typescript without the prefix after a triple backtick: lang-typescript is on the list and I can drop the lang- prefix in this context. The way I read it, it naturally followed that since lang-tsx is also on the list, I can drop the prefix and just use tsx after a triple-backtick. I wonder now what the rich text editor was doing. I'm appreciative of the edit to my question. I'll make a similar edit to my answer. Commented Jul 10 at 18:10
2

and tsx is a supported name

No, it's not, lang-tsx is on the list, tsx isn't.

As for the rich text editor or preview accepting just tsx they use different code and hence sometimes produce different results as the actual markdown renderer (for example tables are only supported on the backend when prefixed with an empty line, the preview renders them correctly even without that).

0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .