Fix markdown/*
This commit is contained in:
parent
6841251d1a
commit
f85f9e601a
10 changed files with 134 additions and 138 deletions
|
@ -8,16 +8,16 @@ eleventyNavigation:
|
||||||
|
|
||||||
This section contains frequently asked questions regarding the use of Markdown on Codeberg.
|
This section contains frequently asked questions regarding the use of Markdown on Codeberg.
|
||||||
|
|
||||||
## Why doesn't my markdown render correctly?
|
## Why doesn't my Markdown render correctly?
|
||||||
|
|
||||||
Sometimes markdown is rendered differently on different sides. If your markdown renders
|
Sometimes Markdown is rendered differently on different sides. If your markdown renders
|
||||||
correctly on another forge or in your editor but does not get rendered correctly at Codeberg,
|
correctly on another site or in your editor but does not get rendered correctly on Codeberg,
|
||||||
it is probably due to a difference in the Markdown flavour used by the side/editor.
|
it is probably due to a difference in the Markdown flavour used by the site/editor.
|
||||||
|
|
||||||
Codeberg uses Gitea at it's core. Gitea uses [Goldmark](https://github.com/yuin/goldmark) as rendering engine.
|
Codeberg uses Gitea at its core. Gitea uses [Goldmark](https://github.com/yuin/goldmark) as its rendering engine.
|
||||||
Goldmark is compliant with [CommonMark 0.30](https://spec.commonmark.org/0.30/).
|
Goldmark is compliant with [CommonMark 0.30](https://spec.commonmark.org/0.30/).
|
||||||
|
|
||||||
Please refer to the CommonMark 0.30 specification on what gets rendered and why.
|
Please refer to the CommonMark 0.30 specification on what gets rendered and why.
|
||||||
|
|
||||||
If you want to correct your rendering you either have to adapt to Codebergs rendering or
|
If you want to correct your rendering, you either have to adapt to Codeberg's rendering or
|
||||||
you must find another way to find an approach common to platforms/software used (and/or supported) by you.
|
you must find another way to find an approach common to platforms/software used (and/or supported) by you.
|
||||||
|
|
|
@ -6,16 +6,16 @@ eleventyNavigation:
|
||||||
order: 40
|
order: 40
|
||||||
---
|
---
|
||||||
|
|
||||||
On these pages, you will learn how to use Markdown in issues, texts and articles on Codeberg.
|
In these docs, you will learn how to use Markdown in issues, files and articles on Codeberg.
|
||||||
|
|
||||||
The Codeberg platform (based on [Gitea](https://gitea.io/)) uses Markdown as markup language for text formatting.
|
The Codeberg platform (based on [Gitea](https://gitea.io/)) uses Markdown as the markup language for text formatting.
|
||||||
Gitea uses [Goldmark](https://github.com/yuin/goldmark) as rendering engine which is compliant with [CommonMark 0.30](https://spec.commonmark.org/0.30/).
|
Gitea uses [Goldmark](https://github.com/yuin/goldmark) as the rendering engine which is compliant with [CommonMark 0.30](https://spec.commonmark.org/0.30/).
|
||||||
The documentation of Codeberg is rendered using [markdown-it](https://github.com/markdown-it/markdown-it) which also support CommonMark.
|
The documentation of Codeberg is rendered using [markdown-it](https://github.com/markdown-it/markdown-it) which also supports CommonMark.
|
||||||
|
|
||||||
## Further reading
|
## Further reading
|
||||||
|
|
||||||
You can read more about markdown in the following articles.
|
You can read more about Markdown in the following articles.
|
||||||
Additionally there are a lot of articles on the internet introducing Markdown. Just use the search engine of your choice to
|
Additionally, there are many articles on the internet introducing Markdown. Just use your favorite search engine to
|
||||||
look them up and learn more about Markdown.
|
look them up and learn more about Markdown.
|
||||||
|
|
||||||
- [A strongly defined, highly compatible specification of Markdown](https://commonmark.org/)
|
- [A strongly defined, highly compatible specification of Markdown](https://commonmark.org/)
|
||||||
|
|
|
@ -6,100 +6,100 @@ eleventyNavigation:
|
||||||
order: 20
|
order: 20
|
||||||
---
|
---
|
||||||
|
|
||||||
Markdown files are basically a normal text files. The file extension `.md` specifies that a file can be rendered as Markdown.
|
Markdown files are basically normal text files. The file extension `.md` specifies that a file can be rendered as Markdown.
|
||||||
You can also use Markdown in many object of the Codeberg platform (Issues, Pull-Requests, etc.).
|
You can also use Markdown in many parts of Codeberg (Issues, Pull Requests, etc.).
|
||||||
|
|
||||||
## Text section
|
## Text section
|
||||||
|
|
||||||
To write a markdown file, simply write the text into a text editor of your choice.
|
To write a Markdown file, simply create a new file, and edit it with a text editor of your choice.
|
||||||
Markdown does not consider single line breaks as start of a new paragraph.
|
Markdown doesn't consider single line breaks as the start of a new paragraph.
|
||||||
You can write all your text into one long line or introduce a new line every once in a while.
|
You can write all your text into one long line or introduce a new line every once in a while.
|
||||||
It is common practice to introduce a new line at about 80 characters to enable users to easily read the plain un-rendered version of the markdown file.
|
It is common practice to introduce a new line at around 80 characters to enable users to easily read the plain un-rendered version of the Markdown file.
|
||||||
It is however recommended to make a line break in Markdown at logical steps, e.g. at the end of a sentence.
|
However, it's recommended to make a line break in Markdown when it makes sense, e.g. at the end of a sentence.
|
||||||
It makes diffs easier to understand, as the context of the complete sentence is preserved.
|
It makes diffs easier to understand, as the context of the complete sentence is preserved.
|
||||||
|
|
||||||
If you want to start a new paragraph, use two or more empty new lines to separate the text.
|
If you want to start a new paragraph, use two or more empty new lines to separate the text.
|
||||||
Beware that in the Gitea rendering, text in repos and comment fields the linebreaks are rendered differently.
|
Beware that when rendering with Gitea, line breaks are rendered differently in repos and comment fields.
|
||||||
For example a simple line break is considered in the comments and leads to a new paragraph.
|
For example, one line break in a comment leads to a new paragraph.
|
||||||
|
|
||||||
### Highlighting text sections
|
### Highlighting text sections
|
||||||
|
|
||||||
In text sections it is possible to highlight passages using **bold** and *italics*.
|
In paragraphs, it is possible to highlight passages using **bold** and *italics*.
|
||||||
|
|
||||||
### Bold
|
### Bold
|
||||||
|
|
||||||
To mark a text as bold use two stars at the start of the section you want to highlight `**`
|
To make text bold, use two asterisks at the start of the section you want to highlight `**`
|
||||||
At the end of the section to be highlighted add another two stars `**`.
|
At the end of the section, add another two asterisks `**`.
|
||||||
Alternatively you can use two underline characters `__` at the beginning and the end of the section
|
Alternatively you can use two underscore characters `__` at the beginning and end of the section
|
||||||
to get the same effect
|
to get the same effect.
|
||||||
|
|
||||||
Example:
|
Here are a few examples.
|
||||||
|
|
||||||
```
|
```
|
||||||
This is a **highlighted text**.
|
This is **bold text**.
|
||||||
```
|
```
|
||||||
|
|
||||||
The example gets rendered as:
|
This gets rendered as
|
||||||
|
|
||||||
This is a **highlighted text**.
|
This is **bold text**.
|
||||||
|
|
||||||
```
|
```
|
||||||
This is also __highlighted text__.
|
This is also __bold text__.
|
||||||
```
|
```
|
||||||
|
|
||||||
The example gets rendered as:
|
This gets rendered as
|
||||||
|
|
||||||
This is also __highlighted text__.
|
This is also __bold text__.
|
||||||
|
|
||||||
### Italics
|
### Italics
|
||||||
|
|
||||||
To mark a text in italics use one stars at the start of the section you want to highlight `*`
|
To make text italic use one asterisk at the start of the section you want to highlight `*`
|
||||||
At the end of the section to be highlighted add another two stars `*`.
|
At the end of the section, add another asterisk `*`.
|
||||||
Alternatively you can use one underline character `_` at the beginning and the end of the section
|
Alternatively you can use one underscore character `_` at the beginning and end of the section
|
||||||
to get the same effect
|
to get the same effect.
|
||||||
|
|
||||||
Example:
|
Here are a few examples.
|
||||||
|
|
||||||
```
|
```
|
||||||
This is a *highlighted text*.
|
This is *italic text*.
|
||||||
```
|
```
|
||||||
|
|
||||||
The example gets rendered as:
|
This gets rendered as
|
||||||
|
|
||||||
This is a *highlighted text*.
|
This is *italic text*.
|
||||||
|
|
||||||
```
|
```
|
||||||
This is also _highlighted text_.
|
This is also _italic text_.
|
||||||
```
|
```
|
||||||
|
|
||||||
The example gets rendered as:
|
This gets rendered as
|
||||||
|
|
||||||
This is also _highlighted text_.
|
This is also _italic text_.
|
||||||
|
|
||||||
## Gitea specifics
|
## Gitea-specific formatting
|
||||||
|
|
||||||
### Emoticons
|
### Emoticons
|
||||||
Text may contain references to emoticons which are then rendered as a small image.
|
Text may contain references to emoticons which are rendered as a small image, similar to an emoji.
|
||||||
These are marked using a colon `:`, followed by the identifier of the emoticon to use, followed by another colon `:`.
|
You can render these by typing the name of the emoticon you want to use, surrounded by colons (`:`), like this `:codeberg:`.
|
||||||
|
|
||||||
Examples of the emoticons are: `:codeberg:` leading to <img src="https://codeberg.org/assets/img/emoji/codeberg.png" class="codeberg-design" style="border-style:none;width:1em;height:1em" alt="The Codeberg mountain" /> and `:gitea:` rendered as <img src="https://codeberg.org/assets/img/emoji/gitea.png" class="codeberg-design" style="border-style:none;height:1em;width=1em" alt="The Gitea tea cup" />.
|
Some examples are `:codeberg:` which is rendered as <img src="https://codeberg.org/assets/img/emoji/codeberg.png" class="codeberg-design" style="border-style:none;width:1em;height:1em" alt="The Codeberg mountain" /> and `:gitea:` which is rendered as <img src="https://codeberg.org/assets/img/emoji/gitea.png" class="codeberg-design" style="border-style:none;height:1em;width=1em" alt="The Gitea tea cup" />.
|
||||||
|
|
||||||
### Referencing issue
|
### Referencing issues and pull requests
|
||||||
|
|
||||||
Issues in Codeberg/Gitea can be referenced in the comments of an issue or a pull request by using a hash mark `#` followed by the number of the issue.
|
Issues and pull requests in Codeberg/Gitea can be referenced in the comments of an issue or a pull request by using a hash `#` followed by the number of the issue or pull request.
|
||||||
The renderer will then include a link to the referenced issue into the comment.
|
The renderer will then include a link to the referenced issue into the comment.
|
||||||
Additionally, a ping back link to the comment containing the reference will be added to the issues referenced in this way.
|
After that, a link to the comment containing the reference will be added to the issues referenced in this way.
|
||||||
|
|
||||||
### Checkboxes
|
### Checkboxes
|
||||||
|
|
||||||
You can add checkboxes to comments by using square brackets containing a space `[ ]`. These can be checked/unchecked later without editing the comment.
|
You can add checkboxes to comments by using a space surrounded by square brackets `[ ]`. These can be checked/unchecked later without editing the comment.
|
||||||
This can for example be useful when creating a Todo list.
|
This can for example be useful when creating a Todo list.
|
||||||
|
|
||||||
### Mermaid diagrams
|
### Mermaid diagrams
|
||||||
|
|
||||||
Gitea can render [Mermaid diagrams](https://mermaid-js.github.io/mermaid/#/) in issues, pull-requests and comments.
|
Gitea can render [Mermaid diagrams](https://mermaid-js.github.io/mermaid/#/) in issues, pull requests and comments.
|
||||||
|
|
||||||
Use the render hint `mermaid` on the preformatted section containing the code of the Mermaid diagram.
|
Use the render hint `mermaid` on the preformatted section containing the code of the mermaid diagram.
|
||||||
|
|
||||||
E.g.
|
E.g.
|
||||||
|
|
||||||
|
@ -112,4 +112,4 @@ E.g.
|
||||||
|
|
||||||
is rendered to:
|
is rendered to:
|
||||||
|
|
||||||
![Mermaid Example rendering](/assets/images/markdown/mermaid-example.png)
|
![Mermaid Example rendering](/assets/images/markdown/mermaid-example.png)
|
||||||
|
|
|
@ -6,23 +6,23 @@ parent: Markdown
|
||||||
order: 10
|
order: 10
|
||||||
---
|
---
|
||||||
|
|
||||||
This document should guide you to a use of the Markdown format which is commonly used in Codeberg.
|
This document should serve as a guide for the Markdown format which is commonly used in Codeberg.
|
||||||
|
|
||||||
## Bold
|
## Bold
|
||||||
|
|
||||||
Use two stars at the beginning and the end of a section to highlight the **section in bold**.
|
Use two stars at the beginning and the end of a section of text to **highlight the section in bold**.
|
||||||
|
|
||||||
## Italics
|
## Italics
|
||||||
|
|
||||||
Use one star at the beginning and the end of a section to highlight the *section in italics*.
|
Use one star at the beginning and the end of a section to *highlight the section in italics*.
|
||||||
|
|
||||||
## Links
|
## Links
|
||||||
|
|
||||||
Use `[link description](link)` to link to another section, article or website.
|
Use `[link description](link)` to link to another section, article or website.
|
||||||
|
|
||||||
To link to an url without any Link-Description, surround the link by less-than `<` and
|
To insert a link without a link description, surround the link by less-than `<` and
|
||||||
greater-than `>` characters. This is preferred to just adding an url within the text as it
|
greater-than `>` characters. This is preferred to just adding an url within the text as it
|
||||||
is easier to parse the marked up urls.
|
is easier to parse the URLs.
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|
||||||
|
@ -30,16 +30,16 @@ Example:
|
||||||
|
|
||||||
## Topics
|
## Topics
|
||||||
|
|
||||||
Use ATX-Style topics by adding one or more hash `#` signs to the start of the topic line.
|
Use ATX Style topics by adding one or more hash `#` signs to the start of the topic line.
|
||||||
|
|
||||||
## Preformatted sections
|
## Preformatted sections
|
||||||
|
|
||||||
Use a single backtick character to preformat a word or a section within a line.
|
Use a single backtick characters to preformat a word or a section within a line.
|
||||||
|
|
||||||
Use triple backticks to begin and end a preformatted section.
|
Use three backticks to begin and end a preformatted section.
|
||||||
|
|
||||||
Use rendering hints to tell the renderer whether to syntax highlight your section and which language should be used.
|
Use rendering hints to tell the renderer whether to syntax highlight your section and which language should be used.
|
||||||
|
|
||||||
## Tables
|
## Tables
|
||||||
|
|
||||||
Always delimit both sides of a table with pipes `|`. Keep the tables readable even in the un-rendered text-form.
|
Always delimit both sides of a table with pipes `|`. Keep the tables readable even in the un-rendered text-form.
|
||||||
|
|
|
@ -6,14 +6,14 @@ eleventyNavigation:
|
||||||
order: 50
|
order: 50
|
||||||
---
|
---
|
||||||
|
|
||||||
There are two ways to use preformatted text withing your Markdown document:
|
There are two ways to use monospace preformatted text within your Markdown document:
|
||||||
|
|
||||||
- By using indentation
|
- Using indentation
|
||||||
- By using one or more backticks at the beginning and the end of a preformatted section
|
- Using one or more backticks at the beginning and the end of a preformatted section
|
||||||
|
|
||||||
## Using indentation
|
## Using indentation
|
||||||
|
|
||||||
You can preformat a section of text or code by indenting the code with 4 or more spaces or a tab:
|
You can preformat a section of text or code by indenting the code with 4 or more spaces, or a tab:
|
||||||
|
|
||||||
this
|
this
|
||||||
is
|
is
|
||||||
|
@ -21,12 +21,14 @@ You can preformat a section of text or code by indenting the code with 4 or more
|
||||||
as
|
as
|
||||||
preformatted
|
preformatted
|
||||||
|
|
||||||
It is not possible to add a rendering hint. It is not possible to preformat text within a line using this syntax.
|
Using indentation, it's not possible to add a rendering hint. It's also not possible to preformat text within a line using this syntax.
|
||||||
|
|
||||||
## Using backticks
|
## Using backticks
|
||||||
|
|
||||||
You can preformat a section of text by starting a section of text with one or more backtick characters.
|
You can preformat a section of text by starting a section of text with one or more backtick characters.
|
||||||
|
|
||||||
|
Here, we use 3 backtick characters on its own line, then our text, then another line containing 3 more backticks.
|
||||||
|
|
||||||
```
|
```
|
||||||
this
|
this
|
||||||
is
|
is
|
||||||
|
@ -35,16 +37,16 @@ as
|
||||||
preformatted
|
preformatted
|
||||||
```
|
```
|
||||||
|
|
||||||
You can also preformat a section of text within a line using the backtick syntax.
|
You can also preformat a section of text within a line using backtick syntax.
|
||||||
The following text is for example `preformatted` by using the backtick syntax.
|
The following text is for example `preformatted` by using the backtick syntax.
|
||||||
|
|
||||||
### Rendering hints
|
### Rendering hints
|
||||||
|
|
||||||
Sometime renders use hints to syntax highlight the code in a preformatted section.
|
Sometime renderers use hints to syntax highlight the code in a preformatted section.
|
||||||
|
|
||||||
To provide a hint, simple add the language name at the end of the introductory backtick(s).
|
To provide a hint, simply add the language name at the end of the introductory backtick(s).
|
||||||
|
|
||||||
For example using `shell` as hint will tell the renderer that the given code can be highlighted as shell script:
|
For example, using `shell` as the hint will tell the renderer that the given code should be highlighted as a shell script:
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
#!/bin/bash
|
#!/bin/bash
|
||||||
|
@ -52,7 +54,7 @@ For example using `shell` as hint will tell the renderer that the given code can
|
||||||
echo "Hello world"
|
echo "Hello world"
|
||||||
```
|
```
|
||||||
|
|
||||||
The same would be rendered without syntax highlighting if the hint is not given:
|
The same thing would be rendered without syntax highlighting if the hint is not given:
|
||||||
|
|
||||||
```
|
```
|
||||||
#!/bin/bash
|
#!/bin/bash
|
||||||
|
|
|
@ -6,13 +6,13 @@ eleventyNavigation:
|
||||||
order: 70
|
order: 70
|
||||||
---
|
---
|
||||||
|
|
||||||
Markdown Articles can contain tables to structure presented data.
|
Markdown files can contain tables to structure data.
|
||||||
|
|
||||||
## table syntax
|
## Table syntax
|
||||||
|
|
||||||
Markdown tables are written ("drawn") using the characters pipe `|`, dash `-` and colon `:`.
|
Markdown tables are written ("drawn") using the characters pipe `|`, dash `-` and colon `:`.
|
||||||
|
|
||||||
A simple table looks like this
|
A simple table looks like this:
|
||||||
|
|
||||||
```
|
```
|
||||||
| This | is | a |
|
| This | is | a |
|
||||||
|
@ -27,9 +27,9 @@ A simple table looks like this
|
||||||
The table columns do not have to align in the un-rendered text, but it improves readability to keep everything aligned
|
The table columns do not have to align in the un-rendered text, but it improves readability to keep everything aligned
|
||||||
in the un-rendered form as well.
|
in the un-rendered form as well.
|
||||||
|
|
||||||
Some editors align the table structure automatically.
|
Some editors automatically align the table structure.
|
||||||
|
|
||||||
The first line a table forms the head of the table. It is separated from the rest of the data by a line containing dashes.
|
The first line of a table forms the head of the table. It is separated from the rest of the data by a line of dashes.
|
||||||
|
|
||||||
```
|
```
|
||||||
| Name | Comment |
|
| Name | Comment |
|
||||||
|
@ -45,12 +45,11 @@ The first line a table forms the head of the table. It is separated from the res
|
||||||
| Bob | A good guy, who likes to communicate with Alice |
|
| Bob | A good guy, who likes to communicate with Alice |
|
||||||
| Malroy | Not so nice guy. Tries to mess with the communication of Alice and Bob. |
|
| Malroy | Not so nice guy. Tries to mess with the communication of Alice and Bob. |
|
||||||
|
|
||||||
The line following the header line may contain a formatting help to the renderer.
|
The line following the head may contain formatting help to the renderer.
|
||||||
|
|
||||||
It depends on the place of the colon `:` (if any) how the table is rendered.
|
The location of the colon `:` (if any) modifies how the table is rendered.
|
||||||
|
|
||||||
If the colon is to the left of the line of dashes separating data from the header, the data is rendered in a left-aligned
|
If the colon is to the left of the line of dashes separating data from the header, then the data is rendered left-aligned.
|
||||||
form.
|
|
||||||
|
|
||||||
For example
|
For example
|
||||||
|
|
||||||
|
@ -61,7 +60,7 @@ For example
|
||||||
| or text |
|
| or text |
|
||||||
```
|
```
|
||||||
|
|
||||||
Renders as:
|
renders as
|
||||||
|
|
||||||
| Left oriented rendering |
|
| Left oriented rendering |
|
||||||
|:------------------------|
|
|:------------------------|
|
||||||
|
@ -87,20 +86,20 @@ is rendered as
|
||||||
If the rendering hint is placed on both sides of the dashed line, the data is rendered as centered:
|
If the rendering hint is placed on both sides of the dashed line, the data is rendered as centered:
|
||||||
|
|
||||||
```
|
```
|
||||||
| Centerd rendering |
|
| Centered rendering |
|
||||||
|:-----------------:|
|
|:------------------:|
|
||||||
| 150.0 |
|
| 150.0 |
|
||||||
| or text |
|
| or text |
|
||||||
```
|
```
|
||||||
|
|
||||||
Is rendered as:
|
Is rendered as:
|
||||||
|
|
||||||
| Centerd rendering |
|
| Centered rendering |
|
||||||
|:-----------------:|
|
|:------------------:|
|
||||||
| 150.0 |
|
| 150.0 |
|
||||||
| or text |
|
| or text |
|
||||||
|
|
||||||
Providing no rendering hint leaves it to the renderer to decide how to render the data. Left-aligned is a common default.
|
Providing no rendering hint leaves it up to the renderer to decide how to render the data. Left-aligned is a common default.
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
| Un-hinted rendering |
|
| Un-hinted rendering |
|
||||||
|
@ -119,7 +118,7 @@ Is rendered as:
|
||||||
|
|
||||||
## Table variations
|
## Table variations
|
||||||
|
|
||||||
Some renderers allow to omit the delimiting pipe symbols `|` at the side of the table:
|
Some renderers allow you to omit the delimiting pipe symbols `|` at the side of the table:
|
||||||
|
|
||||||
```
|
```
|
||||||
This | is | a
|
This | is | a
|
||||||
|
@ -127,7 +126,7 @@ This | is | a
|
||||||
simple | table | example
|
simple | table | example
|
||||||
```
|
```
|
||||||
|
|
||||||
Is rendered as:
|
is rendered as
|
||||||
|
|
||||||
This | is | a
|
This | is | a
|
||||||
--- | --- | ---
|
--- | --- | ---
|
||||||
|
|
|
@ -6,22 +6,22 @@ eleventyNavigation:
|
||||||
order: 40
|
order: 40
|
||||||
---
|
---
|
||||||
|
|
||||||
Markdown helps you to divide a document into several parts using topics.
|
Markdown can help you to divide a document into several parts using topics (a.k.a headings).
|
||||||
|
|
||||||
Topics can be specified in two ways:
|
Topics can be specified in two ways:
|
||||||
|
|
||||||
- with one or more leading hash characters `#` (ATX-Style)
|
- with one or more leading hash characters `#` (ATX-Style)
|
||||||
- by underlining a topic with dashes `-` or equal signs `=` (Setext-Style)
|
- by underlining a topic with dashes `-` or equal signs `=` (Setext-Style)
|
||||||
|
|
||||||
The Setext provides only two layers of subdivision and the ATX-Style up to 6.
|
The Setext provides only two layers of subdivision and the ATX-Style provides up to 6.
|
||||||
|
|
||||||
The Codeberg documentation uses ATX-style. In the documentation the first topic
|
The Codeberg documentation uses the ATX-style. In the documentation, the first topic
|
||||||
is omitted as it is already provided in the header section of the documentation file.
|
is omitted as it is already provided in the header section of the documentation file.
|
||||||
See the article on [How to create a new article?](/improving-documentation/create-article.md)
|
See the article on [How do I create a new article?](/improving-documentation/create-article.md)
|
||||||
for further details.
|
for further details.
|
||||||
|
|
||||||
**Note:** This document may seem a little unstructured, as there are a bunch of topics with only a small
|
**Note:** This document may seem a little unstructured, as there are a bunch of topics with only a small
|
||||||
amount of text. Unfortunately there is no other way to present the topic of Topics in Markdown.
|
amount of text. Unfortunately, there is no other way to present Topics in Markdown.
|
||||||
|
|
||||||
### Examples of topics with hash characters
|
### Examples of topics with hash characters
|
||||||
|
|
||||||
|
|
|
@ -6,26 +6,26 @@ eleventyNavigation:
|
||||||
order: 60
|
order: 60
|
||||||
---
|
---
|
||||||
|
|
||||||
It is possible to include images into the rendered form of a Markdown article.
|
It is possible to include images into the rendered form of a Markdown file.
|
||||||
|
|
||||||
Please refer to the [article on Screenshots](/improving-documentation/screenshots/) on how to use and include images in the Codeberg documentation.
|
Please refer to the [article on Screenshots](/improving-documentation/screenshots/) to learn how to use and include images in the Codeberg documentation.
|
||||||
|
|
||||||
The syntax of including images is similar to the syntax of links.
|
The syntax of including images is similar to the syntax of links.
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
![The alternative text](images/image.png "title")
|
![Alternative text](images/image.png "title")
|
||||||
```
|
```
|
||||||
|
|
||||||
![Codeberg Logo](https://design.codeberg.org/logo-kit/horizontal.png "The Codeberg Logo")
|
![Codeberg Logo](https://design.codeberg.org/logo-kit/horizontal.png "The Codeberg Logo")
|
||||||
|
|
||||||
The image link consists of three parts:
|
The image link consists of three parts:
|
||||||
|
|
||||||
- The alternative text - is added in the `alt` attribute of the rendered image
|
- The alternative text - is added to the `alt` attribute of the rendered image
|
||||||
- the link part - is a URI or URL to an image file, which is then included in the rendered article
|
- the link - a URI or URL to an image file, which is then included in the rendered article
|
||||||
- the title - is added into the `title` attribute of the rendered image (most browser show it on mouse-over)
|
- the title - is added to the `title` attribute of the rendered image (most browsers show it on hover)
|
||||||
|
|
||||||
## Location of image files
|
## Location of image files
|
||||||
|
|
||||||
Image files can be placed within the folder structure of your article or documentation.
|
Image files can be placed within the folder structure of your article or documentation.
|
||||||
Apart from that images can be referenced by a URL and are thus included from the internet location the URL points to.
|
Apart from that, images can be referenced by a URL and are thus included from the internet location the URL points to.
|
||||||
|
|
||||||
|
|
|
@ -6,15 +6,15 @@ eleventyNavigation:
|
||||||
order: 30
|
order: 30
|
||||||
---
|
---
|
||||||
|
|
||||||
You can use links to refer to other articles, sections in articles or to other websites.
|
You can use links to refer to other articles, sections in articles or other websites.
|
||||||
|
|
||||||
## Links with description
|
## Links with description
|
||||||
|
|
||||||
It is always good for readability to not just paste an url into your text but to provide
|
It is always good for readability to not only paste a URL into your text but to provide
|
||||||
a description of your link. Only the description of the link will be in the rendered form of
|
a description of your link. Only the description of the link will be in the rendered form of
|
||||||
your text and the link will be added as html-link.
|
your text and the link will be added as an HTML hyperlink.
|
||||||
|
|
||||||
Links with description have the following markup: `[Link description](link-url)`.
|
Hyperlinks have the following markup: `[Link description](link-url)`.
|
||||||
|
|
||||||
For example:
|
For example:
|
||||||
|
|
||||||
|
@ -28,31 +28,30 @@ Gets rendered as:
|
||||||
|
|
||||||
## Links without description
|
## Links without description
|
||||||
|
|
||||||
To add a link using the url withing your text use `<` and `>` to mark the links.
|
To add a link using the URL within your text use `<` and `>` to mark the link.
|
||||||
For example, if you want to add to `https://codeberg.org/` add `<https://codeberg.org>` to your
|
For example, if you want to add a link to `https://codeberg.org/`, add `<https://codeberg.org>` to your
|
||||||
text. This will lead to the following rendering of the link to <https://codeberg.org>.
|
text. This will render as <https://codeberg.org/>.
|
||||||
You can also simply add the link to your text to have the same effect: https://codeberg.org
|
You can also just add the link to your text normally to have the same effect: https://codeberg.org.
|
||||||
However it is easier to parse links in the text if the links are explicitly marked by the less
|
However it is easier to navigate to links if they are explicitly marked by the less than `<` and greater than `>` characters.
|
||||||
than `<` and greater than `>` characters.
|
|
||||||
|
|
||||||
## URIs and URLs
|
## URIs and URLs
|
||||||
|
|
||||||
You can link to another article by specifying the file or path name URI (without specifying the protocol part of an URL).
|
You can link to another article by specifying the file or path name URI (a URL, without specifying the protocol and domain).
|
||||||
|
|
||||||
For example, you can link to the introductory article of this section of the documentation by using its
|
For example, you can link to the introductory article of this section of the documentation by using its
|
||||||
path name in the link:
|
path name in the link:
|
||||||
|
|
||||||
```
|
```
|
||||||
[Link to Introductory article](/markdown/)
|
[Link to introductory article](/markdown/)
|
||||||
```
|
```
|
||||||
|
|
||||||
This is rendered as:
|
This is rendered as:
|
||||||
|
|
||||||
[Link to Introductory article](/markdown/)
|
[Link to introductory article](/markdown/)
|
||||||
|
|
||||||
You can also link to a section in an article by specifying the section using an introducing hash character `#`.
|
You can also link to a heading in an article by specifying the heading using a hash character `#`.
|
||||||
|
|
||||||
For example, you can link to the section on "Links without description" in this same article by using:
|
For example, you can link to the heading on "Links without description" in this same article by using:
|
||||||
|
|
||||||
```
|
```
|
||||||
[Link to the "links-without-description" section](#links-without-description)
|
[Link to the "links-without-description" section](#links-without-description)
|
||||||
|
@ -62,9 +61,9 @@ This is rendered as:
|
||||||
|
|
||||||
[Link to the "links-without-description" section](#links-without-description)
|
[Link to the "links-without-description" section](#links-without-description)
|
||||||
|
|
||||||
You can link to another article's section using the same syntax.
|
You can link to another article's heading using the same syntax.
|
||||||
|
|
||||||
For example, you can link to the section on "Bold" in the article "Introduction to Markdown" by using:
|
For example, you can link to the heading on "Bold" in the article "Introduction to Markdown" by using:
|
||||||
|
|
||||||
```
|
```
|
||||||
[Link to the bold section](/markdown/introduction-to-markdown/#bold)
|
[Link to the bold section](/markdown/introduction-to-markdown/#bold)
|
||||||
|
@ -72,4 +71,4 @@ For example, you can link to the section on "Bold" in the article "Introduction
|
||||||
|
|
||||||
This is rendered as:
|
This is rendered as:
|
||||||
|
|
||||||
[Link to the bold section](/markdown/introduction-to-markdown/#bold)
|
[Link to the bold section](/markdown/introduction-to-markdown/#bold)
|
||||||
|
|
|
@ -6,11 +6,11 @@ eleventyNavigation:
|
||||||
order: 60
|
order: 60
|
||||||
---
|
---
|
||||||
|
|
||||||
You can use lists in your markdown article.
|
You can use lists in your Markdown files.
|
||||||
|
|
||||||
## Unnumbered lists
|
## Unordered lists
|
||||||
|
|
||||||
To use an unnumbered list (bullet point list), simple begin your list items with a dash `-` or a star `*`.
|
To use an unordered list (bullet points), simply begin your list items with a dash `-` or a star `*`.
|
||||||
|
|
||||||
For example:
|
For example:
|
||||||
|
|
||||||
|
@ -24,7 +24,7 @@ For example:
|
||||||
- list
|
- list
|
||||||
```
|
```
|
||||||
|
|
||||||
Gets rendered as:
|
This gets rendered as:
|
||||||
|
|
||||||
- This
|
- This
|
||||||
- is
|
- is
|
||||||
|
@ -43,8 +43,7 @@ To use a numbered list, simply begin your list items with a number.
|
||||||
2. is
|
2. is
|
||||||
3. a
|
3. a
|
||||||
4. numbered
|
4. numbered
|
||||||
5. point
|
5. list
|
||||||
6. list
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Gets rendered as:
|
Gets rendered as:
|
||||||
|
@ -53,10 +52,9 @@ Gets rendered as:
|
||||||
2. is
|
2. is
|
||||||
3. a
|
3. a
|
||||||
4. numbered
|
4. numbered
|
||||||
5. point
|
5. list
|
||||||
6. list
|
|
||||||
|
|
||||||
Note that the numbers do not have to be counted up (even though it is easier to read in the non-renderd form):
|
Note that the numbers do not have to be in the correct order (even though it is easier to read in the non-rendered form):
|
||||||
|
|
||||||
```
|
```
|
||||||
1. This
|
1. This
|
||||||
|
@ -64,7 +62,6 @@ Note that the numbers do not have to be counted up (even though it is easier to
|
||||||
1. also
|
1. also
|
||||||
1. a
|
1. a
|
||||||
1. numbered
|
1. numbered
|
||||||
1. point
|
|
||||||
1. list
|
1. list
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -75,8 +72,7 @@ will also render to a correctly numbered list:
|
||||||
1. also
|
1. also
|
||||||
1. a
|
1. a
|
||||||
1. numbered
|
1. numbered
|
||||||
1. point
|
|
||||||
1. list
|
1. list
|
||||||
|
|
||||||
Some editors even autocorrect this to a correctly numbered list. (So if the example above does no longer start with `1.`
|
Some editors even autocorrect this to a correctly numbered list. (If the example above does no longer start with `1.`
|
||||||
on each line, please feel free to reintroduce the mistake for illustration purposes.)
|
on each line, please feel free to reintroduce the mistake for illustration purposes.)
|
||||||
|
|
Loading…
Reference in a new issue