Example Post

Markdown is a lightweight markup language based on plain text. It’s used for writing formatted documents in plain text and is known for its easy and simple syntax compared to traditional markup languages.

This post documents how I utilize Markdown in this blog.

Minimalism

As a frontend developer, I want to convey something through layout.
I hope the text feels comfortable to the reader.

That’s why I value the beauty of whitespace.
Pages crammed with content make reading unpleasant. I often leave a page after just glancing at the title.

Here are some hidden details of the layout:

The size of the title and the body text is the same.
- This avoids a feeling of disconnect between characters and brings calmness upon accessing the page.
- The text feels straightforward, reminiscent of reading a book.
The spacing between paragraphs is wide.
- It gives a breathing space.
- It helps focus more on the current paragraph.
The top area of the page is left empty.
- This draws the eyes towards the center of the page where the text is.
The color of the body text is notably light.
- Titles and bold text are easily recognized.
- Important content is quickly identifiable.

Titles

This blog uses only h2 and h3 titles.
It’s to maintain the beauty of Semantic HTML. ~~(Occupational hazard)~~

h1 already exists as it represents the highest-level heading on the page.
h4 is a crime in itself. It’s evidence of a complex piece of writing.

Basic Elements

Quotations use Serif typeface.
Even the font itself makes the quoted text seem significant!

Serif typeface can be used within the text too.
However, it’s not recommended as it disrupts the balance of the text.

<mark></mark> can be used to highlight text.

Links have a subtle underline and minimal hover effects.
Bold links are more eye-catching.
External links generate an icon indicating “a new tab will open.”
https://github.com/bepyan By default, links are automatically parsed.

The division line is subtle and not too prominent.
It’s not frequently used as there’s enough spacing overall.

List

Every citizen shall not be prosecuted for an act that does not constitute a crime under the law at the time of the act, nor shall be punished twice for the same crime.
The term of the first President under this Constitution shall commence from the day this Constitution comes into force.
- All citizens have the right to receive education according to their ability.

Ordered List

An amendment to the Constitution may be proposed by a majority of the members of the National Assembly or by the President.
The military shall have the sacred duty of national security and national defense, and its political neutrality shall be maintained.

Code Blocks

inline code [1, 2, 3]{:js}

Block code

import function clsx(...inputs: clsx.ClassValue[]): stringclsx, { type type ClassValue = string | number | bigint | boolean | clsx.ClassArray | clsx.ClassDictionary | null | undefinedClassValue } from 'clsx';
import { const twMerge: (...classLists: ClassNameValue[]) => stringtwMerge } from 'tailwind-merge';

export function function cn(...inputs: ClassValue[]): stringcn(...inputs: clsx.ClassValue[]inputs: type ClassValue = string | number | bigint | boolean | clsx.ClassArray | clsx.ClassDictionary | null | undefinedClassValue[]) {
  return function twMerge(...classLists: ClassNameValue[]): stringtwMerge(function clsx(...inputs: clsx.ClassValue[]): stringclsx(inputs: clsx.ClassValue[]inputs));
}
ts

export default {
  data() {
    return {
      msg: 'Focused!',
    };
  },
};
js

layout.tsx

import '~/styles/globals.css';

import type { Metadata } from 'next';

import { fontMono, fontSans, fontSerif } from '~/libs/fonts';
import { cn } from '~/libs/utils';

console.log('highlight'); 
console.log('goodbye'); 
console.log('hello'); 

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko" suppressHydrationWarning>
      <body
        className={cn(
          'bg-background min-h-screen font-sans antialiased',
          fontSans.variable,
          fontSerif.variable,
          fontMono.variable,
        )}
      >
        <div className="blur" aria-hidden="true"></div>
        <div className="max-w-page container mx-auto pt-32">
          <div className="main-grid">{children}</div>
        </div>
      </body>
    </html>
  );
}
12345678910111213141516171819202122232425262728293031323334
tsx

Like a poor star, that's why, the bug, left behind.

interface Todo {
  Todo.title: stringtitle: string;
}

const const todo: Readonly<Todo>todo: type Readonly<T> = { readonly [P in keyof T]: T[P]; }Make all properties in T readonlyReadonly<Todo> = {
  
title: stringtitle: 'Delete inactive users'.String.toUpperCase(): stringConverts all the alphabetic characters in a string to uppercase.toUpperCase(),
};

const todo: Readonly<Todo>todo.title = 'Hello';Cannot assign to 'title' because it is a read-only property.

var Number: NumberConstructorAn object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.Number.pparseFloat
parseInt
prototypeNumberConstructor.parseInt(string: string, radix?: number): numberConverts A string to an integer.
@paramstring A string to convert into a number.@paramradix A value between 2 and 36 that specifies the base of the number in `string`.
If this argument is not supplied, strings with a prefix of '0x' are considered hexadecimal.
All other strings are considered decimal.arseInt('123', 10);

const const a: 1a = 1;Custom log message
const const b: 1b = 1;Custom error message
const const c: 1c = 1;Custom warning message
Custom annotation messagets

Table

Emotion	Description
Joy	Pleasure, Joy, Happiness, Delight. The pleased and satisfied feeling when a desire is fulfilled.
Sadness	Feeling heartache and pain upon encountering or witnessing a pitiable or regrettable event.
Fun	A feeling of being cheerful and happy without any annoyance.


Pleasure	Pleasantness and enjoyment. Or the feeling of it.
Comfort	Comfort in both body and mind.
Delight	Joy and pleasure. Or the act of being joyful and enjoying.

Left	Center	Right
A	B	C