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

title, description, date, tags, draft

title	description	date	tags	draft
Markdown Format Guide	Complete reference of all elements and components available in articles	2026-04-21	guide markdown mdc	true

Basic Typography

Normal paragraph with bold, italic, strikethrough and inline code.

Simple link: killiandalcin.fr

Blockquote:

The best Hytale plugins are born from an obsession with details.

---

Code Blocks

Kotlin block with syntax highlighting:

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

Full width (default):

Centered with fixed size and caption:

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

Floating left:

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

Text wrapping around the floating image. 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 ::

Floating right:

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

Text wrapping around the right-floating image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

::clear ::

Direct Tailwind classes:

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

---

Tables

Component	Syntax	Usage
Alert	::alert{type="info"}	Colored callouts
Image	{align="left"}	Floating photos
Columns	::columns{cols=2}	Page layout
Details	::details{summary="View"}	Collapsible content
Video	::video{src="..."}	YouTube/local embed
Badge	:badge[text]{color="blue"}	Inline tags

---

Callouts

::alert{type="info"} Info — Informational message. Supports bold and inline code. ::

::alert{type="warning"} Warning — Check Nuxt 4 compatibility before installing a module. ::

::alert{type="tip"} Tip — Use pnpm instead of npm for Nuxt projects (faster resolution). ::

::alert{type="danger"} Danger — Never commit API keys or secrets in plain text. ::

---

Columns

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

Content of the first column. Ideal for comparing two approaches, showing before/after, or listing pros and cons. ::

::div Column 2

Content of the second column. Columns automatically stack on mobile. :: ::

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

Nuxt SSR generates HTML server-side. ::

::div 🔍 SEO

Every page is crawlable without JavaScript. ::

::div 🎨 Flexible

Tailwind + Nuxt UI for all your styling needs. :: ::

---

Collapsible Content

::details{summary="View full plugin implementation"}

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="Why use @nuxt/content?" open=true} @nuxt/content transforms Markdown files into crawlable SSR pages. Benefits:

• Zero CMS — articles live in the Git repo
• Typed — Zod schema on every collection
• MDC — Vue components inside Markdown ::

---

Inline Badges

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

Status: :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"}

---

Video

YouTube:

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

---

Lists

Unordered list:

• First item
• Second item with code
• Third item with bold
  • Nested sub-item
  • Another sub-item

Ordered list:

1. Install dependencies: pnpm install
2. Start the dev server: pnpm dev
3. Build for production: pnpm build