Markdown Documentation Guide

A comprehensive guide to using Markdown in our documentation system

Markdown Documentation Guide

This guide provides a comprehensive overview of all Markdown features available in our documentation system.

Frontmatter

Frontmatter is used at the top of Markdown files to define metadata. It's written in YAML format between triple-dashed lines:

---
title: Page Title
description: Page description that appears in meta tags
---

Available frontmatter fields:

• title: The page title (required)
• description: Page description for SEO (recommended)

Links

Internal Links

Link to other pages within the documentation:

[Getting Started](/docs/documentation-editors/markdown-guide)

Getting Started

External Links

Link to external websites:a

[EternalCode Website](https://eternalcode.pl)

EternalCode Website

Headings

Create section headings using hash symbols:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Text Formatting

**Bold text**
*Italic text*
~~Strikethrough~~
`Inline code`

Bold text Italic text ~~Strikethrough~~ Inline code

Lists

Unordered Lists

- Item 1
- Item 2
  - Nested item 2.1
  - Nested item 2.2
- Item 3

• Item 1
• Item 2
  • Nested item 2.1
  • Nested item 2.2
• Item 3

Ordered Lists

1. First item
2. Second item
3. Third item

1. First item
2. Second item
3. Third item

Tables

Create tables using pipes and dashes. Tables are automatically styled with enhanced formatting, including header styling, alternating row colors, hover effects, and responsive design:

| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

| Header 1 | Header 2 | Header 3 | | -------- | -------- | -------- | | Cell 1 | Cell 2 | Cell 3 | | Cell 4 | Cell 5 | Cell 6 |

The table styling includes:

• Dark headers with light text
• Alternating row colors for better readability
• Hover effects to highlight the current row
• Rounded corners and subtle shadows
• Automatic dark mode support

Table Alignment

You can align text in columns:

| Left-aligned | Center-aligned | Right-aligned |
| :----------- | :------------: | ------------: |
| Left         | Center         | Right         |
| Text         | Text           | Text          |

| Left-aligned | Center-aligned | Right-aligned | | :----------- | :------------: | ------------: | | Left | Center | Right | | Text | Text | Text |

Emoji

You can use GitHub-style emoji shortcodes:

:smile: :heart: :rocket: :warning:

:smile: :heart: :rocket: :warning:

GitHub-flavored Alerts

Our documentation supports GitHub-style alerts using our custom Alert component:

<Alert type="info">
This is an information alert.
</Alert>

<Alert type="warning">
This is a warning alert.
</Alert>

<Alert type="danger">
This is a danger/error alert.
</Alert>

<Alert type="tip">
This is a tip/success alert.
</Alert>

Code Blocks

Basic Code Block

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}

## Code Tabs

Use the CodeTabs component to show code in multiple languages:

```markdown
<CodeTabs>
  <CodeTab label="JavaScript">

​```javascript
function hello() {
  console.log("Hello JavaScript!");
}
​```

  </CodeTab>
  <CodeTab label="TypeScript">

​```typescript
function hello(): void {
  console.log("Hello TypeScript!");
}
​```

  </CodeTab>
  <CodeTab label="Python">

​```python
def hello():
    print("Hello Python!")
​```

  </CodeTab>
</CodeTabs>

function hello() {
  console.log("Hello JavaScript!");
}

Blockquotes

> This is a blockquote.
> 
> It can span multiple lines.

This is a blockquote.

It can span multiple lines.

Horizontal Rules

---

Images

![Alt text](/logo.svg)

Task Lists

- [x] Completed task
- [ ] Incomplete task
- [ ] Another task

• [x] Completed task
• [ ] Incomplete task
• [ ] Another task