Writing Guide for Marrakesh Sentinel

Where to Place the Post Files#

They should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

1
src/content/posts/
2
├── post-1.md
3
└── post-2/
4
    ├── cover.png
5
    └── index.md

Front-matter of Posts#

Each post in Marrakesh Sentinel starts with a front-matter section written in YAML format. This section contains metadata about the post, such as its title, publication date, description, tags, and more.

Example#

1
---
2
title: Title of the publication
3
published: 2026-10-01
4
description: Description of the publication.
5
image: ./cover.jpg
6
tags: [Foo, Bar]
7
category: Front-end
8
draft: false
9
---

Supported Attributes#

Attribute	Description
`title`	The title of the post.
`published`	The date the post was published.
`description`	A short description of the post. Displayed on index page.
`image`	The cover image path of the post. 1. Start with `http://` or `https://`: Use web image 2. Start with `/`: For image in `public` dir 3. With none of the prefixes: Relative to the markdown file
`tags`	The tags of the post.
`category`	The category of the post.
`draft`	If this post is still a draft, which won’t be displayed.

Syntax Overview#

This document defines the complete syntax supported by Marrakesh Sentinel and demonstrates how each element renders.

Headings#

1
# Heading 1
2
## Heading 2
3
### Heading 3
4
#### Heading 4

Text Formatting#

Source#

1
*italic* **bold**  ~~strikethrough~~  __underline__ <mark>highlighted</mark>  `inline code`

Preview#

italic bold ~~strikethrough~~ underline highlighted inline code

Links#

Source#

1
[Visit Marrakesh Sentinel](https://marrakeshsentinel.com)

Preview#

Visit Marrakesh Sentinel

Images#

Source#

1
![Image Title](https://images.unsplash.com/photo-1768742574399-bf73e164336d?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D )

Preview#

Image Title

Blockquotes#

Source#

1
> The desert teaches clarity.
2
>
3
>> Nested quotes are supported.

Preview#

The desert teaches clarity.

Nested quotes are supported.

Lists#

Unordered List#

Source#

1
- Alpha
2
- Beta
3
  - Nested item

Preview#

Alpha
Beta
- Nested item

Ordered List#

Source#

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

Preview#

First
Second
Third

Task Lists#

Source#

1
- [x] Parse input
2
- [ ] Render output

Preview#

Parse input
Render output

Tables#

Source#

1
| Feature | Supported | Notes       |
2
|---------|-----------|-------------|
3
| Bold    | Yes       | **Syntax**  |
4
| Code    | Yes       | Inline & blocks |

Preview#

Feature	Supported	Notes
Bold	Yes	Syntax
Code	Yes	Inline & blocks

Code Blocks#

Source#

1
```js
2
function greet(name) {
3
  return `Hello, ${name}`;
4
}
5
#``` remove the extra #

Preview#

1
function greet(name) {
2
  return `Hello, ${name}`;
3
}

Admonitions#

Following types of admonitions are supported: note tip important warning caution

Source#

1
:::note
2
Highlights information that users should take into account, even when skimming.
3
:::
4

5
:::tip
6
Optional information to help a user be more successful.
7
:::
8

9
:::important
10
Crucial information necessary for users to succeed.
11
:::
12

13
:::warning
14
Critical content demanding immediate user attention due to potential risks.
15
:::
16

17
:::caution
18
Negative potential consequences of an action.
19
:::

Preview#

NOTE
Highlights information that users should take into account, even when skimming.

TIP
Optional information to help a user be more successful.

IMPORTANT
Crucial information necessary for users to succeed.

WARNING
Critical content demanding immediate user attention due to potential risks.

CAUTION
Negative potential consequences of an action.

Footnotes#

Source#

1
This sentence needs context.[^1]
2

3
[^1]: Footnotes appear at the end of the document.

Preview#

This sentence needs context.¹

Spoiler#

You can add spoilers to your text. The text also supports Markdown syntax.

The content is hidden ayyy!

1
The content :spoiler[is hidden **ayyy**]!

Embedded Videos#

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.

1
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ujvy-DEA-UM?si=paJ8jEySsc9MdtqN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Advanced Code Block Features#

GitHub Repository Cards#

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

Source#

1
::github{repo="meel-hd/sentinel"}

Preview#

meel-hd

sentinel

Waiting for api.github.com...

00K

Waiting...

Rendering ANSI escape sequences#

1
ANSI colors:
2
- Regular: Red Green Yellow Blue Magenta Cyan
3
- Bold:    Red Green Yellow Blue Magenta Cyan
4
- Dimmed:  Red Green Yellow Blue Magenta Cyan
5

6
256 colors (showing colors 160-177):
7
160 161 162 163 164 165
8
166 167 168 169 170 171
9
172 173 174 175 176 177
10

11
Full RGB colors:
12
ForestGreen - RGB(34, 139, 34)
13

14
Text formatting: Bold Dimmed Italic Underline

Code editor frames#

1
console.log('Title attribute example')

1
<div>File name comment example</div>

Terminal frames#

1
echo "This terminal frame has no title"

1
Write-Output "This one has a title!"

Math#

Learn More!

Source#

1
$$
2
E = mc^2
3
$$
4

5
$$
6
\begin{aligned}
7
E &= mc^2 \\[6pt]
8
\mathcal{L}(\phi,\partial\phi) &= \tfrac{1}{2}\partial_\mu\phi\,\partial^\mu\phi - \tfrac{1}{2}m^2\phi^2 \\[6pt]
9
\Box\phi + m^2\phi &= 0
10
\end{aligned}
11
$$
12

13
$$
14
\mathbf{A} =
15
\begin{pmatrix}
16
1 & 2 & 3 \\
17
0 & -1 & 4 \\
18
5 & 6 & 0
19
\end{pmatrix},
20
\qquad
21
\det(\mathbf{A}) = 1\cdot\det\!\begin{pmatrix}-1&4\\6&0\end{pmatrix}
22
-2\cdot\det\!\begin{pmatrix}0&4\\5&0\end{pmatrix}
23
+3\cdot\det\!\begin{pmatrix}0&-1\\5&6\end{pmatrix}
24
$$
25

26
$$
27
\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi},
28
\qquad
29
\sum_{n=0}^{\infty}\frac{x^n}{n!}=e^{x}
30
$$
31

32
$$
33
f(x)=
34
\begin{cases}
35
x^2 & x \ge 0\\[4pt]
36
-x & x < 0
37
\end{cases}
38
$$
39

40
$$
41
\begin{aligned}
42
\nabla\cdot\mathbf{E} &= \frac{\rho}{\varepsilon_0} \\[4pt]
43
\nabla\times\mathbf{B} - \dfrac{1}{c^2}\dfrac{\partial\mathbf{E}}{\partial t} &= \mu_0 \mathbf{J}
44
\end{aligned}
45
$$

Preview#

E = mc^2

\begin{aligned} E &= mc^2 \\[6pt] \mathcal{L}(\phi,\partial\phi) &= \tfrac{1}{2}\partial_\mu\phi\,\partial^\mu\phi - \tfrac{1}{2}m^2\phi^2 \\[6pt] \Box\phi + m^2\phi &= 0 \end{aligned}

\mathbf{A} = \begin{pmatrix} 1 & 2 & 3 \\ 0 & -1 & 4 \\ 5 & 6 & 0 \end{pmatrix}, \qquad \det(\mathbf{A}) = 1\cdot\det\!\begin{pmatrix}-1&4\\6&0\end{pmatrix} -2\cdot\det\!\begin{pmatrix}0&4\\5&0\end{pmatrix} +3\cdot\det\!\begin{pmatrix}0&-1\\5&6\end{pmatrix}

\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}, \qquad \sum_{n=0}^{\infty}\frac{x^n}{n!}=e^{x}

f(x)= \begin{cases} x^2 & x \ge 0\\[4pt] -x & x < 0 \end{cases}

\begin{aligned} \nabla\cdot\mathbf{E} &= \frac{\rho}{\varepsilon_0} \\[4pt] \nabla\times\mathbf{B} - \dfrac{1}{c^2}\dfrac{\partial\mathbf{E}}{\partial t} &= \mu_0 \mathbf{J} \end{aligned}

Footnotes appear at the end of the document. ↩