Exemples de blocs de code Firefly

Ici, nous explorons comment utiliser Expressive Code pour présenter des blocs de code. Les exemples fournis sont basés sur la documentation officielle, que vous pouvez consulter pour plus de détails.

Code expressif

Coloration syntaxique

Coloration syntaxique standard

1
console.log('Ce code a la coloration syntaxique !')

Rendu des séquences d’échappement ANSI

1
[1;4mStandard ANSI colors:[0m
2
- Dimmed:     [2;30m Black [2;31m Red [2;32m Green [2;33m Yellow [2;34m Blue [2;35m Magenta [2;36m Cyan [2;37m White [0m
3
- Foreground: [30m Black [31m Red [32m Green [33m Yellow [34m Blue [35m Magenta [36m Cyan [37m White [0m
4
- Background: [40m Black [41m Red [42m Green [43m Yellow [44m Blue [45m Magenta [46m Cyan [47m White [0m
5
- Reversed:   [7;30m Black [7;31m Red [7;32m Green [7;33m Yellow [7;34m Blue [7;35m Magenta [7;36m Cyan [7;37m White [0m
6

7
[1;4m8-bit colors (showing colors 160-171 as an example):[0m
8
- Dimmed:     [2;38;5;160m 160 [2;38;5;161m 161 [2;38;5;162m 162 [2;38;5;163m 163 [2;38;5;164m 164 [2;38;5;165m 165 [2;38;5;166m 166 [2;38;5;167m 167 [2;38;5;168m 168 [2;38;5;169m 169 [2;38;5;170m 170 [2;38;5;171m 171 [0m
9
- Foreground: [38;5;160m 160 [38;5;161m 161 [38;5;162m 162 [38;5;163m 163 [38;5;164m 164 [38;5;165m 165 [38;5;166m 166 [38;5;167m 167 [38;5;168m 168 [38;5;169m 169 [38;5;170m 170 [38;5;171m 171 [0m
10
- Background: [48;5;160m 160 [48;5;161m 161 [48;5;162m 162 [48;5;163m 163 [48;5;164m 164 [48;5;165m 165 [48;5;166m 166 [48;5;167m 167 [48;5;168m 168 [48;5;169m 169 [48;5;170m 170 [48;5;171m 171 [0m
11
- Reversed:   [7;38;5;160m 160 [7;38;5;161m 161 [7;38;5;162m 162 [7;38;5;163m 163 [7;38;5;164m 164 [7;38;5;165m 165 [7;38;5;166m 166 [7;38;5;167m 167 [7;38;5;168m 168 [7;38;5;169m 169 [7;38;5;170m 170 [7;38;5;171m 171 [0m
12

13
[1;4m24-bit colors (full RGB):[0m
14
- Dimmed:     [2;38;2;34;139;34m ForestGreen - RGB(34,139,34) [2;38;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m
15
- Foreground: [38;2;34;139;34m ForestGreen - RGB(34,139,34) [38;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m
16
- Background: [48;2;34;139;34m ForestGreen - RGB(34,139,34) [48;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m
17
- Reversed:   [7;38;2;34;139;34m ForestGreen - RGB(34,139,34) [7;38;2;102;51;153m RebeccaPurple - RGB(102,51,153) [0m
18

19
[1;4mFont styles:[0m
20
- Default
21
- [1mBold[0m
22
- [2mDimmed[0m
23
- [3mItalic[0m
24
- [4mUnderline[0m
25
- [7mReversed[0m
26
- [9mStrikethrough[0m

Cadres éditeur et terminal

Cadre éditeur de code

1
console.log('Exemple d\'attribut de titre')

1
<div>Exemple de commentaire de nom de fichier</div>

Cadre terminal

1
echo "Ce cadre terminal n'a pas de titre"

1
Write-Output "Celui-ci a un titre !"

Redéfinir le type de cadre

1
echo "Regardez, pas de cadre !"

1
# Sans redéfinition, ce serait un cadre terminal
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

Marqueurs de texte et de ligne

Marquer des lignes entières et des plages de lignes

1
// Ligne 1 - ciblée par numéro de ligne
2
// Ligne 2
3
// Ligne 3
4
// Ligne 4 - ciblée par numéro de ligne
5
// Ligne 5
6
// Ligne 6
7
// Ligne 7 - ciblée par la plage "7-8"
8
// Ligne 8 - ciblée par la plage "7-8"

Choisir le type de marqueur de ligne (mark, ins, del)

1
function demo() {
2
  console.log('Cette ligne est marquée comme supprimée')
3
  // Cette ligne et la suivante sont marquées comme insérées
4
  console.log('Deuxième ligne insérée')
5

6
  return 'Cette ligne utilise le marqueur neutre par défaut'
7
}

Ajouter des étiquettes aux marqueurs de ligne

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === 'string' ? <span>{children}</span> : children)}
12
</button>

Ajouter des étiquettes longues sur des lignes séparées

1
<button
2
  role="button"
3
  {...props}
4

5
  value={value}
6
  className={buttonClassName}
7

8
  disabled={disabled}
9
  active={active}
10
>
11

12
  {children &&
13
    !active &&
14
    (typeof children === 'string' ? <span>{children}</span> : children)}
15
</button>

Utiliser une syntaxe de type diff

1
Cette ligne sera marquée comme insérée
2
Cette ligne sera marquée comme supprimée
3
Ceci est une ligne normale

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+this is an actual diff file
5
-all contents will remain unmodified
6
 no whitespace will be removed either

Combiner coloration syntaxique et syntaxe diff

1
function thisIsJavaScript() {
2
  // Tout le bloc sera mis en évidence en JavaScript,
3
  // et nous pouvons toujours y ajouter des marqueurs diff !
4
  console.log('Ancien code à supprimer')
5
  console.log('Nouveau code brillant !')
6
}

Marquer du texte spécifique dans une ligne

1
function demo() {
2
  // Marquer n'importe quel texte donné dans la ligne
3
  return 'Supporte plusieurs correspondances du texte donné';
4
}

Expressions régulières

1
console.log('Les mots yes et yep seront marqués.')

Échapper les barres obliques

1
echo "Test" > /home/test.txt

Choisir le type de marqueur en ligne (mark, ins, del)

1
function demo() {
2
  console.log('Voici les types de marqueurs ins et del');
3
  // L'instruction return utilise le marqueur par défaut
4
  return true;
5
}

Retour à la ligne automatique

Configurer le retour à la ligne par bloc

1
// Exemple avec retour à la ligne activé
2
function getLongString() {
3
  return 'Ceci est une très longue chaîne de caractères qui ne tiendra probablement pas dans l\'espace disponible à moins que le conteneur ne soit très large'
4
}

1
// Exemple avec wrap=false
2
function getLongString() {
3
  return 'Ceci est une très longue chaîne de caractères qui ne tiendra probablement pas dans l\'espace disponible à moins que le conteneur ne soit très large'
4
}

Configurer l’indentation du retour à la ligne

1
// Exemple preserveIndent (activé par défaut)
2
function getLongString() {
3
  return 'Ceci est une très longue chaîne de caractères qui ne tiendra probablement pas dans l\'espace disponible à moins que le conteneur ne soit très large'
4
}

1
// Exemple preserveIndent=false
2
function getLongString() {
3
  return 'Ceci est une très longue chaîne de caractères qui ne tiendra probablement pas dans l\'espace disponible à moins que le conteneur ne soit très large'
4
}

Sections repliables


5 lignes masquées
1
// Tout ce code de configuration sera replié
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// Cette partie du code est visible par défaut
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // Vous pouvez avoir plusieurs sections repliées
3 lignes masquées
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // Ceci restera visible
17
  console.log(`Résultat : ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 lignes masquées
21
// Tout le code jusqu'à la fin du bloc sera à nouveau replié
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'Fin du code de démonstration' })

Numéros de ligne

Afficher les numéros de ligne par bloc

1
// Ce bloc de code affichera les numéros de ligne
2
console.log('Bonjour depuis la ligne 2 !')
3
console.log('Je suis à la ligne 3')

// Ce bloc désactive les numéros de ligne
console.log('Bonjour ?')
console.log('Désolé, savez-vous à quelle ligne je suis ?')

Modifier le numéro de ligne de départ

5
console.log('Bonjour depuis la ligne 5 !')
6
console.log('Je suis à la ligne 6')

Code expressif

Coloration syntaxique

Coloration syntaxique standard

Rendu des séquences d’échappement ANSI

Cadres éditeur et terminal

Cadre éditeur de code

Cadre terminal

Redéfinir le type de cadre

Marqueurs de texte et de ligne

Marquer des lignes entières et des plages de lignes

Choisir le type de marqueur de ligne (mark, ins, del)

Ajouter des étiquettes aux marqueurs de ligne

Ajouter des étiquettes longues sur des lignes séparées

Utiliser une syntaxe de type diff

Combiner coloration syntaxique et syntaxe diff

Marquer du texte spécifique dans une ligne

Expressions régulières

Échapper les barres obliques

Choisir le type de marqueur en ligne (mark, ins, del)

Retour à la ligne automatique

Configurer le retour à la ligne par bloc

Configurer l’indentation du retour à la ligne

Sections repliables

Numéros de ligne

Afficher les numéros de ligne par bloc

Modifier le numéro de ligne de départ

Soutenir & Partager

Table des matières