Org Code Block Syntax Highlighting for JSX

What happened?

Is there a way to enable both syntax highlighting and correct indentation support JSX/React org-mode code blocks?

When opening a .jsx buffer in Doom Emacs the RJSX major mode is used which has correct syntax highlighting and indentation support.

However in org-mode there is no syntax support for jsx code blocks because there is no jsx-mode for Emacs to find.

#+begin_src jsx

#+end_src

Manually pointing org-mode to use the rjsx-mode for jsx code blocks enables correct code indentation but there is no syntax highlighting.

(add-to-list 'org-src-lang-modes '("jsx" . rjsx)

Setting it to js-jsx enables syntax highlighting for React code but it seems to use JavaScript indentation and doesn’t correctly format the JSX parts of the code.

What did you expect to happen?

To be able to enable syntax highlighting and code indentation for React/JSX code blocks in org-mode.

I found out that it is possible to get correct indentation and syntax highlighting by using js-jsx-mode for jsx code blocks.

(add-to-list 'org-src-lang-modes '("jsx" . js-jsx)

However I also use mixed-pitch-mode which for some reason breaks the indentation.

(add-hook! 'org-mode-hook #'mixed-pitch-mode)

This only happens for the jsx code blocks that use the js-jsx-mode. I use mixed-pitch-mode because I prefer to use a variable font for my normal org-mode text as opposed to having the fixed-pitch font everywhere.

Is this the recommended way in Doom Emacs to get jsx syntax-highlighting working for React code blocks in org-mode files? I can find very little information on this online and only figured this out by experimenting with the settings. If so would it be possible to prevent the indentation from breaking in combination with mixed-pitch-mode?

Thank you.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.