Enhance Language Selection with a Dropdown List for Syntax Highlighters.

[keertyverma]

Currently, when a user enters a language name, the CDN dynamically loads the corresponding syntax highlighter.
If the user mistypes the language name, the syntax highlighter fails to load properly, and the typo remains displayed in the bottom-right corner of the code editor.

This can cause confusion, as no error is raised if the syntax highlighter fails to load correctly, leaving users without feedback on the validity of their input.

Proposed Improvement:

1. Language Selection List: Replace the input box with a dropdown list of predefined languages. This ensures that only valid languages are selected, preventing syntax highlighter errors.

2. Custom Language Option: Provide a fallback mechanism allowing users to add custom languages to the list if their desired language is not available.

This update will enhance user experience by reducing errors and improving the accuracy of syntax highlighting.

Thanks for your help!

[calumk]

@keertyverma Something like this? (not yet finished)
If a prefefined set of languages is provided, then a select to choose them is provided,
Else it falls back to the text-entry method?

[keertyverma]

Apologies for the delayed response! Your approach is close to what I had in mind, but there’s a slight difference.

I was thinking of a dropdown listing languages from the code plugin settings, ensuring valid selections. If a language isn’t in the list, users can enter it in an input box at the top of the dropdown.

Suggested Implementation

• Dropdown for Predefined Languages – Users can select from a predefined list to avoid typos.
• Input Box Inside Dropdown – An input field at the top of the dropdown allows users to manually enter a language if they don’t find it in the list.
• Input Validation - Since the CDN dynamically loads the syntax highlighter, it may not provide a direct way to detect if a
  language fails to load. To handle this:
  • If possible, we should check for errors when the CDN fails to load an invalid language and display an error message.
  • If error handling is not feasible, it would be better to prevent updating the invalid language name displayed at the bottom-right of the editor to avoid confusion.

Let me know your thoughts! Thanks for working on this 😊

[calumk]

All of these are good suggestions but I am time short at the moment

Are you able to work on any of this and raise a PR or no?

[keertyverma]

Got it! I can work on this and raise a PR. I'll start implementing the approach I suggested and keep you posted. Thanks!

[keertyverma]

@calumk I've implemented the suggested implementation in PR #12.

I'm eager to get these changes merged as I need them for my project. Please let me know if you have any questions or need any clarifications—I’d be happy to help! 😊