Call for Responsibility

[WeronikaMartinsen]

Call for Responsibility

We have a crucial task to enhance our code editor with syntax highlighting for JavaScript. This task requires careful planning, integration, and customization. We need one developer to take overall responsibility for this task, with support from one or two additional developers.
If you are interested in taking on this task, please:
Read through the task description carefully.
Think about the approach you would take to achieve the objectives.
Consider how many additional developers you would need to assist you.
Once you’ve thought it through, let me know if you’re willing to take responsibility for this task. Please also share your proposed approach and the number of developers you think would be necessary to successfully complete this task.

Task: Implement Syntax Highlighting for Code Editor
Objective:
Enhance the code editor within the spreadsheet application by implementing syntax highlighting for JavaScript. This task is crucial for improving code readability and user experience.

Customization and Styling:
Customize the syntax highlighting to align with the design specifications provided.
Ensure different code elements (keywords, variables, strings, comments) are displayed with appropriate colors and styles.

[FP22FD]

As a result of our meeting today, I have some suggestions regarding the task that has been assigned to you, Marius, Aashild and me.

• 1. I suggest sharing here if you feel comfortable taking responsibility for this mini group (@Zentaa1 @aa096 @FP22FD )
• 2. I suggest starting to Google for alternative features/packages
• 3. I suggest sharing our findings and suggestions on Teams
• 4. I suggest sharing a summary of the findings here in the discussion forum
• 5. I suggest sharing the pros and cons here in the discussion forum
• 6. Finally, I suggest sharing a questionnaire with “Polls”, here on the forum, to vote and choose the best alternative

Let us know whether or not you agree with this strategy suggestion. Also feel free to update this draft plan.

Task Ref: Implement syntax highlighting for code editor
Link: https://github.com/orgs/NoroffFEU/projects/104/views/8?pane=issue&itemId=65193664

[FP22FD]

I would like to share my findings about the JavaScript highlighting library.
There are three libraries available for this task:

• Highlighting.js
• Prismjs
• Torchlight

The latter is a paid tool, free only for opensource/no profit, so - to exclude future license problems - I didn't it in this analysis.

In this analysis I considered a few factors:

• Language support
• Themes and customization
• License
• Documentation
• Currently maintained
• Compatibility with Vite bundler
• Bundle size

Language support

Both libraries support a wide variety of programming languages and markup formats.
However, for our application we currently only need the JavaScript language.

Themes and Customization

Highlight.js offers many more ready-made theme options compared to Prismjs.

License

Both libraries have the same license and allow use for commercial use, modification, distribution and private use.
"A permissive license similar to the BSD 2-clause License, but with a third clause that prohibits others from using the name of the copyright holder or its contributors to promote derivative products without written consent."

Documentation

Highlight.js GitHub has more documentation than Prismjs, but both libraries are well documented.

Currently maintained

I evaluated actively developed code and actively closed Issues for both libraries.

Looking to the last commits, it looks like Prismjs is not still actively developed because the last commits has been made 2/3 years ago.
Same for the issues: Prismjs have many open issues in the last few years.
The inactivity in prism is because they are working on v2 and hence they have freezed code and support.
But v2 is in development from too many years to look active and to me it looks too risky to commit to the package.

Highlightjs instead it looks actively developed, with the last commit around a week ago.

Compatibility with Vite bundler

Both libraries are compatible with the Vite bundle.

However only Highlight.js supports tree shaking importing just the language syntax we need.
Prismjs instead - to support optimized bundling/tree shaking - requires a Babel plugin "babel-plugin-prismjs" that requires extra configuration in Vite and rollup.
Ref: https://github.com/mAAdhaTTah/babel-plugin-prismjs

Bundle size

Highlight.js has a very small footprint with just few kB.
I haven't tested Prismjs as it has many disadvantages.

Final consideration

In my opinion, Highlighting.js seems like an appropriate choice for this project.

PoC

I set up a quick PoC with Highlight.js and it worked perfectly.
Ref: https://github.com/FP22FD/poc-highlight-js
Netlify: https://highlight-js-poc.netlify.app/

Extras

• A internal discussion between Prismjs & Highlight.js users: Prism vs Highlight.js: Why choose one over the other? highlightjs/highlight.js#3625

Note

This summary is based from my manual research and not automatically generated from an AI tool like chatGPT.

[Zentaa1]

Hello! I dont have anything extra to add to this opinion as @FP22FD already covered everything found out about those. So i lean towards highlightjs as i think using a up to date lib, and a lib that gets updates constantly is a smart choice!

[WeronikaMartinsen]

Well done, Fernanda!

[aa096]

I also agree with the choice of highlight.js since it has regular updates. Well covered @FP22FD !

[FP22FD]

As we found our choice didn't allow real time editing, we needed to start again to look for a package. We found 2 choices: Monaco Editor (used by Visual Studio) and CodeMirror.

PS. Highlightjs could do the work but it's via an unofficial package highlighted-code.

	Monaco	CodeMirror
Editing and highlighting in real time	✅	✅
Language support (javascript)	✅	✅
Extendible	✅	✅ ↗️
Autocomplete, IntelliSense	✅advanced	✅basic
Themes and customization	✅	⛔ few available
License	✅MIT	✅MIT
Documentation	✅	✅
Currently maintained	✅	✅
Community usage	1.4M/week	1.3M/week
Compatibility with Vite bundler	✅	✅
Bundle size	⛔3277 kb	✅ 474 kb
PoC GitHub	Monaco	CodeMirror
PoC netlify	Monaco	CodeMirror

Resources

Monaco Themes: https://editor.bitwiser.in/ | https://github.com/brijeshb42/monaco-themes
CodeMirror Themes: https://github.com/dennis84/codemirror-themes | https://github.com/codemirror/theme-one-dark | https://codemirror.net/examples/styling/

CodeMirror setup: https://davidmyers.dev/blog/how-to-build-a-code-editor-with-codemirror-6-and-typescript/introduction
Monaco setup: vitejs/vite#1791 (comment) | https://github.com/microsoft/monaco-editor/tree/main/samples/browser-esm-vite-react (extra)

Monaco vs CodeMirror: https://news.ycombinator.com/item?id=30673759

My opinion

I like Monaco as it's more complete and cool.
I will start a poll so everyone can choose the editor they like best.

Note

This summary is based from my manual research and not automatically generated from an AI tool like chatGPT.