GitLab's realtime Preview Markdown is an editor for everyone

Parker Ennis ·
Sep 21, 2021 · 2 min read · Leave a comment

Fostering better, more meaningful collaboration is an integral part of DevOps and a key part of what GitLab, the complete DevOps Platform, unlocks for developers and their teams. While many developers or engineers feel more comfortable working locally on their machines and spend a majority of their time using a CLI to push code changes, with GitLab you can also use the Web Editor or Web IDE to collaborate and edit content in a much easier, faster, and approachable way.

Starting in GitLab 14.2, editing Markdown content in the Web Editor or Web IDE just got even better.

Introducing the realtime Preview Markdown editor

GitLab Flavored Markdown automatically renders Markdown content in an easy-to-read and easy-to-write plain text language. Although Markdown is inherently more “human-readable” and versatile when writing rich web content, Markdown files can become tricky to work with as they become more verbose and complex.

Easy-to-read and easy-to-write means different roles with varying degrees of technical experience can collaborate on content more efficiently and seamlessly. However, previewing the rendered output of Markdown content to validate the accuracy of any changes has not been as intuitive, requiring an extra step to switch out of the Web IDE or Web Editor where the raw source code lives in order to view the changes from the Preview tab. Frequent context switching back and forth between tabs to validate changes leads to wasted time and can be disruptive to the creative process while writing content.

In GitLab 14.2, now both the Web IDE and Web Editor include an option to preview Markdown in realtime, in a single window. A side-by-side preview panel will display when editing Markdown with a click of a button that will toggle a split view panel in the editor and render the content on the page you’re working on as the changes are being made.

Here’s an example of what this new functionality looks like:

Example of Real Time Markdown Preview side-by-side panels

How do I use it?

It’s very straightforward to start using the side-by-side preview. When you are editing any Markdown file, even a newly created one, you can right-click the editor and select Preview Markdown or use Command/Control + Shift + P to toggle a split-screen live preview of your Markdown content. From there, all you need to do is start writing or editing content and you’ll see your changes in real time!

Example of the Preview Markdown button in the static editor

Everyone can contribute

At GitLab, everyone can contribute and we welcome feedback in any form. As we usher in the new DevOps Platform era and wave goodbye to the all-too-familiar "DIY" style of DevOps, we're excited to iterate and improve with our wider community.

“Get to know @gitlab's realtime Preview Markdown, a Markdown editor for every team member” – Parker Ennis

Click to tweet

Open in Web IDE View source