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

  1. Attempt to automatically detect the language when code blocks are being written and set it to our best guess
  2. Bring consistency to code styling across the repository blob viewer, Web IDE, and code blocks in the Content Editor

Design

Figma: https://www.figma.com/file/z5pzAvKoabaruwKH63lMm6/Code-block---Language-highlighting-%23334576?node-id=8%3A11337

Viewing Block focused and editable
image image
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

  1. What should be the default?
  2. How do we maintain the types of languages and keep that in sync with what is supported elsewhere, like in the Web IDE?
  3. 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

Edited by Michael Le