https://nalar.dev/id/tags/markdown/ Recent content in Markdown on Nalar Hugo id-id Sat, 19 Sep 2026 00:00:00 +0000 https://nalar.dev/id/container-markdown-sebagai-dsl-ui-ringan/ Sat, 19 Sep 2026 00:00:00 +0000 https://nalar.dev/id/container-markdown-sebagai-dsl-ui-ringan/ <p>File konten tidak membutuhkan component tree hanya untuk menyatakan bahwa satu region adalah hero, callout, card, atau gallery. Ekstensi kecil pada Markdown dapat membawa maksud tersebut, sementara heading, paragraph, link, dan list tetap ditulis sebagai Markdown biasa.</p> <p>Dengan <code>markdown-it-container</code>, sintaks yang dilihat penulis dapat dibuat sesingkat:</p> <div x-data="{ code: $el.querySelector('code').innerText, copied: false }" class="code-block group relative my-6 overflow-hidden rounded-xl border border-line bg-surface-muted dark:border-night-line dark:bg-night-surface"> <button type="button" @click="navigator.clipboard.writeText(code); copied = true; setTimeout(() => copied = false, 1600)" class="absolute right-3 top-3 z-10 rounded-lg border border-line-strong bg-surface px-2 py-1 font-mono text-[0.8rem] text-muted opacity-0 transition group-hover:opacity-100 hover:bg-ink hover:text-white dark:border-night-line dark:bg-night dark:text-night-muted dark:hover:bg-white dark:hover:text-ink"> <span x-text="copied ? 'Copied' : 'Copy'"></span> </button> <div class="overflow-x-auto p-4 text-sm leading-6 [&_pre]:!m-0 [&_pre]:!bg-transparent [&_pre]:!p-0 [&_code]:font-mono"> <div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-md" data-lang="md"><span style="display:flex;"><span>:::hero </span></span><span style="display:flex;"><span><span style="font-weight:bold"># Ship the next release </span></span></span><span style="display:flex;"><span><span style="font-weight:bold"></span> </span></span><span style="display:flex;"><span>A short description stays normal Markdown. </span></span><span style="display:flex;"><span>:::</span></span></code></pre></div> </div> </div> <p>Struktur ini sudah cukup untuk membentuk DSL UI ringan: <code>hero</code> memiliki arti yang ditentukan aplikasi, sedangkan konten di dalamnya tetap diproses oleh parser Markdown. Batas yang berguna justru sempit. Ketika format mulai membuka row, column, nilai padding, class CSS, event handler, dan component nesting yang dalam, file konten tidak lagi terasa seperti konten. Ia berubah menjadi source code dengan notasi lain.</p>