Authoring content in Markdown
Cecil supports Markdown syntax in .md
files as well as front matter to define variables.
Inline style
Text can be bold, italic, or strikethrough.
Text can be **bold**, _italic_, or ~~strikethrough~~.
You can link to a page or to another page.
You can [link to a page](/about.md) or [to another page](page:index).
You can highlight inline code
with backticks.
You can highlight `inline code` with backticks.
How to structure page
Cecil automatically use the page file name as title, but you can also define title and other variables in the front matter.
You can structure content using a heading. Headings in Markdown are indicated by a number of #
at the start of the line.
---
title: Page title
description: Page short description.
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
## Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Image
Images use Cecil’s built-in optimized asset support.
![Cecil favicon Cecil favicon](/favicon.c1af8a129a0cde81f9b94ffbf452e10b.png)
![Cecil favicon](/favicon.png "Cecil favicon")
Cecil search images in assets/
and static/
folders, but relative path is also supported:
![Cecil favicon](../../../assets/favicon.png "Cecil favicon")
List
- Unordered list
- Unordered list
- Unordered list
- Ordered list
- Ordered list
- Ordered list
- Level 1
- Level 2
- Level 2
- Level 3
- Level 3
* Unordered list
* Unordered list
* Unordered list
1. Ordered list
2. Ordered list
3. Ordered list
* Level 1
* Level 2
* Level 2
* Level 3
* Level 3
Blockquote
This is a blockquote, which is commonly used when quoting another person or document.
Blockquotes are indicated by a
>
at the start of each line.
> This is a blockquote, which is commonly used when quoting another person or document.
>
> Blockquotes are indicated by a `>` at the start of each line.
Code block
A code block is indicated by a block with three backticks ```
at the start and end. You can indicate the programming language being used after the opening backticks.
// PHP code
$config = [
'title' => "My website",
'baseurl' => 'http://localhost:8000/',
];
Builder::create($config)->build();
```php // PHP code $config = [ 'title' => "My website", 'baseurl' => 'http://localhost:8000/', ]; Builder::create($config)->build(); ```
Horizontal rule below
---
Definition list
- First Term
- This is the definition of the first term.
- Second Term
- This is one definition of the second term.
- This is another definition of the second term.
First Term
: This is the definition of the first term.
Second Term
: This is one definition of the second term.
: This is another definition of the second term.
Table
Head 1 | Head 2 | Head 3 |
---|---|---|
ok | good swedish fish | nice |
out of stock | good and plenty | nice |
ok | good oreos |
hmm |
ok | good zoute drop |
yumm |
| Head 1 | Head 2 | Head 3 |
|:-------------|:------------------|:-------|
| ok | good swedish fish | nice |
| out of stock | good and plenty | nice |
| ok | good `oreos` | hmm |
| ok | good `zoute` drop | yumm |
Notes
:::info|tip|important|warning|caution
Note here.
:::
Diagrams and charts
Diagramming and charting with Mermaid.
Sequence diagram
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```mermaid sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop HealthCheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! ```
Git graph
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
```mermaid gitGraph commit commit branch develop commit commit commit checkout main commit commit ```