GitLab Create Editor Group, 17 Aug 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Markdown Live Preview

Description

The walk-through of the Markdown Live-Preview feature coming to GitLab in 14.2

A

Hello, I'm dennis I'm the stuffed frontal engineer on create editor team, and today I would like to talk to you about markdown preview, the feature that we have in our editors across gitlab product. I mean single file, editor experience in web id, so let's take a look at it.

A

Historically, when we are editing the file markdown files, we have this preview button that click clicking, which brings us the preview of the file. We are editing uh at the moment so far so good. The problem is that it also implies the context. Switching you either add it or you preview, never together, never up until now.

A

In 14.2 we introduced the live preview of the markdown files and how does it work? So, let's assume we are in the.

A

Single file editor: we are editing in markdown file so by right clicking in the editor. We get this preview markdown option or if you're, a keyboard user, advanced keyboard user, you can use shift command, p or shift control p on windows machines.

A

It will half the width of the editor and will show you the live preview of the file you're editing at the moment.

A

Let's see whether it works and with some delay. Just because my machine is doing hard work recording this video, you will see the content being updated here and it's it's working very easy. It also supports.

A

A

Flavored markup that we have in other fields. There is one issue: it won't show you this um pop-up, where you can select the select as suitable icon as we have it in the notes or description, but that might be the next feature of the source editor who knows anyway. This is how the markup works. Here you can close the mark, the preview. You can open the preview and it's it's here.

A

uh How does it work in web id exactly the same, so we are opening the markdown file takes some time we can. We can click command shift p for mac users, and here we go.

A

The preview gets updated nearly right away again. It takes some time because if my machine is very slow now, but that's how it works, it also works does an interesting thing uh it. It is pretty flexible. So, let's assume, while working with the markdown file, you suddenly realize. Oh, it should be the txt file, and here we go it's gone, the preview is gone, the high syntax highlighting is gone, is gone and the menu the context menu item is gone, so you won't be able to switch the live preview for your text files.

A

If you switch back to the my down file here, we go, we are back to normal, might be not very convenient, not not very useful when you already have a file, but where it this feature shines is actually. When you create a new file. When we create a new file, we don't know whether it's going to be the markdown or any other type of the files. So naturally this is the plain source editor that has no markdown extension um enabled.

A

So if we, for example, call it txt, food.txt still won't show anything here, but if we start adding the markdown file mark markup and rename the file to markdown, we got the syntax highlighting, but we also get the preview feature, and this is very convenient when you create the new files, because historically, when you were creating the files, as you can, I'm sorry, as you can see, there is no preview button, so you cannot preview the files that are new, even though there are markdown files.

A

Now this problem is solved, so that's that was about live preview. If you will find any blog or anything, it's just the matter of creating an issue. Thank you very much.