[FEAT]: Implement programming language selection dropdown with dynamic code syntax highlighting

[harmeetsingh11]

Feature Description

Overview:

Enhance the Original Code component's title bar to include a dropdown menu for selecting programming languages. Depending on the selected language, implement code syntax highlighting and display line numbers for a better code viewing experience.

Expected Behavior:

1. The title bar of the code component should have a dropdown menu for selecting programming languages.
2. Upon selecting a language from the dropdown, the code entered/pasted in the component should be code syntax-highlighted accordingly.
3. Line numbers should be visible alongside the code.

Steps to Reproduce:

1. Navigate to a page with a code component.
2. Observe the title bar for the presence of the programming language dropdown.
3. Select different programming languages and note the changes in code syntax highlighting and the appearance of line numbers.

Environment:

• Browser: Chrome
• Device: Desktop

Record

• I have checked the existing issues
• I have read the Contributing Guidelines
• I agree to follow this project's Code of Conduct
• I want to work on this issue

[hemant933]

sir , i want to work on it . Plz assign it to me

[harmeetsingh11]

@hemant933 Are you a contributor in Codepeak program?

[hemant933]

Yes

…

On Sun, 24 Dec 2023, 9:42 pm Harmeet Singh, ***@***.***> wrote: Are you a contributor in Codepeak program? — Reply to this email directly, view it on GitHub <#3 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZAZIZXIZHQEQ62D2VZFLX3YLBH53AVCNFSM6AAAAABAH7GVF6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRYGU2TAMZWGM> . You are receiving this because you commented.Message ID: ***@***.***>

[harmeetsingh11]

@hemant933 the issue has been assigned to you and you can start working on it:)

[hemant933]

Thanks, I will!

…

On Sun, 24 Dec 2023, 11:28 pm Harmeet Singh, ***@***.***> wrote: @hemant933 <https://github.com/hemant933> the issue has been assigned to you and you can start working on it:) — Reply to this email directly, view it on GitHub <#3 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZAZIZR5C6HPOBEDXP655S3YLBUNJAVCNFSM6AAAAABAH7GVF6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRYGU3DONRZGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[hemant933]

sir i also pull a request of hero.tsx plz consider it

[hemant933]

i created a PR plz review it

[Hrx4]

Hey @hemant933 assign this issue to me under JWOC

[harmeetsingh11]

@Hrx4 the issue has been assigned to you, you can start working on it.

[sumit-kumar-jha1709]

@harmeetsingh11 if the contribution oppotunity is open for this issue, then pray assign me this issue under JWOC.

[harmeetsingh11]

@sumit-kumar-jha1709 the issue has been assigned to you :)

[RahulRudra81]

Can you assign this to me and add tags for vsoc24 also because I am a participant in both so can get it evaluated for both. Also can you please rethink for the level like it could be a level 3 and I will make It dynamic such that the text in the editor will be bydefault text and when you select any option it will change the formatting according to the selected language @harmeetsingh11

[harmeetsingh11]

@RahulRudra81 Yes, sure. I am assigning this issue to you.
The default text in the editor will be JavaScript, with syntax highlighting and formatting. Upon changing the language, the syntax highlighting and formatting will also change accordingly. Wish you all the best👍