Coloration syntaxique des blocs de code

JavaScript

javascript

// Fetch API avec async/await
async function fetchUsers() {
  const response = await fetch('/api/users');
  const data = await response.json();
  return data.filter(user => user.active);
}

const greeting = (name) => `Bonjour, ${name} !`;
console.log(greeting('monde'));

TypeScript

typescript

interface User {
  id: number;
  name: string;
  email: string;
  roles: string[];
}

function getAdmin(users: User[]): User | undefined {
  return users.find(u => u.roles.includes('admin'));
}

const count: number = 42;

Vue

vue

<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <p v-if="description">{{ description }}</p>
    <button @click="handleClick">Valider</button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  title: string;
  description?: string;
}>();

const emit = defineEmits<{
  submit: [value: string];
}>();

function handleClick() {
  emit('submit', props.title);
}
</script>

<style scoped>
.card {
  padding: 1rem;
  border-radius: 8px;
}
</style>

CSS

css

:root {
  --primary: #0284c7;
  --bg: #f8fafc;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }
}

HTML

html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Ma page</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <main id="app">
    <h1>Bienvenue</h1>
    <p class="intro">Ceci est un test.</p>
  </main>
  <script src="/app.js"></script>
</body>
</html>

Bash

bash

#!/bin/bash

# Deploiement automatique
echo "Demarrage du deploy..."

if [ -d "./dist" ]; then
  rsync -avz ./dist/ user@server:/var/www/app/
  echo "Deploy termine avec succes"
else
  echo "Erreur: dossier dist introuvable" >&2
  exit 1
fi

JSON

json

{
  "name": "mon-projet",
  "version": "1.0.0",
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "preview": "nuxt preview"
  },
  "dependencies": {
    "@nuxt/content": "^3.11.0"
  }
}

YAML

yaml

server:
  host: 0.0.0.0
  port: 3000

database:
  driver: postgres
  host: localhost
  name: mydb
  credentials:
    user: admin
    password: ${DB_PASSWORD}

Markdown

markdown

# Titre principal

Un paragraphe avec du **gras** et de l'*italique*.

- Element 1
- Element 2

[Lien vers le site](https://example.com)

PHP

php

<?php

namespace App\Controller;

use App\Repository\UserRepository;

class UserController
{
    public function __construct(
        private readonly UserRepository $repository
    ) {}

    public function index(): array
    {
        $users = $this->repository->findAll();

        return array_filter($users, function ($user) {
            return $user->isActive();
        });
    }
}

SQL

sql

-- Privilegier les JOIN explicites
SELECT u.username, o.order_date
FROM users u
INNER JOIN orders o ON u.id = o.user_id
WHERE o.status = 'completed'
ORDER BY o.order_date DESC
LIMIT 10;

Java

java

import java.util.List;
import java.util.stream.Collectors;

public class UserService {
    private final UserRepository repository;

    public UserService(UserRepository repository) {
        this.repository = repository;
    }

    public List<String> getActiveEmails() {
        return repository.findAll().stream()
            .filter(User::isActive)
            .map(User::getEmail)
            .collect(Collectors.toList());
    }
}

Python

python

from dataclasses import dataclass
from typing import Optional

@dataclass
class Article:
    title: str
    content: str
    author: str
    tags: list[str] = None

    def summary(self, length: int = 100) -> str:
        return self.content[:length] + "..."

articles = [Article("Test", "Contenu", "RivoLink")]
for article in articles:
    print(f"{article.title} par {article.author}")