jsx.nanorc

gistfile1.txt

## JavaScript/JSX
syntax "jsx" "\.jsx?$"

## Comments
color brightgreen "//.*"
color brightgreen "/\*.*\*/"

## Strings
color brightyellow "\"[^\"]*\""
color brightyellow "\'[^\']*\'"
color brightyellow "\`[^\`]*\`"

## JavaScript Keywords
color cyan "\<(if|else|while|for|break|continue|return|switch|case|default|function|var|let|const|await|async|yield|import|from|export|default|try|catch|finally|throw|class|extends|new|delete|typeof|void|in|instanceof|true|false|null|undefined)\>"

## Function and Class Declarations
color brightblue "\<(function|class)\>[ \t]*[\w]+"

## JSX Keywords
color magenta "\<\/?[\w]+"
color magenta "\<[\w]+"
color magenta "\</[\w]+\>"

## React.Fragment Tags
color magenta "\<\>\<\/\>\>"
color magenta "\<React.Fragment\>"
color magenta "\<\/React.Fragment\>"

## Properties and Attributes
color green "\<[\w]+\=[\'\"][^\'\"]*[\'\"]"

## Events
color orange "\<[\w]+(On[A-Z][\w]+)\=[\'\"][^\'\"]*[\'\"]"

## Code Blocks and Expressions in {}
color red "\{[^\}]*\}"

## Spread Operator and Expressions
color brightred "\{\.\.\.[^\}]*\}"
color brightred "\{[^\}\{]*\}"

## Hooks
color brightcyan "\<(useState|useEffect|useContext|useReducer|useCallback|useMemo|useRef|useImperativeHandle|useLayoutEffect|useDebugValue)\>"

## Imports and Exports
color brightmagenta "import[^\n]+"
color brightmagenta "export[^\n]+"

## Template Strings with Expressions
color brightyellow "\`[^\`]*\$\{[^\}]+\}[^\`]*\`"