Callouts highlight information. Use :::note, :::info, :::tip, :::warning, :::danger or :::important:

:::tip
Organize your content in nested folders to build the sidebar.
:::

Tabs

Each #### heading starts a new tab. Tabs with the same label are synchronized across the page, and the choice is remembered.

brew install cecil

scoop install cecil

curl -LO https://cecil.app/cecil.phar

:::tabs
#### macOS
Install with Homebrew:

```bash
brew install cecil
```

#### Windows
Install with Scoop:

```powershell
scoop install cecil
```

#### Linux
Download the Phar:

```bash
curl -LO https://cecil.app/cecil.phar
```
:::

Code groups

A code group shows alternative code blocks in a single frame:

brew install cecil

scoop install cecil

curl -LO https://cecil.app/cecil.phar

:::code-group
#### macOS
```bash
brew install cecil
```
#### Windows
```powershell
scoop install cecil
```
#### Linux
```bash
curl -LO https://cecil.app/cecil.phar
```
:::

Without headings, tabs are named after the language of each block:

theme:
  - leon

{"theme": ["leon"]}

:::code-group
```yaml
theme:
  - leon
```
```json
{"theme": ["leon"]}
```
:::

Steps

:::steps
#### Write
Write your pages in Markdown.

#### Build
Run `php cecil.phar build`.

#### Publish
Deploy the `_site` folder anywhere.
:::

Accordions

:::accordion
#### What is Cecil?
A static site generator, written in PHP, that turns Markdown files into a website.

#### Can I use HTML?
Yes, and a native `<details>` element is styled as an accordion too.
:::

Cards

:::cards
- [Quickstart](../../getting-started/quickstart/): create a site from scratch
- [Configuration](../../../reference/configuration/): every option of the theme
:::

Nesting

A block can contain other blocks: its fence must then be longer than theirs (::::steps … ::::).

::::steps
#### Install
:::code-group
```bash
brew install cecil
```
```powershell
scoop install cecil
```
:::

#### Configure
:::tip
Add `leon` to the `theme` list of your site.
:::

#### Build
Run `cecil build`.
::::

composer require cecil/theme-leon

::::tabs
#### Composer
```bash
composer require cecil/theme-leon
```

#### Archive
:::warning
Also install the required component themes.
:::
::::

Code

Inline code, keyboard keys like Ctrl + K, and blocks with syntax highlighting:

<?php
// builds the site
$builder = Cecil\Builder::create($config);
$builder->build(['drafts' => false]);

{% for page in site.pages|sort_by_date %}
  <a href="{{ url(page) }}">{{ page.title }}</a>
{% endfor %}

Tables

Diagrams

flowchart LR
  A[Markdown] --> B(Cecil)
  B --> C{Léon}
  C --> D[HTML]
  C --> E[Markdown]
  C --> F[llms.txt]

Quotes and lists

Simplicity is the ultimate sophistication.

1. First item
2. Second item
   • Nested item
   • Another one
3. Third item

Every color is a CSS custom property, defined for the light and the dark color schemes:

:root {
  --leon-accent: #2563eb;
}
.dark {
  --leon-page: #000;
}

Templates

Copy any template of themes/leon/layouts/ in the layouts/ directory of your site to override it.

Results groups

Results are grouped by section, in the order of the flexsearch.sections option:

flexsearch:
  sections:
    docs:
      limit: 6
    reference:
      limit: 4

Multilingual configuration

Translate the options in the config key of each language. The leon block is merged with the one of the default language: only set the translated keys.

leon:
  header:
    cta:
      name: Get started
      url: /docs/getting-started/quickstart/
  footer: 'Released under the MIT license.'
languages:
  - code: en
    name: English
    locale: en_US
  - code: fr
    name: Français
    locale: fr_FR
    config:
      leon:
        header:
          cta:
            name: Commencer # the `url` is inherited
        footer: 'Publié sous licence MIT.'

Browser language

With leon.language.suggest: true, a banner suggests the translation of the page matching the browser language, written in that language. It stays displayed until the visitor follows it, closes it or chooses a language with the selector.