Écrire des blocs de codes
Les marqueurs de blocs de codes
Il y a 2 méthodes pour écrire des blocs de codes dans Tyto - Littérateur. La méthode qui consiste à intégrer le contenu d'un fichier, et la méthode qui consiste à écrire directement un bloc de code dans l'article. La sortie HTML sera la même dans les 2 cas, hormis si une classe CSS est définie avec l'écriture directe. Par défaut, les 2 utilisent la classe CSS définie dans la configuration du domaine.
Écrire un bloc de code dans l'article
Pour écrire un bloc de codes dans l'article, il faut "entourer" le code avec 2 marqueurs, à placer chacun au début d'une nouvelle ligne. Le marqueur d'ouverture supporte la définition d'une classe CSS
- Le marqueur d'ouverture "{{"
- Le marqueur de fermeture "}}"
# Dans l'article
{{ CSS
# Ceci est un code commenté
if hello == world:
print(hello)
}}
# La sortie HTML de ce code:
<code class="CSS">
<pre class="bcode">
<p class="bcode"># Ceci est un code commenté</p>
<p class="bcode">if hello == world:</p>
<p class="bcode"> print(hello)</p>
</pre>
</code>
Intégrer un bloc de codes depuis un fichier
Pour intégrer un bloc de codes dans l'article avec un fichier, il faut définir le fichier dans l'entête. Si l'URI commence par "@", le fichier se trouve dans articles/files/
# Dans l'entête
code: NomDuCode
URI du fichier
Texte d'information
# Dans l'article
_code:NomDuCode
Styliser les blocs de codes
Voici un exemple de configuration CSS qui permet de personnaliser l'affichage d'un bloc de codes.
/*
* Tyto - Littérateur
*
* Calcule et affiche les numéros de lignes.
* dans un bloc de codes
*
* Exemple de configuration pour personnaliser
* les blocs de codes dans un article.
*
* DOMAIN est le nom donné dans le fichier
* de configuration du domaine ("tyto" par défaut)
*
* Cet extrait à mettre dans le fichier styles.css
* fonctionne avec les contenus des fichiers
* à intégrer dans un article via le marqueur
* "code:" en entête et "_code:" dans l'article.
* Pour le marqueur de code brut "{{", si il
* n'a pas de configuration css, le thème sera
* aussi appliqué.
*
*/
code.DOMAIN {
color: white;
margin: 15px 0;
display: flex;
}
pre.bcode {
padding: 15px;
width: 100%;
display: grid;
background-color: black;
border: 8px ridge #616161;
text-align: left;
overflow: auto;
}
pre.bcode:before {
counter-reset: listing;
}
p.bcode {
counter-increment: listing;
margin: 0 !important;
text-indent: 0;
line-height: 1.3em;
font-size: .9em;
font-family: Courier New;
}
pre.bcode p.bcode:before {
content: counter(listing) ". ";
color: grey;
width: 40px; /* Assez pour 9999 lignes */
display: inline-block;
}
Rappels
Les pages étant statiques, changer le contenu d'un fichier servant de bloc de codes ne sera pris en compte qu'après avoir utilisé la commande [wip] ou la commande [publish]
, le {Code source}