Get started

Install the theme with Composer, then enable it in the configuration of your site.

composer require cecil/theme-leon

curl -LO https://github.com/Cecilapp/theme-leon/releases/latest/download/leon.zip
unzip leon.zip -d themes/leon

Then continue with the Quickstart →

What you can do

Next steps

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.

leon:
  accent: ''         # accent color (e.g. '#2563eb'), clay by default
  accent_dark: ''    # accent color in dark mode, derived from `accent` by default
  fonts:
    bundled: true    # loads the bundled fonts
    sans: ''
    serif: ''
    mono: ''
  header:
    title: true      # site title next to the logo
    cta: {}          # e.g. {name: Get started, url: /docs/}
  tabs:
    enabled: true
    sections: []
  sidebar:
    collapsed: false
  language:
    suggest: false   # suggests the translation matching the browser language
  toc:
    enabled: true
  copypage:
    enabled: true
    assistants: [claude, chatgpt] # and/or perplexity
  github:
    repo: ''
    branch: main
    path: pages
  lastupdated: false
  footer: ''

Logo

The logo is set by the logo key at the root of the site configuration (not under leon), with a path relative to assets/ or static/. It is displayed before the site title, in the header and in the footer:

logo: images/logo.svg

To use a different file in each color scheme:

logo:
  light: images/logo.svg      # displayed on the light background
  dark: images/logo-dark.svg  # displayed on the dark background

Cecil options

Léon configures Cecil for a documentation site: your configuration can override each of these options.

pages:
  sortby: weight     # the `1-` prefix of the file name, or the `weight` variable
  pagination:
    enabled: false   # cards of a section list every child page
output:
  pagetypeformats:
    page:
      markdown: true # Markdown version of the pages ("Copy page")
    section:
      markdown: true
    homepage:
      llms: true     # `llms.txt` file

To remove an output format, set it to false: a map of booleans adds or removes a format without replacing the others.

Syntax highlighting

Code blocks are highlighted by highlight.php by default. Léon also styles the output of tempest/highlight, faster but limited to the languages of the web:

pages:
  body:
    highlight:
      engine: tempest # `highlightjs` by default

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.

composer require cecil/theme-leon

Composer installs Léon in themes/leon, and its dependencies in themes/flexsearch and themes/darkmodetoggle.

Manually

Download the latest release and uncompress it in themes/leon.

Requirements