Skip to content
Go back

Quick reference for md in my blog

Suggest changes

table of contents

Open table of contents

what is that table

automatically creates a table of contents of my post

h1

h2

h3

code

code snippet

let i = 9;src/filename.extension

code inline

this is an example of code inline ffff

blocks

quote block

this is a multiline quote!!!

this is a table

Color PropertyDefinition & Usage
--backgroundPrimary color of the website. Usually the main background.
--foregroundSecondary color of the website. Usually the text color.
--accentAccent color of the website. Link color, hover color etc.
--mutedCard and scrollbar background color for hover state etc.
--borderBorder color. Especially used in horizontal row (hr)

pointed list

numbered list

  1. uno
  2. due
  3. tre

codeblock after review

<Layout {...layoutProps}>
  <main>
    <ShareLinks />

    <script
      src="https://giscus.app/client.js"
      data-repo="[ENTER REPO HERE]"
      data-repo-id="[ENTER REPO ID HERE]"
      data-category="[ENTER CATEGORY NAME HERE]"
      data-category-id="[ENTER CATEGORY ID HERE]"></script>
  </main>
  <Footer />
</Layout>src/layouts/PostDetails.astro

Semantics

Frontmatter lies at the top of the article and is written in YAML format. Read more about frontmatter and its usage in astro documentation.

images

figures

Free Classic wooden desk with writing materials, vintage clock, and a leather bag. Stock Photo
Photo by Pixabay

basic images with markdown

An arrow pointing at the website logo

![An arrow pointing at the website logo](https://res.cloudinary.com/noezectz/v1663911318/astro-paper/AstroPaper-logo-config_goff5l.png)

Sample Frontmatter

Here is the sample frontmatter for a post.

---
title: The title of the post
author: your name
pubDatetime: 2022-09-21T05:17:19Z
slug: the-title-of-the-post
featured: true
draft: false
tags:
  - some
  - example
  - tags
ogImage: ../../assets/images/example.png # src/assets/images/example.png
# ogImage: "https://example.org/remote-image.png" # remote URL
description: This is the example description of the example post.
canonicalURL: https://example.org/my-article-was-already-posted-here
---src/data/blog/sample-post.md

You can store images inside src/assets/ directory. These images will be automatically optimized by Astro through Image Service API.

You can use relative path or alias path (@/assets/) to serve these images.

![something](@/assets/images/example.jpg)

<!-- OR -->

![something](../../assets/images/example.jpg)

<!-- Using img tag or Image component won't work ❌ -->
<img src="@/assets/images/example.jpg" alt="something">
<!-- ^^ This is wrong -->

Inside public directory

You can store images inside the public directory. Keep in mind that images stored in the public directory remain untouched by Astro, meaning they will be unoptimized and you need to handle image optimization by yourself.

![something](/assets/images/example.jpg)

<!-- OR -->

<img src="/assets/images/example.jpg" alt="something">

subdirectories

# Example: blog post structure and URLs
src/data/blog/very-first-post.md          -> mysite.com/posts/very-first-post
src/data/blog/2025/example-post.md        -> mysite.com/posts/2025/example-post
src/data/blog/_2026/another-post.md       -> mysite.com/posts/another-post
src/data/blog/docs/_legacy/how-to.md      -> mysite.com/posts/docs/how-to
src/data/blog/Example Dir/Dummy Post.md   -> mysite.com/posts/example-dir/dummy-post

Suggest changes
Share this post on:

Previous Post
Prolog Overview