Show both editing state (with markdown syntax) and rendered state
If possible, use Typora's split view or show the raw markdown first, then the rendered result
Include at least 2 levels of nesting

Figure 3-3: Code Block with Syntax Highlighting

Filename: chapter-03-figure-03-code-block-highlight.png

Content to Capture:

Python Code Block

def hello_world():
    """This is a simple greeting function."""
    message = "Hello, Typora!"
    print(message)
    return message

# Call the function
result = hello_world()

Bash Code Block

# Navigate to project directory
cd ~/my-project

# Initialize git repository
git init

# Add all files
git add .

# Commit changes
git commit -m "Initial commit"

JSON Code Block

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "A sample project",
  "author": "Your Name",
  "license": "MIT"
}

Capture Instructions:

Show code blocks with language identifiers (python, bash, json)
Ensure syntax highlighting is visible (colors for keywords, strings, comments)
Include the triple backticks with language name visible

Figure 3-4: Inline Math Setting

Filename: chapter-03-figure-04-inline-math-setting.png

Content to Capture:

Part A: Settings Panel

Open Typora Preferences → Markdown → Markdown Syntax Support

Show these settings:

Part B: Inline Formula Example

The quadratic formula $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ is used to solve quadratic equations.

Einstein's famous equation $E = mc^2$ shows the relationship between mass and energy.

The area of a circle is $A = \pi r^2$ .

Capture Instructions:

Part A: Screenshot the Markdown preferences panel with Inline Math checkbox visible
Part B: Show inline formulas rendered within paragraph text
If possible, combine both in one image or create two separate screenshots

Figure 3-5: Display Math and Multi-line Alignment

Filename: chapter-03-figure-05-display-math-and-align.png

Content to Capture:

Display Formula (Block)

E = mc^2

\int_{a}^{b} f(x) \, dx = F(b) - F(a)

Multi-line Aligned Formula

\begin{align} (x + y)^2 &= x^2 + 2xy + y^2 \\ &= (x^2 + y^2) + 2xy \\ &= x^2 + y^2 + 2xy \end{align}

\begin{align} \sum_{i=1}^{n} i &= \frac{n(n+1)}{2} \\ \sum_{i=1}^{n} i^2 &= \frac{n(n+1)(2n+1)}{6} \end{align}

Capture Instructions:

Show both standalone display formulas and aligned multi-line formulas
Ensure the rendered mathematical notation is clear and readable
Include the raw markdown syntax if showing in source code mode

Figure 3-6: Markdown Preferences Overview

Filename: chapter-03-figure-06-markdown-preferences-overview.png

Content to Capture:

Open Typora Preferences → Markdown

Show the following sections:

Markdown Syntax Support

Math Block Settings

Math Rendering Engine: MathJax (or KaTeX)
Auto Numbering Math Blocks

Other Settings

Default Code Language: (empty or specify)
Word Count: Include whitespace

Capture Instructions:

Capture the full Markdown preferences panel
Ensure checkboxes for Inline Math, Footnotes, and other key settings are visible
Show both "Markdown Syntax Support" and "Math" sections if possible

Figure 3-7: Image Preferences and Folder Structure

Filename: chapter-03-figure-07-image-preferences-and-folder-structure.png

Content to Capture:

Part A: Image Settings

Open Typora Preferences → Image

Show these settings:

Image Insert:

Copy image to current folder (./)
Copy image to ./assets folder
Upload image via iPic
Use global setting

Other Options:

Apply above rules to local images
Apply above rules to online images
Use relative path if possible

Part B: Folder Structure

books/
└── typora-and-markdown/
    ├── images/
    │   ├── chapter-01-figure-01.png
    │   ├── chapter-02-figure-01.png
    │   ├── chapter-02-figure-02.png
    │   └── chapter-03-figure-01.png
    ├── chapters/
    │   ├── 01-introduction.md
    │   ├── 02-setup.md
    │   └── 03-markdown-basics.md
    └── README.md