Markdown Syntax Guide

In Hackers' Pub, you can use Markdown syntax when writing posts. This document explains basic Markdown syntax and extended syntax provided by Hackers' Pub.

Basic Formatting

Paragraphs and Line Breaks

In Markdown, paragraphs are separated by one or more blank lines. If you simply press Enter once for a line break, it will be ignored when rendered.

This is the first paragraph.
This line has a single <kbd>Enter</kbd> after it, but it will be rendered as part of the same paragraph.

This is the second paragraph, written after a blank line.

Preview:

This is the first paragraph. This line has a single Enter after it, but it will be rendered as part of the same paragraph.

This is the second paragraph, written after a blank line.

To force a line break, add two or more spaces at the end of a line:

This line ends with two spaces  
so a line break is applied.

Preview:

This line ends with two spaces
so a line break is applied.

Headings

ATX Style Headings

ATX style headings start with the # symbol, with the number of # characters varying by level:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Setext Style Headings

Setext style headings use = or - symbols under the text. This style only supports level 1 and level 2 headings:

Heading 1
======

Heading 2
------

Text Emphasis

You can emphasize text in the following ways:

*Italic* or _Italic_  
**Bold** or __Bold__  
***Bold Italic*** or ___Bold Italic___

Preview:

Italic or Italic
Bold or Bold
Bold Italic or Bold Italic

Horizontal Rules

Horizontal rules can be created using three or more hyphens (-), asterisks (*), or underscores (_):

---

Content omitted

***

Content omitted

___

Preview:

Content omitted

Content omitted

Inline style links are written as follows:

[Link text](https://example.com/)
[Link text](https://example.com/ "Link title")

Preview:

Link text
Link text

Reference style links define the URL somewhere in the document and reference it:

[Link text][1]
[Another link][reference name]

[1]: https://example.com/
[reference name]: https://example.com/reference "Link title"

Preview:

Link text
Another link

Also, URLs enclosed in < and > are automatically converted to links: https://example.com/.

Images

Image syntax is similar to links but with an exclamation mark at the beginning. The text in brackets is used as alternative text (alt) for screen readers and accessibility.

Inline Style Images 

![Alt text](image_URL)
![Alt text](image_URL "Image title")

Reference Style Images

Reference style images can be used similarly to reference style links:

![Alt text][image ID]

[image ID]: image_URL "Image title"

Lists

Unordered lists start with *, +, or -:

* Item 1
* Item 2
  * Nested item a
  * Nested item b

Preview:

  • Item 1
  • Item 2
    • Nested item a
    • Nested item b

Ordered lists start with a number and a period:

1. First item
2. Second item
   1. Nested item 1
   2. Nested item 2

Preview:

  1. First item
  2. Second item
    1. Nested item 1
    2. Nested item 2

Blockquotes

Blockquotes use the > symbol. Blockquotes can be nested:

> This is a blockquote.
> It can span multiple lines.
>
> Include an empty line with just `>` to include a blank line.
>
> > Blockquotes can be nested within blockquotes.
> >
> > > Multiple levels of nesting are possible.

Preview:

This is a blockquote. It can span multiple lines.

Include an empty line with just > to include a blank line.

Blockquotes can be nested within blockquotes.

Multiple levels of nesting are possible.

Code

Inline code is wrapped in backticks (`):

You can include `code` within a sentence.

Preview:

You can include code within a sentence.

To display code containing backticks, wrap it in more backticks or use another method:

`` `Code with backticks` ``
```
Code block with triple backticks ```
```

Preview:

`Code with backticks`

Code block with triple backticks ```

Code blocks start and end with three backticks. Specifying a language enables syntax highlighting:

``` python
def hello_world():
    print("Hello, World!")
```

Preview:

def hello_world():
    print("Hello, World!")

Extended Syntax

Hackers' Pub supports various extended Markdown syntax beyond the basics.

Mentions

To mention a user, use the @ symbol with the user's handle:

@hongminhee
@hongminhee@hackers.pub

Preview:

@hongminhee洪 民憙 (Hong Minhee)
@hongminhee洪 民憙 (Hong Minhee)

Footnotes

Footnotes are written as follows:

Text with a footnote[^1].

[^1]: This is the footnote content.

Preview:

Text with a footnote[1].

Admonitions

GitHub-style admonition boxes can be used:

> [!NOTE]
> This is a note.

> [!WARNING]
> This is a warning message.

> [!TIP]
> This is a useful tip.

> [!IMPORTANT]
> This is important information.

> [!CAUTION]
> This requires caution.

Preview:

Note

This is a note.

Warning

This is a warning message.

Tip

This is a useful tip.

Important

This is important information.

Caution

This requires caution.

You can change the label by adding text after [!…]:

> [!TIP] Info
> This is an info.

Preview:

Info

This is an info.

Definition Lists

Definition lists are written as follows:

Term
:   Definition content

Another term
:   Another definition content

Preview:

Term
Definition content
Another term
Another definition content

Math Expressions

You can write mathematical expressions using TeX syntax:

Inline math: $E = mc^2$

Preview:

Inline math: E=mc2E = mc^2

Block math:

$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$

Preview:

n!k!(n−k)!=(nk) \frac{n!}{k!(n-k)!} = \binom{n}{k}

Abbreviations

You can define abbreviations and their meanings:

*[HTML]: HyperText Markup Language
*[W3C]: World Wide Web Consortium

HTML documents follow W3C standards.

Preview:

HTML documents follow W3C standards.

Tables

Tables are created using pipe (|) characters:

| Header 1 | Header 2 |
|----------|----------|
| Value 1  | Value 2  |
| Value 3  | Value 4  |
| Value 5  | Value 6  |

Preview:

Header 1 Header 2
Value 1 Value 2
Value 3 Value 4
Value 5 Value 6

Tip

You can use Markdown Table Generator to easily create tables.

Diagrams

You can draw diagrams using Graphviz:

```graphviz
digraph {
    A -> B -> C;
    B -> D;
}
```

Preview:

%0 A A B B A->B C C B->C D D B->D

Tip

You can edit diagrams visually using Graphviz Visual Editor.

Code Highlighting

You can highlight specific lines or text in code blocks in various ways:

Highlighting with Line Numbers 

```js {3-4}
function example() {
  // Normal code
  // This line is highlighted
  // This line is also highlighted
  return true;
}
```

Preview:

function example() {
  // Normal code
  // This line is highlighted
  // This line is also highlighted
  return true;
}

Highlighting with Inline Comments 

```js
function example() {
  const highlighted = "This line is highlighted"; // [!code highlight]
  return true;
}
```

Preview:

function example() {
  const highlighted = "This line is highlighted";
  return true;
}

You can also highlight errors or warnings:

```js
function example() {
  throwError(); // [!code error]
  logWarning(); // [!code warning]
}
```

Preview:

function example() {
  throwError();
  logWarning();
}

Focusing with Inline Comments 

```js
function example() {
  const focused = "This line is focused"; // [!code focus]
  return true;
}
```

Preview:

function example() {
  const focused = "This line is focused";
  return true;
}

Highlighting Specific Text with Regex Patterns 

```js /text to highlight/
const message = "In this line, 'text to highlight' will be highlighted";
```

Preview:

const message = "In this line, 'text to highlight' will be highlighted";

Highlighting Specific Text with Inline Comments 

```js
// [!code word:highlightText]
const message = "In this line, 'highlightText' will be highlighted";
```

Preview:


const message = "In this line, 'highlightText' will be highlighted";

HTML Tags

You can use HTML tags within Markdown documents. For example, you can use the <kbd> tag to highlight keyboard input:

<kbd>Ctrl</kbd> + <kbd>C</kbd>

Preview:

Ctrl + C

Tips

  • In Markdown, write in plain text and use special characters for formatting.
  • Paragraphs are separated by blank lines. A single Enter press is ignored.
  • To force a line break, add two or more spaces at the end of a line.
  • Check the preview in the editor to ensure it displays as expected.
  • While Markdown supports direct HTML usage, it's best to use Markdown syntax when possible.

  1. This is the footnote content. ↩︎