CodeBean Frontend

The frontend repository for CodeBean.

Package Information

• Next.js
• TypeScript
• ESLint & Prettier
• Tailwind CSS
• React Select
• For displaying and writing in code blocks and highlighting syntax:
  • react-code-blocks
  • react-simple-code-editor
  • Prism.js and babel-plugin-prismjs

Setup & Run

1. Install required packages

$ yarn

2. Run the development server:

$ yarn run dev

Adding more languages to be syntax-highlighted

babel-plugin-prismjs is a Babel plugin, and is used to support Prism.js with React with Babel.

Any language that should be syntax-highlighted in the code editor must be included in .babelrc, to be bundled with Prism.

You can take a look at the languages available for Prism.js here.

The way I did is creating a dictionary of supported languages in Prism.js to be used in the website in PrismUtils.ts, which must be included in .babelrc.

By doing this, I am able to manage supported languages for Prism.js like a type, and also make it in sync with react-code-blocks, which are totally different modules.