Reduce JS size by using more specific import for react-syntax-highlighter

[pamelafox]

Purpose

With upcoming changes potentially adding JS (#1790), I wanted to make sure we didn't have any unneeded JS. I used the rollup-plugin-visualizer to visualize the current package sizes:

I realized that the syntax highlighter was bringing in all languages which added a ton to our overall size. I've adjusted it to only bring in the language we need, JSON.

Now its footprint is much smaller:

This brings app/backend/static to ~13M, down from 16M.

Does this introduce a breaking change?

When developers merge from main and run the server, azd up, or azd deploy, will this produce an error?
If you're not sure, try it out on an old environment.

[ ] Yes
[X] No

Does this require changes to learn.microsoft.com docs?

This repository is referenced by this tutorial
which includes deployment, settings and usage instructions. If text or screenshot need to change in the tutorial,
check the box below and notify the tutorial author. A Microsoft employee can do this for you if you're an external contributor.

[ ] Yes
[X] No

Type of change

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[X] Other... Please describe: Performance

Code quality checklist

See CONTRIBUTING.md for more details.

• The current tests all pass (python -m pytest).
• I added tests that prove my fix is effective or that my feature works
• I ran python -m pytest --cov to verify 100% coverage of added lines
• I ran python -m mypy to check for type errors
• I either used the pre-commit hooks or ran ruff and black manually on my code.