Markdown syntax extensions and custom elements available in this website (for my own reference):

Two-column layout

The split and aside directive can be used.

:::::split
Left contents

::::aside
Right contents
::::
:::::

Tailwind CSS

Notes support Tailwind CSS utility classes powered by UnoCSS. You can use any Tailwind utility class for styling elements.

Blue background with white text

Common patterns:

  • grid grid-cols-2 gap-4 - Two-column grid
  • text-center text-lg font-bold - Centered large bold text
  • bg-gray-100 p-4 rounded - Gray background with padding
<div class="bg-blue-500/25 text-white p-4 rounded">
  Blue background with white text
</div>

Grid system

Grid system using Tailwind CSS classes allows for flexible layout.

One
Two
Three
<div class="grid grid-cols-3 gap-4">
  <div class="p-3 rounded border border-[#656463]">One</div>
  <div class="p-3 rounded border border-[#656463]">Two</div>
  <div class="p-3 rounded border border-[#656463]">Three</div>
</div>

Scoped CSS

For custom CSS styles, use <style scoped> tags. All CSS classes should be prefixed with n- to follow the naming convention.

Light blue bold text

Boxed content

The n- prefix helps distinguish custom styles from global styles and prevents naming conflicts.

<style scoped>
  .n-example {
    color: #bef;
    font-weight: bold;
  }
  .n-box {
    border: 1px solid #656463;
    padding: 0.5rem;
  }
</style>

<p class="n-example">Light blue bold text</p>
<div class="n-box">Boxed content</div>

Buttons and Inputs

Use standard HTML buttons and inputs. The btn and form-control classes provide basic styling.

<div class="flex gap-2">
  <button class="btn flex-none">Click me</button>
  <input type="text" class="form-control" placeholder="Enter text here" />
</div>

Callouts

Info

This is an info box

Warning

This is a warning box

Tip

This is a tip box

Success

This is a success box

Important

This is an important box

BE CAREFUL

This is a danger box

Caution

This is a caution box

Details

This is a details box

:::info
This is an info box
:::

:::warning
This is a warning box
:::

:::tip
This is a tip box
:::

:::success
This is a success box
:::

:::important
This is an important box
:::

:::danger[BE CAREFUL]
This is a danger box
:::

:::caution
This is a caution box
:::

:::details
This is a details box
:::

YouTube embed

::youtube[chuBHB0rRQo]

Figures

Network graph visualization showing hundreds of small nodes

Linked notes can form a network of knowledge
:::figure[Linked notes can form a network of knowledge]{.framed}
![Network graph visualization showing hundreds of small nodes](https://im.dt.in.th/ipfs/bafybeigltieu33eda3ux2uprgua5haczvev5ownguordyfgds5qrexdlbq/image.webp)
:::

Classes available:

  • .framed - adds border around images

Chat bubbles

Me:

hi!

Hi there! How's it going?

:::me
hi!
:::

:::bubble[ChatGPT]
Hi there! How's it going?
:::

Thoughts

But what about this case?

:::thought
But what about this case?
:::

Call to action

View on GitHubhttps://github.com/dtinth/notes

::cta[View on GitHub]{href="https://github.com/dtinth/notes"}

Twitter embeds

:::tweet

<p lang="en" dir="ltr">Proudly storing JWT auth token in localStorage in 2024 🥇 <a href="https://t.co/fhfzJZqIsZ">https://t.co/fhfzJZqIsZ</a></p>&mdash; LiveOverflow 🔴 (@LiveOverflow) <a href="https://twitter.com/LiveOverflow/status/1817500071312699720?ref_src=twsrc%5Etfw">July 28, 2024</a>

:::