Skip to content

Improve markdown syntax highlighting in rich text editor

Himanshu Kapoor requested to merge himkp-md-syntax-highlighting into master

What does this MR do and why?

Improve markdown syntax highlighting using highlight.js in rich text editor

Changelog: changed

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Theme Before After
White image.png image

How to set up and validate locally

  1. Edit a wiki page.
  2. In rich text editor, insert a new code block from the image.png dropdown menu.
  3. Select language as markdown.
  4. Enter the following markdown content:
# Heading

This is some **bold text**, _italic text_ and some `code`.

This is a link: [GitLab](https://gitlab.com)

## Subheading

> quoted comment

* list item 1
* list item 2

1. numeric list 1
2. numeric list 2

- [ ] task list item 1
- [x] task list item 2
  1. Notice the syntax highlighting matches the screenshot in the Screenshots section and also very closely matches with the highlighting by the backend (Rouge) above. We cannot get an exact 100% match because Rouge and Highlight.js both use different tokenization techniques.

MR acceptance checklist

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

Edited by Himanshu Kapoor

Merge request reports