Skip to content

Add source viewer component

Jacques Erasmus requested to merge 345806-add-source-viewer-component into master

What does this MR do and why?

Changes in this MR is part of bigger efforts to refactor the blob viewers and Highlight source code syntax on the frontend using HighlightJS.

This MR adds a source viewer component and uses highlight.js to highlight the source on the frontend when viewing source code.

this MR is behind the :refactor_blob_viewer and :highlight_js feature flags.

Here is what we plan to deliver during this milestone behind the highlight_js feature flag:

task MR
Add the highlight.js dependency !76343 (merged)
Use highlight.js to highlight source code this MR
Ensure highlighted source files matches one of the GitLab themes (white) follow-up

Screenshot

Screenshot_2021-12-10_at_14.56.16

How to set up and validate locally

  1. Enable the Blob Viewer Refactor feature flag
    Feature.enable(:refactor_blob_viewer)
  2. Enable the HighlightJS feature flag
    Feature.enable(:highlight_js)
  3. Open a source file

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #345806 (closed)

Edited by Jacques Erasmus

Merge request reports

Loading