Choose language type for code blocks in the Content Editor
Problem to solve
The Content Editor renders code blocks using syntax highlighting but there is no control over what syntax to use. Syntax highlighting can be a critical aspect of reading and parsing code blocks and incorrect highlighting can make it hard to read code examples.
Proposal
Let the author select the language for a code block. I should be able to click a dropdown and select the language from a list.
Languages to select from are derived by supported languages for highlight.js:
- HTML
- Bash
- C++
- C#
- CSS
- Markdown
- Diff
- Ruby
- Go
- TOML
- Java
- JavaScript
- JSON
- Kotlin
- Less
- Lua
- Makefile
- Perl
- Objective-C
- PHP
- Python
- R
- Rust
- SCSS
- Shell
- SQL
- Swift
- YAML
- TypeScript
- VB .NET
User Experience Details
When editing a file in the Content Editor, I should be able to:
- Create a new code block with a default (plaintext) styling
- Choose a syntax highlighting language from supported languages in
highlight.js
- Override the syntax highlighting language on any existing code block in the document
- Preview the syntax highlighting immediately (the code block should be styled without having to save the document)
Future iterations
In later iterations, we could
- Attempt to automatically detect the language when code blocks are being written and set it to our best guess
- Bring consistency to code styling across the repository blob viewer, Web IDE, and code blocks in the Content Editor
Design
Viewing | Block focused and editable |
---|---|
Scrolling |
---|
scrolling-codeblock |
Scrolling behaviour
Currently codeblocks do not have a limit on their height. The height is based on the content of the codeblock. When a codeblock is taller than the viewable area during editing, then the vertical scroll is associated to the editor not the codeblock.
In the future we could consider vertical scrolling on a codeblock for blocks larger than X lines. For example with snippets while editing after 28 lines there is vertical scrolling but when viewing the snippet it shows all of the lines.
Questions
- What should be the default?
- How do we maintain the types of languages and keep that in sync with what is supported elsewhere, like in the Web IDE?
- Is there any way we can auto-detect the language?
This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.
Implementation guide
- Read the Content Editor development guidelines
- Read the guide for implementing custom extensions in Tiptap
- Read the guide for implementing node views in Tiptap
- Create a node view wrapper for the
code_block_highlight
extension. - We recommend using a dropdown component with inline filter search to display the list of available languages. See this GitLab UI example as a reference https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-dropdown--with-header-and-footer
- The MR !69131 (merged) should be helpful to provide a good head start.