Add Code Highlighting

[aayushai]

Add Code Highlighting to Output and Input

Description:

Improve the readability of the output by adding syntax highlighting for the converted code. Use a library like Prism.js or Highlight.js.

Action Items:

• Add syntax highlighting to the output code block.
• Ensure it matches the selected language (e.g., JavaScript, Python, etc.).

Example Code:

import Prism from 'prismjs';

<pre className="language-js">
  <code dangerouslySetInnerHTML={{ __html: Prism.highlight(outputCode, Prism.languages.javascript, 'javascript') }} />
</pre>

Reference:

• Use Prism.js for language-based code highlighting.

[peterdanwan]

Hello! I'd like to try my hand at this issue - may I be assigned this particular issue?

[aayushai]

Yeah sure, go ahead @peterdanwan .

[peterdanwan]

Hi @aayushai, I was wondering if I could file a separate issue with regards to standardizing the formatting of the code via a .vscode/settings.json file + .prettierrc file (this way, there will be less lines of code changed simply due to changes in quotations, etc.).

For example, I noticed when I saved the code I was working on, a lot of code was changed simply due to formatting changes (as opposed to logic changes). The picture below shows where my formatter tends to add trailing commas, or switch things from double-quote to single-quote.

Can I create a separate issue for this and if so, would you have any preferences with regards to trailing commas and your preferred default quotations?

This is a sample .vscode/settings.json that I have:

{
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "files.eol": "\n",
  "files.insertFinalNewline": true
}

This is a sample .prettierrc file that I have:

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "insertPragma": false,
  "proseWrap": "preserve",
  "requirePragma": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "printWidth": 100
}