The basic syntax outlined in the original Markdown design document includes many elements needed in everyday life, but for some people it was not enough. This is where the extended syntax comes in.
Many people and organizations have undertaken to extend the basic syntax by adding additional elements such as tables, alerts, code blocks, syntax highlighting, tabs etc.
To create stylish html tables you should use boostrap css names in the html table code class attribute.
Basic table example:
<div class="table-responsive"><table class="table">
<thead>
<tr>
<th>Syntax</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Header</td>
<td>Title</td>
</tr>
<tr>
<td>Paragraph</td>
<td>Text</td>
</tr>
</tbody>
</table></div>The rendered output looks like this:
| Syntax | Description |
|---|---|
| Header | Title |
| Paragraph | Text |
Bordered table example:
<div class="table-responsive"><table class="table table-bordered">
<thead>
<tr>
<th>Syntax</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Header</td>
<td>Title</td>
</tr>
<tr>
<td>Paragraph</td>
<td>Text</td>
</tr>
</tbody>
</table></div>The rendered output looks like this:
| Syntax | Description |
|---|---|
| Header | Title |
| Paragraph | Text |
<div class="table-responsive"><table class="table table-bordered">
<thead class="table-light">
<tr>
<th>Syntax</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Header</td>
<td>Title</td>
</tr>
<tr>
<td>Paragraph</td>
<td>Text</td>
</tr>
</tbody>
</table></div>The rendered output looks like this:
| Syntax | Description |
|---|---|
| Header | Title |
| Paragraph | Text |
You can find more examples at https://getbootstrap.com/docs/5.3/content/tables/.
To denote a word or phrase as code, enclose it in 3 backticks (```).
```php
echo "Hello World !"
```The rendered output looks like this:
echo "Hello World !"If the word or phrase you want to denote as code includes one or more backticks, you can escape it by enclosing the word or phrase in double backticks (``).
| Markdown | HTML | Rendered Output |
|---|---|---|
``Use `code` in your Markdown file.`` |
<code>Use `code` in your Markdown file.</code> |
Use `code` in your Markdown file. |
If you want the code you wrote to be colored in any language, specify the code in lower case letters immediately after the back tick like below the format.
```lang
Example:
```json
{
"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9........",
"user": {
"id": "21615870-4f89-4ab8-b91e-af6370a3089e",
"firstname": "Demo",
"lastname": "Admin",
"email": "[email protected]",
"roles": [
"admin"
]
},
"expiresAt": "2022-08-03 11:58:22"
}
```The rendered output looks like this:
{
"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9........",
"user": {
"id": "21615870-4f89-4ab8-b91e-af6370a3089e",
"firstname": "Demo",
"lastname": "Admin",
"email": "[email protected]",
"roles": [
"admin"
]
},
"expiresAt": "2022-08-03 11:58:22"
}To show line numbers use below the format.
```lang [line-numbers]
Example:
```php [line-numbers]
$companies = [
JwtAuthenticationMiddleware::class,
Mezzio\Authorization\AuthorizationMiddleware::class,
App\Handler\Api\CompanyHandler::class
];
$app->route('/api/companies/create', $companies, ['POST']);
```The rendered output looks like this:
$companies = [
JwtAuthenticationMiddleware::class,
Mezzio\Authorization\AuthorizationMiddleware::class,
App\Handler\Api\CompanyHandler::class
];
$app->route('/api/companies/create', $companies, ['POST']);To mark your line number use below the format.
```lang [line-numbers] data-line="n"
Example:
```php [line-numbers] data-line="3"
$companies = [
JwtAuthenticationMiddleware::class,
Mezzio\Authorization\AuthorizationMiddleware::class,
App\Handler\Api\CompanyHandler::class
];
$app->route('/api/companies/create', $companies, ['POST']);
```The rendered output looks like this:
$companies = [
JwtAuthenticationMiddleware::class,
Mezzio\Authorization\AuthorizationMiddleware::class,
App\Handler\Api\CompanyHandler::class
];
$app->route('/api/companies/create', $companies, ['POST']);Example:
```php [line-numbers] data-line="2,4"
$companies = [
JwtAuthenticationMiddleware::class,
Mezzio\Authorization\AuthorizationMiddleware::class,
App\Handler\Api\CompanyHandler::class
];
$app->route('/api/companies/create', $companies, ['POST']);
```The rendered output looks like this:
$companies = [
JwtAuthenticationMiddleware::class,
Mezzio\Authorization\AuthorizationMiddleware::class,
App\Handler\Api\CompanyHandler::class
];
$app->route('/api/companies/create', $companies, ['POST']);To mark your coding example is a command line use below the format.
```lang [command-line] data-user="root" data-host="localhost"
Example:
```bash [command-line] data-user="root" data-host="localhost"
git clone [email protected]:olomadev/olodoc-skeleton.git
```The rendered output looks like this:
git clone [email protected]:olomadev/olodoc-skeleton.gitAlerts are a custom Markdown extension based on the blockquote syntax that you can use to emphasize critical information. To show yours users to alerts use below the format.
> [!TYPE]
> Message here !
Example:
> [!NOTE]
> Useful information that users should know, even when skimming content.The rendered output looks like this:
Note
Useful information that users should know, even when skimming content.
Example:
> [!TIP]
> Helpful advice for doing things better or more easily.The rendered output looks like this:
Tip
Helpful advice for doing things better or more easily.
Example:
> [!IMPORTANT]
> Key information users need to know to achieve their goal.The rendered output looks like this:
Important
Key information users need to know to achieve their goal.
Example:
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.The rendered output looks like this:
Warning
Urgent info that needs immediate user attention to avoid problems.
Example:
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.The rendered output looks like this:
Caution
Advises about risks or negative outcomes of certain actions.
You can create bootstrap tabs using the following Olodoc-specific tab tags.
Basic tab example:
<tab>
<tab-title>Tab Title 1|Tab Title 2|Tab Title 3</tab-title>
<tab-content>
<tab-column>Tab content 1</tab-column>
<tab-column>Tab content 2</tab-column>
<tab-column>Tab content 3</tab-column>
</tab-content>
</tab>Warning
These tags are not supported by markdown language, only compatible with Olodoc.
The rendered output looks like this:
Tab content 1
Tab content 2
Tab content 3
You can use code blocks within tab tags as follows.
Advanced tab example:
<tab>
<tab-title>Json|Php</tab-title>
<tab-content>
<tab-column>
```json
{
"name":"John",
"age":30
}
```
</tab-column>
<tab-column>
```php [line-numbers] data-line="2"
[
"name" => "John",
"age" => "30",
]
```
</tab-column>
</tab-content>
</tab>The rendered output looks like this:
{
"name":"John",
"age":30
}[
"name" => "John",
"age" => "30",
]Footnotes allow you to add notes and references without cluttering the body of the document. When you create a footnote, a superscript number with a link appears where you added the footnote reference. Readers can click the link to jump to the content of the footnote at the bottom of the page.
To create a footnote reference, add a caret and an identifier inside brackets1. Identifiers can be numbers or words, but they can’t contain spaces or tabs. Identifiers only correlate the footnote reference with the footnote itself — in the output, footnotes are numbered sequentially.
Here's a simple footnote. [^1]
[^1]: This is the first footnote.