SPIP

Code informatique

Raccourci typographique

Publié le 10/06/2024 | Modifié le 23/09/2024

SPIP offre différents raccourcis pour afficher des portions de code informatique dans vos contenus éditoriaux.

Code en ligne

Le raccourci `...` (« backtick », comme en Markdown1) est utilisé pour afficher du code informatique au fil du texte. Cette portion de code informatique se trouve au sein d’un texte et reprend les caractéristiques typographiques de celui-ci tout en étant encadré.

Utilisez la barre d’outils pour ajouter des « backtick » ou en appuyant en même temps sur la combinaison de touches AltGr + ` (caractère normalement juste en dessous du nombre 7 d’un clavier français)

La variable $x = true; est un booléen.

La variable `$x = true;` est un booléen.

Bloc de code

Pour afficher des portions de code informatique de plusieurs lignes, le triple « backtick » doit être utilisé (comme en Markdown1). Cela permet de bien restituer les indentations au début de chaque ligne.

Coloration syntaxique

La coloration du code est effectué par la librairie Prism.js

Consultez la liste des langages de programmation supportés pour connaitre la référence d’un langage de programmation.

Il est possible de préciser un langage de programmation pour activer une coloration syntaxique du code. Pour cela, ajouter la référence du langage concerné juste après les 3 premiers « backtick ». Par exemple pour du code HTML, commencez votre portion de code avec la référence : html.

Exemples

CSS

.container {
	width: 900px;
}
.container div {
	display: inline-block;
	width: 300px;
}
```css
.container {
	width: 900px;
}
.container div {
	display: inline-block;
	width: 300px;
}
```

HTML

<div class="container">
	<div><p>Lorem Elsass ipsum bredele [...]</p></div>
	<div><p>Lorem Elsass ipsum bredele [...]</p></div>
	<div><p>Lorem Elsass ipsum bredele [...]</p></div>
</div>
```html
<div class="container">
	<div><p>Lorem Elsass ipsum bredele [...]</p></div>
	<div><p>Lorem Elsass ipsum bredele [...]</p></div>
	<div><p>Lorem Elsass ipsum bredele [...]</p></div>
</div>
```

Javascript

const JAVASCRIPT_CONSTANTE = {
	lorem: undefined,
	ipsum: () => {
		console.log('Lorem Elsass ipsum bredele')
	}
}
window.addEventListener('load', () => {
	if ( JAVASCRIPT_CONSTANTE.lorem == 'test' ) {
		console.log('Lorem Elsass ipsum bredele')
	}
})
```javascript
const JAVASCRIPT_CONSTANTE = {
	lorem: undefined,
	ipsum: () => {
		console.log('Lorem Elsass ipsum bredele')
	}
}
window.addEventListener('load', () => {
	if ( JAVASCRIPT_CONSTANTE.lorem == 'test' ) {
		console.log('Lorem Elsass ipsum bredele')
	}
})
```

Markdown

# Titre 1
## Titre 2
### Titre 3
#### etc...

Syntaxe alternative pour les **Titres 1** et les **Titres 2**

Titre 1
=======

Titre 2
-------
```markdown
# Titre 1
## Titre 2
### Titre 3
#### etc...

Syntaxe alternative pour les **Titres 1** et les **Titres 2**

Titre 1
=======

Titre 2
-------
```

Python

# Échanger des valeurs entre deux variables
a = 5                               
b = 10                                                                
a, b = b, a                                                                 
print(a) # 10                               
print(b) # 5

# Vérifier si le nombre donné est pair
def is_even(num):
	return num % 2 == 0
is_even(10) # True

# Diviser un string multi-ligne en une liste de lignes
def split_lines(s):
	return s.split('\n')
split_lines('50\n python\n snippets') # ['50', ' python', ' snippets']

```python
# Échanger des valeurs entre deux variables
a = 5                               
b = 10                                                                
a, b = b, a                                                                 
print(a) # 10                               
print(b) # 5

# Vérifier si le nombre donné est pair
def is_even(num):
	return num % 2 == 0
is_even(10) # True

# Diviser un string multi-ligne en une liste de lignes
def split_lines(s):
	return s.split('\n')
split_lines('50\n python\n snippets') # ['50', ' python', ' snippets']
```

SPIP

{{{ Un intertitre }}}

Du texte avec {de l’italique} et {{du gras}} ou un {{ {mélange des deux} }}.
Un retour à la ligne avec [un lien externe->https://www.ac-orleans-tours.fr], [un lien interne->art2] et un lien interne avec un titre automatique [->rubrique2].

-* Une liste
-* Une liste
-** Sous élément de liste

-# Une liste ordonnée
-# Une liste ordonnée
-## Sous élément de liste ordonnée

Un séparateur
----

Un tableau

|| Titre du tableau ||
| {{En-tête de colonne N°1}} | {{En-tête de colonne N°2}} |
| Contenu de la cellule | Contenu de la cellule |
| Contenu de la cellule | Contenu de la cellule |
| Contenu de la cellule | Contenu de la cellule |

```spip
{{{ Un intertitre }}}

Du texte avec {de l’italique} et {{du gras}} ou un {{ {mélange des deux} }}.
Un retour à la ligne avec [un lien externe->https://www.ac-orleans-tours.fr], [un lien interne->art2] et un lien interne avec un titre automatique [->rubrique2].

-* Une liste
-* Une liste
-** Sous élément de liste

-# Une liste ordonnée
-# Une liste ordonnée
-## Sous élément de liste ordonnée

Un séparateur
----

Un tableau

|| Titre du tableau ||
| {{En-tête de colonne N°1}} | {{En-tête de colonne N°2}} |
| Contenu de la cellule | Contenu de la cellule |
| Contenu de la cellule | Contenu de la cellule |
| Contenu de la cellule | Contenu de la cellule |
```

SPIP : squelette

<footer class="footer clearfix" role="contentinfo">
	<p class="colophon">
		<BOUCLE_annee(ARTICLES){par date}{0,1}>[(#DATE|annee|!={#VAL{Y}|date}|oui)[(#DATE|annee)]]</BOUCLE_annee> - </B_annee>[(#DATE|annee) ]#NOM_SITE_SPIP
		<br /><a rel="contents" href="#URL_PAGE{plan}" class="first"><:plan_site:></a>[
		(#SESSION{id_auteur}|non) | <a href="[(#URL_PAGE{login}|parametre_url{url,#SELF})]" rel="nofollow" class='login_modal'><:lien_connecter:></a>][
		(#AUTORISER{ecrire})| <a href="#CONST{_DIR_RESTREINT_ABS}"><:espace_prive:></a>][
		(#SESSION{id_auteur}|oui) | <a href="#URL_LOGOUT" rel="nofollow"><:icone_deconnecter:></a>] | 
		<a rel="nofollow" href="#URL_PAGE{contact}"><:contact:></a> |
		<a href="#URL_PAGE{backend}" rel="alternate" title="<:syndiquer_site:>" class="last">RSS&nbsp;2.0</a>
	</p>
	[<small class="generator"><a href="https://www.spip.net/" rel="generator" title="<:site_realise_avec_spip:>" class="generator spip_out">(#CHEMIN{spip.svg}|balise_svg{'',SPIP})</a></small>]
</footer>
```spip-squelette
<footer class="footer clearfix" role="contentinfo">
	<p class="colophon">
		<BOUCLE_annee(ARTICLES){par date}{0,1}>[(#DATE|annee|!={#VAL{Y}|date}|oui)[(#DATE|annee)]]</BOUCLE_annee> - </B_annee>[(#DATE|annee) ]#NOM_SITE_SPIP
		<br /><a rel="contents" href="#URL_PAGE{plan}" class="first"><:plan_site:></a>[
		(#SESSION{id_auteur}|non) | <a href="[(#URL_PAGE{login}|parametre_url{url,#SELF})]" rel="nofollow" class='login_modal'><:lien_connecter:></a>][
		(#AUTORISER{ecrire})| <a href="#CONST{_DIR_RESTREINT_ABS}"><:espace_prive:></a>][
		(#SESSION{id_auteur}|oui) | <a href="#URL_LOGOUT" rel="nofollow"><:icone_deconnecter:></a>] | 
		<a rel="nofollow" href="#URL_PAGE{contact}"><:contact:></a> |
		<a href="#URL_PAGE{backend}" rel="alternate" title="<:syndiquer_site:>" class="last">RSS&nbsp;2.0</a>
	</p>
	[<small class="generator"><a href="https://www.spip.net/" rel="generator" title="<:site_realise_avec_spip:>" class="generator spip_out">(#CHEMIN{spip.svg}|balise_svg{'',SPIP})</a></small>]
</footer>
```