GitLab Online Compiler

GitLab's markdown compiler has some special features. You can read more about GitLab Flavored Markdown (GFM) at GitLabs's docs or at GitLab's repository.

Other Useful Links

• Personal access tokens
• Markdown API

StyleSheets

GitLab uses ReactJS in front-end. MarkdownPreview uses a stylesheet based on rendered ReactJS stylesheets. You can find such stylesheet using developer tools of your browser (e.g. Developers' Tools -> Resources in Safari, Sources in Chrome, and Style Editor in Firefox) while viewing some .md file on GitLab.

Some changes are necessary to make it compatible with output of API an proper for use at MarkdownPreview:

• add high-level css tweaks:

* {
    box-sizing: border-box;
}

body {
    width: 980px;
    margin-right: auto !important;
    margin-left: auto !important;
}

• change all relative URLs to absolute ones starting with https://assets.gitlab-static.net/assets/
• change .wik, .file-holder, .file-holder .file-content, and .file-holder .file-content.wiki selectors to .markdown-body selectors
• add GitLab's License

Please use a diff tool, check everything and take a look at history of css/gitlab.css before changing anything.

JavaScripts

GitLab uses JavaScript to beautify some parts of output which have js-* class. Syntax highlighting is done on tags with js-syntax-highlight class. Math rendering using KaTeX is done on tags with js-render_math class. Mermaid rendering is done on tags with js-render-mermaid class.

In addition to external javascripts, MarkdownPreview uses a script based on render_gfm, syntax_highlight, render_math, and render_mermaid from GitLab's repository.
Those files are written using jQuery. To avoid adding another not so lightweight dependency, scripts converted to pure js. This reference may be useful to convert jQuery to pure js.

Note: We don't use js codes of lazy_loader for some reasons. Image loading is done in main python classes. See #23 for more details.

Example Markdown

Title
===
Example text.

## Subtitle

> **Note**: 
> Some notes here.

We have a `python` script to calculate $`e = m\cdot c^2`$.

```math
e = m\cdot c^2
```

```python
if __name__ == '__main__':
  main()
```

```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```