Greetings, brave adventurer! Welcome to Advanced Markdown - the quest where your plain text grows tables, footnotes, callouts, and metadata. You already know that # Heading and **bold** work their small magics. Now you will learn the extended syntax that turns Markdown into a serious documentation and publishing tool - the very language every page on IT-Journey is written in.

Whether you write READMEs, blog posts, or quest pages like this one, this adventure will teach you the richer dialect - Kramdown and GitHub-flavored extensions - plus the frontmatter that lets a static site generator build whole pages from your words.

📖 The Legend Behind This Quest

Markdown was created in 2004 to let people write formatted documents in plain text that still reads naturally before it is ever converted to HTML. It was deliberately tiny. But “tiny” left gaps: no tables, no footnotes, no fenced code. So dialects arose. GitHub-Flavored Markdown added tables and task lists; Kramdown - the engine Jekyll uses - added footnotes, attribute lists, and definition lists. On top of the prose sits frontmatter, a block of metadata that tells the site generator the title, layout, and date. Master these and a single text file becomes a fully-built web page.

This quest teaches the extended syntax and the frontmatter that drive content-first sites like this one.

🎯 Quest Objectives

By the time you complete this journey, you will have mastered:

Primary Objectives (Required for Quest Completion)

• Tables - Build readable, aligned data tables
• Footnotes & Task Lists - Add references and interactive checklists
• Fenced Code & Callouts - Highlight code by language and call out warnings
• Frontmatter - Drive a page’s metadata with a YAML block

Secondary Objectives (Bonus Achievements)

• Kramdown Attributes - Attach classes and ids to elements
• Definition Lists - Render term-and-definition pairs
• Liquid Awareness - Recognize when Markdown meets a templating language

Mastery Indicators

You’ll know you’ve truly mastered this quest when you can:

• Author a clean, aligned table from memory
• Add a footnote and explain where it renders
• Write a frontmatter block and name what each field controls

🗺️ Quest Prerequisites

📋 Knowledge Requirements

• Basic Markdown (headings, bold/italic, links, lists)
• Comfort creating and editing plain text files
• Helpful: a basic idea of what HTML and YAML are

🛠️ System Requirements

• Modern operating system (Windows 10+, macOS 10.14+, or Linux)
• A text editor with Markdown preview (VS Code recommended)
• Optional: a Jekyll site to see frontmatter in action

🧠 Skill Level Indicators

This 🟢 Easy quest expects:

• Beginner-friendly - some exposure to basic Markdown helps
• Willingness to preview your document as you write
• Ready for 45-60 minutes of focused learning

🌍 Choose Your Adventure Platform

Markdown is just text, so any editor works. The difference is how you preview the rendered result.

🍎 macOS Kingdom Path

🪟 Windows Empire Path

🐧 Linux Territory Path

☁️ Cloud Realms Path

🧙‍♂️ Chapter 1: Tables, Footnotes & Task Lists - Structured Prose

Plain Markdown cannot make a table. The extended dialects can, and they add references and checklists too.

⚔️ Skills You’ll Forge in This Chapter

• Building aligned tables
• Adding footnotes
• Writing interactive task lists

🏗️ Tables and Alignment

A table is rows of pipes. The second row sets alignment with colons:

| Feature      | Plain Markdown | Kramdown |
| :----------- | :------------: | -------: |
| Headings     | Yes            | Yes      |
| Tables       | No             | Yes      |
| Footnotes    | No             | Yes      |

:--- left-aligns, :--: centers, and ---: right-aligns that column. Footnotes keep your prose clean by moving references to the bottom:

Static sites are fast because pages are pre-built.[^speed]

[^speed]: The server sends a finished file instead of building it per request.

The [^speed] marker renders as a small superscript link that jumps to the note. Task lists render as real checkboxes:

- [x] Learn tables
- [ ] Learn footnotes
- [ ] Learn frontmatter

🔍 Knowledge Check: Tables & Footnotes

• How do you center a single column in a Markdown table?
• Where does the text of a footnote appear when rendered?
• What is the difference between - [ ] and - [x]?

⚡ Quick Wins and Checkpoints

• Built a table: A three-column table renders with aligned columns
• Added a footnote: A superscript marker links to a note at the bottom

🧙‍♂️ Chapter 2: Fenced Code, Callouts & Kramdown Power - Beyond Prose

Code needs to be shown verbatim and highlighted; readers need their attention drawn to warnings; and Kramdown lets you attach HTML attributes to any element.

⚔️ Skills You’ll Forge in This Chapter

• Fenced code blocks with language hints
• Blockquote-based callouts
• Kramdown attribute lists and definition lists

🏗️ Fenced Code and Callouts

A fenced code block is three backticks plus a language id. The language enables syntax highlighting:

```python
def greet(name):
    return f"Hello, {name}"
```

To show backticks themselves (as above), wrap the block in four backticks. Callouts are styled blockquotes - many renderers and themes give them color:

> **Note:** Kramdown is the default Markdown engine in Jekyll.

> ⚠️ **Warning:** GitHub does not support every Kramdown feature.

Kramdown attribute lists let you attach a class or id to an element using {: ... }:

This paragraph gets a CSS class and an id.
{: .lead #intro }

### A heading with an id
{: #custom-anchor }

That renders the paragraph as <p class="lead" id="intro">, so your CSS or theme can target it. Definition lists pair a term with its meaning:

Static Site Generator
: A tool that renders source files into a finished website.

Frontmatter
: A YAML metadata block at the top of a content file.

🔍 Knowledge Check: Code & Kramdown

• Why add a language id to a fenced code block?
• What does the Kramdown line {: .lead #intro } produce in HTML?
• How many backticks do you need to display a three-backtick block as text?

⚡ Quick Wins and Checkpoints

• Highlighted code: A fenced block shows colored syntax in preview
• Added an attribute: An element carries a class you set with {: ... }

🧙‍♂️ Chapter 3: Frontmatter-Driven Content - Words That Become Pages

The leap from “a document” to “a web page” is frontmatter: a YAML block fenced by --- lines at the very top. A static site generator reads it to decide the page’s title, layout, and more.

⚔️ Skills You’ll Forge in This Chapter

• Writing a frontmatter block
• Understanding how frontmatter drives rendering
• Recognizing Liquid templating inside Markdown

🏗️ A Frontmatter Block

Here is a complete content file. Everything between the two --- lines is metadata; everything after is the body:

---
title: My First Real Page
layout: default
date: 2026-06-14
tags: [markdown, jekyll]
---

# {{ page.title }}

This body is plain Markdown, but the heading above is filled in
from the `title` field in the frontmatter.

Jekyll reads title, layout, and date, wraps your body in the named layout, and outputs HTML. The double-brace {{ page.title }} is Liquid, Jekyll’s templating language - it pulls a value out of the frontmatter and drops it into the page.

Because Liquid tags would otherwise be processed at build time, documentation that wants to show Liquid wraps it so it renders literally. In a Jekyll source file you would write:

{% for post in site.posts %}
  - [{{ post.title }}]({{ post.url }})
{% endfor %}

The raw / endraw fence tells Jekyll “print these tags as text, do not execute them” - essential when you are teaching Liquid in a Jekyll-built page like this quest.

🔍 Knowledge Check: Frontmatter & Liquid

• What characters fence a frontmatter block, and where must it appear?
• What does {{ page.title }} pull from, and who fills it in?
• Why wrap Liquid examples in a raw block inside a Jekyll page?

🎮 Mastery Challenges

🟢 Novice Challenge: A Rich README

Objective: Write a README.md that uses three extended features.

Requirements:

• At least one table with column alignment
• At least one footnote
• At least one fenced code block with a language id

Validation: All three render correctly in your editor’s preview or on GitHub.

🟡 Intermediate Challenge: A Documented Component

Objective: Document a small concept using callouts and a definition list.

Requirements:

• A definition list of at least three terms
• A Note and a Warning callout
• One element given a class via a Kramdown attribute list

Validation: The definitions render as term/description pairs and the attribute appears in the HTML.

🔴 Advanced Challenge: A Frontmatter Page

Objective: Create a content file whose page is driven by frontmatter.

Requirements:

• A complete frontmatter block with title, layout, and date
• Use {{ page.title }} in the body
• Include a raw-wrapped Liquid example for documentation

Validation: When built with Jekyll, the title appears from frontmatter and the wrapped Liquid renders as literal text.

🏆 Quest Rewards & Achievements

🎖️ Badges Earned:

• 🏆 Scribe of the Codex - You authored rich, structured documents
• 🌱 Sprout of the Written Word - Kramdown and frontmatter are second nature

🛠️ Skills Unlocked:

• Structured Documentation Authoring - Tables, footnotes, callouts, and code
• Frontmatter-Driven Content - Turn text files into built pages

🔓 Unlocked Quests:

• SEO Optimization - Make the content you write discoverable
• Jekyll Plugins - Extend how your Markdown becomes a site

📊 Progression Points: +50 XP

🗺️ Next Steps in Your Journey

Continue the Main Story:

• 🎯 SEO Optimization - Help search engines find your writing

Explore Side Adventures:

• ⚔️ Jekyll Plugins - Add build-time power to your content
• ⚔️ CSS Styling Basics - Style the pages your Markdown becomes

Character Class Recommendations

💻 Software Developer: Continue to Jekyll Plugins
🏗️ System Engineer: Explore SEO Optimization
🎨 Frontend Specialist: Advance to CSS Styling Basics

📚 Resources

Official Documentation

• Kramdown Syntax Reference - The engine Jekyll uses
• GitHub-Flavored Markdown Spec - Tables and task lists
• Jekyll: Front Matter - How metadata drives pages

Community Resources

• Markdown Guide - Basic and extended syntax explained
• CommonMark - The standardized Markdown core
• Liquid Documentation - The templating language Jekyll speaks

Learning Materials

• Markdown Tutorial (interactive) - Practice in your browser
• Dillinger Online Editor - Live preview while you learn

🤝 Quest Completion Checklist

• ✅ Completed all primary objectives
• ✅ Wrote a document using tables, footnotes, and fenced code
• ✅ Answered all knowledge check questions
• ✅ Completed at least one mastery challenge
• ✅ Explored the resource library
• ✅ Identified your next quest in the journey

🕸️ Knowledge Graph

Structured wiki-links connect this quest to the IT-Journey knowledge graph. Open the Obsidian Graph View to explore connections.

Level hub: [[Level 0001 - Web Fundamentals]] Overworld: [[🏰 Overworld - Master Quest Map]] Unlocks: [[SEO Optimization]] · [[Jekyll Plugins]] Obsidian docs: [[Obsidian Knowledge Graph and Wiki Links]]