Skip to content

Draft: Code Block component for rendering code snippets

Denys Mishunov requested to merge dmishunov/code-snippet-block into master

What does this MR do?

Introduces a new Vue component for rendering the code snippets purely on the frontend. At the moment, all the code snippets are generated on the BE (with Rouge) that creates a massive load and delay in getting the responses on different routes. This MR suggests a component that takes a plain code string and outputs it ina code block with the syntaxis highlighting using monaco.

This is a part of a series of experiments of rendering the code blocks in the product using different approaches:

  1. Using Source Editor with the specially designed read-only extension
  2. Using Monaco's highlighting directly without the editor itself (this MR)
  3. Using highlightjs

To test any of the MRs above, one needs to enable the :refactor_blob_viewer feature flag.

Screenshots or Screencasts (strongly suggested)

How to setup and validate locally (strongly suggested)

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

Does this MR contain changes to processing or storing of credentials or tokens, authorization and authentication methods or other items described in the security review guidelines? If not, then delete this Security section.

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team
Edited by Denys Mishunov

Merge request reports