Basic Formatting

Reviewed & published by Brayan K

By the end of this lesson you'll be able to make text bold, italic, and struck through, drop in inline code and syntax-highlighted code blocks, and shape a document with blockquotes and dividers — the everyday toolkit behind every README, GitHub comment, and docs page.

Part of the free Markdown course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

What You'll Learn

• Make text bold, italic, and bold+italic with * and _
• Strike text through with ~~ and write inline code with backticks
• Create fenced code blocks that get syntax highlighting
• Quote and nest blockquotes with >
• Add horizontal rules (---) to divide a document
• Force hard line breaks with two trailing spaces or a backslash

💡 Real-World Analogy

Think of Markdown markers like a highlighter set. You don't open a menu to change a font — you wrap the words you care about in a symbol, the way you'd run a highlighter over a sentence. One asterisk on each side is a thin highlight (italic); two is a bold one; two tildes draw a line through it. The key habit: a marker has to hug both ends of the text, like opening and closing a bracket. Forget the closing marker and the renderer just shows the symbol as plain text.

1. Bold, Italic & Bold+Italic

Wrap text in one asterisk or underscore for italic, two for bold, and three for both at once. The marker must touch the text on both sides — **bold**, never ** bold **.

Source → Rendered

This is *italic* text.
This is _also italic_.
This is **bold** text.
This is __also bold__.
This is ***bold and italic***.

This is italic text.

This is also italic.

This is bold text.

This is also bold.

This is bold and italic.

Prefer asterisks (*) over underscores (_). Underscores inside words — like my_file_name — can accidentally trigger italics in some renderers. Asterisks never do.

# Release notes

This is *italic* and this is **bold**, and ***this is both***.

You can ~~strike text through~~ and mention `inline code` in a sentence.

> Blockquotes carry a warning or a quotation.

Underscores work too — _italic_ and __bold__ — but prefer asterisks:
a name like my_file_name can trip the underscore form in some renderers.

<!-- ✅ Expected result, rendered:
     h1         -> text: Release notes
     p          -> count: 4
     blockquote -> count: 1
     strong     -> count: 3
     em         -> count: 3
     del        -> count: 1
     code       -> count: 1
-->

2. Strikethrough & Inline Code

Two tildes on each side (~~like this~~) draw a line through text — handy for "old price, new price". A single backtick on each side makes inline code: a monospace snippet that won't be treated as Markdown, so symbols inside it stay literal.

Was ~~£40~~ now £25.

Run `npm install` to begin.

The `Array.map()` method loops.

Inside code, **stars** stay literal:
`a ** b` means a to the power b.

Was £40 now £25.

Run npm install to begin.

The Array.map() method loops.

Inside code, stars stay literal: a ** b means a to the power b.

Need a literal backtick inside inline code? Wrap with double backticks: use here .

// 🎯 YOUR TURN — you're writing Markdown for a product page.
// Replace each ___ with the right marker, then press "Run".
// (This editor prints your text. To watch Markdown render as you type,
//  use the live worked example higher up this page.)

console.log("=== Build these lines ===");

// 1) Make the word "Sale" BOLD
console.log("___Sale___ ends Friday!");      // 👉 wrap Sale in **double asterisks**

// 2) Make the word "limited" ITALIC
console.log("Stock is ___limited___.");      // 👉 wrap limited in *single asterisks*

// 3) Make the old price STRIKETHROUGH
console.log("Was ___£40___ — now £25.");     // 👉 wrap £40 in ~~double tildes~~

// 4) Make "npm install" INLINE CODE
console.log("Run ___npm install___ first."); // 👉 wrap it in \`backticks\`

// ✅ Expected rendered result:
//    Sale ends Friday!          (Sale in BOLD)
//    Stock is limited.          (limited in ITALIC)
//    Was £40 — now £25.         (£40 with a line through it)
//    Run npm install first.     (npm install in a code font)

3. Fenced Code Blocks (with highlighting)

For more than a word or two of code, use a fence: three backticks on a line of their own, then your code, then three backticks to close. Write the language name right after the opening fence — RENDERED RESULT

```js
function greet(name) {
  return "Hello, " + name + "!";
}
```

```bash
npm install
npm run dev
```

Common language tags: js, python, html, css, bash, json, sql, ts. GitHub, GitLab, and most docs tools recognise dozens more.

4. Blockquotes (and nesting)

Start a line with > to make a blockquote — usually rendered as an indented bar, great for callouts, quotes, or "Note:" boxes. Add a second >> to nest a quote inside a quote. Keep the > on every line you want included.

> Note: save before you run.
> It only takes a second.

> Outer quote
>> Nested reply
>>> Even deeper

5. Horizontal Rules & Line Breaks

Three or more --- (or *** or ___) on a line by themselves draw a horizontal rule — a full-width divider. Line breaks are sneakier: a single newline is usually ignored. To force a hard break within a paragraph, end the line with two spaces or a backslash (\); leave a fully blank line to start a new paragraph.

Section one.

---

Roses are red·· (two trailing spaces)
Violets are blue.

Same line\ (backslash)
New line below.

Roses are red Violets are blue.

Same line New line below.

The ·· above marks two invisible trailing spaces. Because trailing spaces are easy to miss in review, many people prefer the visible backslash for hard breaks.

// 🎯 YOUR TURN — finish this README snippet.
// Replace each ___ then press "Run".

console.log("=== A fenced code block ===");

// 1) Open the fence AND name the language so it gets highlighted
console.log("___js");                 // 👉 three backticks then js  (\`\`\`js)
console.log("const x = 41 + 1;");
console.log("console.log(x);");
console.log("___");                   // 👉 three backticks to CLOSE (\`\`\`)

console.log("");

console.log("=== A blockquote ===");
// 2) Turn this note into a blockquote
console.log("___ Tip: commit early, commit often."); // 👉 start the line with >

console.log("");

console.log("=== A horizontal rule ===");
// 3) Add a divider line on its own
console.log("___");                   // 👉 three hyphens on their own line (---)

// ✅ Expected rendered result:
//    A highlighted JavaScript code block showing the two lines.
//    A grey, indented quote bar reading: Tip: commit early, commit often.
//    A full-width horizontal divider line.

Common Errors (and the fix)

• Spaces inside the markers: ** bold ** renders as literal asterisks, not bold. The marker must hug the text — write **bold** with no inner spaces.
• Forgetting the language on a code fence: js.
• Unmatched * markers: emphasis needs a matched pair. *italic with no closing * shows a stray asterisk — every opening marker needs a closing one.
• Unclosed code fence: forgetting the final code js … python. Also check the fence is exactly three backticks on its own line, not indented. Q: Is strikethrough standard Markdown? ~~text~~ isn't in the original spec, but it's part of GitHub Flavored Markdown (GFM), which GitHub, GitLab, Reddit, and most modern tools use — so in practice it works almost everywhere. Q: Why did my two lines merge into one? A single newline doesn't break a line in Markdown. End the first line with two spaces or a backslash for a hard break, or leave a blank line between them to make separate paragraphs. Mini-Challenge: Release Note No blanks this time — just a brief and a blank canvas (with an outline to keep you on track). Write the Markdown yourself, run it, then paste the output into a previewer and check it against the expected result in the comments. 🎉 Lesson Complete ✅ *italic*, **bold**, ***both*** — markers must hug the text, no inner spaces

// 🎯 MINI-CHALLENGE: write the body of a release note.
// No blanks this time — type the Markdown yourself with console.log(...).
//
// 1. A blockquote (>) warning: "Breaking change in v2.0"
// 2. One sentence with the word "removed" in BOLD (**)
//    and the word "deprecated" in ITALIC (*)
// 3. An inline code mention of \`config.json\`
// 4. A fenced code block tagged "json" with: { "version": 2 }
// 5. A horizontal rule (---) to close the note
//
// ✅ Expected rendered result:
//    A quote bar: "Breaking change in v2.0"
//    A sentence where "removed" is bold and "deprecated" is italic.
//    config.json shown in a code font; a highlighted JSON block;
//    and a divider line at the end.

// your code here

• ✅ ~~strikethrough~~ and for snippets that stay literal
• ✅ Fenced code blocks with a language tag ( `js) get syntax highlighting
• ✅ > makes a blockquote; >> nests one inside another
• ✅ --- draws a horizontal rule; two trailing spaces or \ force a hard line break

Practice quiz

Continue this course

• Previous: Introduction to Markdown
• Next: Lists and Tables — Create ordered and unordered lists, nested items, and data tables
• Quick reference: Markdown cheat sheet › Code