Skip to content

GitLab Next

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
GitLab FOSS
GitLab FOSS
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Locked Files
  • Issues 0
    • Issues 0
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
    • Iterations
  • Merge requests 1
    • Merge requests 1
  • Requirements
    • Requirements
    • List
  • Operations
    • Operations
    • Incidents
    • Environments
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Analytics
    • Analytics
    • Code Review
    • Insights
    • Issue
    • Repository
    • Value Stream
  • Snippets
    • Snippets
  • Members
    • Members
  • Activity
  • Graph
  • Create a new issue
  • Commits
  • Issue Boards
Collapse sidebar
  • GitLab.org
  • GitLab FOSSGitLab FOSS
  • Issues
  • #46334

Closed (moved)
Open
Created May 14, 2018 by Erwann Mest@_kud

Use GitLab Syntax Highlighting Preference for Web IDE

GitLab currently supports a Syntax Highlighting preference for users:

Screenshot_2019-06-04_11.58.53

This preference is carried over to source view of files within a project, but is not used within the Web IDE.

Proposal

GitLab should apply the users Syntax Highlighting preference to the Web IDE. Monaco already has built in support for themes and initially ships with vs (default), vs-dark and hc-black.

We should leverage the Monaco API to dynamically set the theme for each user based on their GitLab Syntax highlighting preference.

There is a 3rd party library that provides themes to match preferences that we already support. Also available as npm package.

Example of theme support within Monaco.

Syntax theme Monaco mode (base)
White vs
Dark vs-dark
Solarized Solarized-light
Solarized Dark Solarized-dark
Monokai Monokai

This will provide a more consistent editing experience for users across the GitLab platform and in the Web IDE.

Links / references

  • https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-tokens-and-colors
  • https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.idiffeditorconstructionoptions.html#theme
  • https://www.npmjs.com/package/monaco-themes
Original Description The Web IDE is for the moment in light theme, but Monaco also supports a dark theme. People who are accustomed to writing code in a dark theme should be able to use the Monaco dark theme.

Proposal

If a dark syntax theme is selected in GitLab preferences, the dark Monaco theme should be used. There should be a mapping table in the Web IDE source code so that the corresponding syntax themes can be added to the Web IDE incrementally and easily.

Syntax theme Monaco mode (base)
White vs
Dark vs-dark
Solarized vs
Solarized Dark vs-dark
Monokai vs-dark

Links / references

https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-tokens-and-colors

Edited Jun 04, 2019 by Kai Armstrong
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
None
Due date
None