Commit 67a60580 authored by smit_tooned's avatar smit_tooned Committed by Achilleas Pipinellis

docs/Tsumitsu Fix render issue in GFM documentation page

parent d56e8b00
doc/user/img/color_inline_colorchip_render_gfm.png

11.3 KB

doc/user/img/math_inline_sup_render_gfm.png

1.33 KB

doc/user/img/mermaid_diagram_render_gfm.png

4.48 KB

doc/user/img/task_list_ordered_render_gfm.png

6.1 KB

doc/user/img/unordered_check_list_render_gfm.png

6.06 KB

...@@ -112,8 +112,8 @@ GFM will autolink almost any URL you copy and paste into your text: ...@@ -112,8 +112,8 @@ GFM will autolink almost any URL you copy and paste into your text:
* https://www.google.com * https://www.google.com
* https://google.com/ * https://google.com/
* ftp://ftp.us.debian.org/debian/ * ftp://ftp.us.debian.org/debian/
* smb://foo/bar/baz * <a href="smb://foo/bar/baz">smb://foo/bar/baz</a>
* irc://irc.freenode.net/gitlab * <a href="irc://irc.freenode.net/gitlab">irc://irc.freenode.net/gitlab</a>
* http://localhost:3000 * http://localhost:3000
### Multiline Blockquote ### Multiline Blockquote
...@@ -138,17 +138,13 @@ you can quote that without having to manually prepend `>` to every line! ...@@ -138,17 +138,13 @@ you can quote that without having to manually prepend `>` to every line!
>>> >>>
``` ```
>>> <blockquote dir="auto">
If you paste a message from somewhere else <p>If you paste a message from somewhere else</p>
<p>that</p>
that <p>spans</p>
<p>multiple lines,</p>
spans <p>you can quote that without having to manually prepend <code>&gt;</code> to every line!</p>
</blockquote>
multiple lines,
you can quote that without having to manually prepend `>` to every line!
>>>
### Code and Syntax Highlighting ### Code and Syntax Highlighting
...@@ -269,15 +265,15 @@ https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#emoji ...@@ -269,15 +265,15 @@ https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/user/markdown.md#emoji
Ubuntu 18.04 (like many modern Linux distros) has this font installed by default. Ubuntu 18.04 (like many modern Linux distros) has this font installed by default.
Sometimes you want to :monkey: around a bit and add some :star2: to your :speech_balloon:. Well we have a gift for you: Sometimes you want to <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/monkey.png" width="20px" height="20px"> around a bit and add some <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/star2.png" width="20px" height="20px"> to your <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/speech_balloon.png" width="20px" height="20px">. Well we have a gift for you:
:zap: You can use emoji anywhere GFM is supported. :v: <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/zap.png" width="20px" height="20px">You can use emoji anywhere GFM is supported. <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/v.png" width="20px" height="20px">
You can use it to point out a :bug: or warn about :speak_no_evil: patches. And if someone improves your really :snail: code, send them some :birthday:. People will :heart: you for that. You can use it to point out a <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/bug.png" width="20px" height="20px"> or warn about <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/speak_no_evil.png" width="20px" height="20px"> patches. And if someone improves your really <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/snail.png" width="20px" height="20px"> code, send them some <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/birthday.png" width="20px" height="20px">. People will <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/heart.png" width="20px" height="20px"> you for that.
If you are new to this, don't be :fearful:. You can easily join the emoji :family:. All you need to do is to look up one of the supported codes. If you are new to this, don't be <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/fearful.png" width="20px" height="20px">. You can easily join the emoji <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/family.png" width="20px" height="20px">. All you need to do is to look up one of the supported codes.
Consult the [Emoji Cheat Sheet](https://www.emojicopy.com) for a list of all supported emoji codes. :thumbsup: Consult the [Emoji Cheat Sheet](https://www.emojicopy.com) for a list of all supported emoji codes. <img src="https://gitlab.com/gitlab-org/gitlab-ce/raw/master/app/assets/images/emoji/thumbsup.png" width="20px" height="20px">
Most emoji are natively supported on macOS, Windows, iOS, Android and will fallback to image-based emoji where there is lack of support. Most emoji are natively supported on macOS, Windows, iOS, Android and will fallback to image-based emoji where there is lack of support.
...@@ -286,7 +282,6 @@ On Linux, you can download [Noto Color Emoji](https://www.google.com/get/noto/he ...@@ -286,7 +282,6 @@ On Linux, you can download [Noto Color Emoji](https://www.google.com/get/noto/he
Ubuntu 18.04 (like many modern Linux distros) has this font installed by default. Ubuntu 18.04 (like many modern Linux distros) has this font installed by default.
### Special GitLab References ### Special GitLab References
GFM recognizes special references. GFM recognizes special references.
...@@ -356,11 +351,7 @@ You can add task lists to issues, merge requests and comments. To create a task ...@@ -356,11 +351,7 @@ You can add task lists to issues, merge requests and comments. To create a task
- [ ] Sub-task 3 - [ ] Sub-task 3
``` ```
- [x] Completed task ![alt unordered-check-list-render-gfm](img/unordered_check_list_render_gfm.png)
- [ ] Incomplete task
- [ ] Sub-task 1
- [x] Sub-task 2
- [ ] Sub-task 3
Tasks formatted as ordered lists are supported as well: Tasks formatted as ordered lists are supported as well:
...@@ -371,10 +362,7 @@ Tasks formatted as ordered lists are supported as well: ...@@ -371,10 +362,7 @@ Tasks formatted as ordered lists are supported as well:
1. [x] Sub-task 2 1. [x] Sub-task 2
``` ```
1. [x] Completed task ![alt task-list-ordered-render-gfm](img/task_list_ordered_render_gfm.png)
1. [ ] Incomplete task
1. [ ] Sub-task 1
1. [x] Sub-task 2
Task lists can only be created in descriptions, not in titles. Task item state can be managed by editing the description's Markdown or by toggling the rendered check boxes. Task lists can only be created in descriptions, not in titles. Task item state can be managed by editing the description's Markdown or by toggling the rendered check boxes.
...@@ -393,7 +381,10 @@ The valid video extensions are `.mp4`, `.m4v`, `.mov`, `.webm`, and `.ogv`. ...@@ -393,7 +381,10 @@ The valid video extensions are `.mp4`, `.m4v`, `.mov`, `.webm`, and `.ogv`.
Here's a sample video: Here's a sample video:
![Sample Video](img/markdown_video.mp4) <div class="video-container">
<video src="img/markdown_video.mp4" width="400" controls="true" data-setup="{}" data-title="Sample Video"></video>
<p><a href="img/markdown_video.mp4" target="_blank" rel="noopener noreferrer" title="Download 'Sample Video'">Sample Video</a></p>
</div>
### Math ### Math
...@@ -417,12 +408,11 @@ Example: ...@@ -417,12 +408,11 @@ Example:
Becomes: Becomes:
This math is inline $`a^2+b^2=c^2`$. This math is inline ![alt text](img/math_inline_sup_render_gfm.png).
This is on a separate line This is on a separate line
```math
a^2+b^2=c^2 <div align="center"><img src="./img/math_inline_sup_render_gfm.png" ></div>
```
_Be advised that KaTeX only supports a [subset][katex-subset] of LaTeX._ _Be advised that KaTeX only supports a [subset][katex-subset] of LaTeX._
...@@ -452,15 +442,7 @@ Examples: ...@@ -452,15 +442,7 @@ Examples:
Become: Become:
`#F00` ![alt color-inline-colorchip-render-gfm](img/color_inline_colorchip_render_gfm.png)
`#F00A`
`#FF0000`
`#FF0000AA`
`RGB(0,255,0)`
`RGB(0%,100%,0%)`
`RGBA(0,255,0,0.7)`
`HSL(540,70%,50%)`
`HSLA(540,70%,50%,0.7)`
#### Supported formats: #### Supported formats:
...@@ -492,13 +474,7 @@ Example: ...@@ -492,13 +474,7 @@ Example:
Becomes: Becomes:
```mermaid <img src="./img/mermaid_diagram_render_gfm.png" width="200px" height="400px">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
For details see the [Mermaid official page][mermaid]. For details see the [Mermaid official page][mermaid].
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment