Improve markdown syntax highlighting in rich text editor
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 |
How to set up and validate locally
- Edit a wiki page.
- In rich text editor, insert a new code block from the dropdown menu.
- Select language as markdown.
- 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
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Himanshu Kapoor