portfolio/content/fr/blog/test-kotlin-syntax.md

title, description, date, tags, draft

title	description	date	tags	draft
Guide du format Markdown	Référence complète de tous les éléments et composants disponibles dans les articles	2026-04-21	guide markdown mdc	true

Typographie de base

Paragraphe normal avec du gras, de l'italique, du barré et du code inline.

Lien simple : killiandalcin.fr

Citation :

Les meilleurs plugins Hytale naissent d'une obsession pour les détails.

---

Blocs de code

Bloc Kotlin avec coloration syntaxique :

fun createPlugin(name: String): HytalePlugin {
    return HytalePlugin.builder()
        .name(name)
        .version("1.0.0")
        .onLoad { println("Plugin $name loaded!") }
        .build()
}

TypeScript :

interface PluginConfig {
  name: string
  version: `${number}.${number}.${number}`
  enabled: boolean
}

const config: PluginConfig = {
  name: 'hytale-core',
  version: '1.0.0',
  enabled: true,
}

Shell :

pnpm install @hytale/sdk
pnpm run build
docker build -t portfolio:latest .

---

Images

Pleine largeur (défaut) :

Centrée avec taille fixe et légende :

{align="center" width="120" caption="Logo Killian' DAL-CIN"}

Flottant à gauche :

{align="left" caption="Float left"}

Texte qui entoure l'image flottante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

::clear ::

Flottant à droite :

{align="right" caption="Float right"}

Texte qui entoure l'image flottante à droite. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

::clear ::

Classes Tailwind directes :

{.w-16 .mx-auto .block}

---

Tableaux

Composant	Syntaxe	Usage
Alert	::alert{type="info"}	Callouts colorés
Image	{align="left"}	Photos flottantes
Columns	::columns{cols=2}	Mise en page
Details	::details{summary="Voir"}	Contenu repliable
Video	::video{src="..."}	Embed YouTube/local
Badge	:badge[text]{color="blue"}	Tags inline

---

Callouts

::alert{type="info"} Info — Message informatif. Supporte le gras et le code inline. ::

::alert{type="warning"} Attention — Vérifiez la compatibilité Nuxt 4 avant d'installer un module. ::

::alert{type="tip"} Astuce — Utilisez pnpm plutôt que npm pour les projets Nuxt (résolution plus rapide). ::

::alert{type="danger"} Danger — Ne jamais committer de clés API ou secrets en clair. ::

---

Colonnes

::columns{cols=2} ::div Colonne 1

Contenu de la première colonne. Idéal pour comparer deux approches, montrer avant/après, ou lister des avantages et inconvénients. ::

::div Colonne 2

Contenu de la seconde colonne. Les colonnes passent en empilé sur mobile automatiquement. :: ::

::columns{cols=3 gap="lg"} ::div 🚀 Rapide

Nuxt SSR génère le HTML côté serveur. ::

::div 🔍 SEO

Chaque page est crawlable sans JavaScript. ::

::div 🎨 Flexible

Tailwind + Nuxt UI pour tout styliser. :: ::

---

Contenu repliable

::details{summary="Voir l'implémentation complète du plugin"}

class HytalePlugin(
    val name: String,
    val version: String,
    private val onLoad: () -> Unit,
) {
    fun load() {
        println("Loading plugin: $name v$version")
        onLoad()
    }

    companion object {
        fun builder() = Builder()
    }

    class Builder {
        private var name = ""
        private var version = "0.0.1"
        private var onLoad: () -> Unit = {}

        fun name(n: String) = apply { name = n }
        fun version(v: String) = apply { version = v }
        fun onLoad(fn: () -> Unit) = apply { onLoad = fn }
        fun build() = HytalePlugin(name, version, onLoad)
    }
}

::

::details{summary="Pourquoi utiliser @nuxt/content ?" open=true} @nuxt/content transforme des fichiers Markdown en pages SSR crawlables. Avantages :

• Zéro CMS — les articles sont dans le repo Git
• Typé — schema Zod sur chaque collection
• MDC — composants Vue dans le Markdown ::

---

Badges inline

Versions : :badge[v1.0]{color="green"} :badge[v0.9 LTS]{color="blue"} :badge[deprecated]{color="red"}

Statuts : :badge[stable]{color="green"} :badge[beta]{color="yellow"} :badge[wip]{color="orange"}

Technologies : :badge[Kotlin]{color="purple"} :badge[Nuxt 4]{color="green"} :badge[TypeScript]{color="blue"}

---

Vidéo

YouTube :

::video{src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Exemple d'embed YouTube"} ::

---

Listes

Liste non ordonnée :

• Premier point
• Deuxième point avec code
• Troisième point avec gras
  • Sous-point imbriqué
  • Autre sous-point

Liste ordonnée :

1. Installer les dépendances : pnpm install
2. Lancer le dev server : pnpm dev
3. Builder pour la prod : pnpm build