Markdown Components Reference

Live showcase of every supported markdown component — rendered exactly as it appears in articles. Use this page to verify rendering after index.php changes. Full syntax spec: note/markdown/MARKDOWN-COMPONENTS.md.

1. Callout Blocks

Four types: tip, warning, danger, info. PHP fenced block → styled div with colored left border.

2. Syntax Highlighting

Prism.js 1.29.0 with autoloader. Use standard fenced blocks with a language tag. Supported: python, javascript, bash, sql, json, css, php, and any Prism-supported language.

Rendered — Python:

def position_size(capital: float, risk_pct: float, stop_distance: float) -> float:
    """Kelly-safe position sizing: risk fixed % of capital per stop distance."""
    return (capital * risk_pct) / stop_distance

# Example: $50k account, 1% risk, $0.50 stop
shares = position_size(50_000, 0.01, 0.50)
print(f"Position size: {shares:.0f} shares")  # 1000 shares

Rendered — JavaScript:

const calcRiskReward = (entry, stop, target) => {
  const risk   = Math.abs(entry - stop);
  const reward = Math.abs(target - entry);
  return (reward / risk).toFixed(2);
};

console.log(calcRiskReward(185.20, 184.80, 186.20)); // "2.50"

Rendered — Bash:

# Deploy article to oyamori server
scp -i ~/.ssh/id_rsa article.md root@162.0.222.119:/home/logiceverything/oyamori/learning/_content/
ssh -i ~/.ssh/id_rsa root@162.0.222.119 \
  "chown logiceverything:logiceverything /home/logiceverything/oyamori/learning/_content/article.md"

Rendered — JSON:

{
  "symbol": "AAPL",
  "side": "buy",
  "qty": 100,
  "type": "limit",
  "limit_price": "185.20",
  "time_in_force": "day"
}

3. TradingView Charts — Candlestick

Standard chart with lines:, markers:, and vlines:.

4. TradingView Charts — Zones

zones: draws a price band using two createPriceLine() calls — upper line labeled, lower unlabeled.

Syntax:

    zones:
      - { price_hi: 184.50, price_lo: 183.00, color: "#ef4444", label: "Resistance Zone" }

Rendered:

5. TradingView Charts — Line and Area

6. TradingView Charts — Histogram and Bar

trendlines: draws diagonal lines using LWC series primitives. Lines extend across the full chart width. Fields: time1, price1, time2, price2 (required) · color · label · width · style: solid|dashed.

7. Tables

Standard GFM tables with alignment.

8. Standard Markdown

Headings

# H1 through ###### H6 — H1 reserved for article title, use H2–H4 in body.

Text Formatting

Bold — **text**
Italic — *text*
Strikethrough — ~~text~~
Inline code — `code`

Blockquote

"Price action is structure plus context, not structure alone. Structure is the entry trigger. Conviction validates the move."

Syntax: > text

Unordered List

• First item
• Second item
  • Nested item
  • Another nested item
• Third item

Ordered List

1. Pre-market scan — macro backdrop check
2. Sentiment gate — news score above threshold
3. Technical confirmation — two aligned signals
4. Entry — limit order, sized to 1% risk

Horizontal Rule

--- produces:

Inline Code

Use backticks for function_names(), variable_names, file/paths, and short commands.

Links

Oyamori Learning Hub — standard markdown link syntax.

Chart Color Reference

9. Math — KaTeX

Block math uses double-dollar display mode — centered on its own line. Inline math uses backslash-paren notation inside running text. KaTeX 0.16.9 injected only on articles that contain math. Delimiters chosen to avoid conflict with plain currency values like $100.

Rendered — Kelly Criterion (block):

Where = win probability, = loss as fraction of capital, = gain as fraction of capital.

Rendered — Sharpe Ratio:

Where is expected excess return over the risk-free rate, and is the portfolio standard deviation.

Rendered — Position Sizing:

Rendered — Maximum Drawdown:

Rendered — inline example:

The profit factor is . A value above is considered a viable edge; above is strong.

10. Tabs

[Tab Name] headers inside a fenced tabs block → tabbed panels. Inner content parsed as full markdown. Inline JS injected once per page only when tabs are present.

Rendered — Position sizing across languages:

Rendered — Strategy comparison:

11. Stat Cards

Key: Value pairs → flex grid of metric cards. Optional color hint via Key[color]: Value. Colors: green, red, amber, blue, muted. Default color is brand pink.

Rendered — Strategy summary (with color hints):

Rendered — Data feed comparison (default colors):

Rendered — Mixed muted/blue:

12. Collapsible Sections

Native HTML <details> — no JS. Title on same line as the fence tag. Inner body is full markdown.

13. Mermaid Diagrams

Mermaid 11 via ESM CDN. Injected only on articles that contain mermaid blocks. Supports flowchart, sequence, ER, pie, timeline, gitgraph, and more.

Rendered — Trade Decision Flowchart:

Rendered — Data Pipeline Sequence:

Rendered — Pie Chart:

14. Comparison Table

[Column Name] headers + Key: Value pairs → aligned comparison grid. Rows auto-aligned across all columns. Missing values show —. Supports same [color] hint as stat cards.

Rendered — Data feed comparison:

Rendered — Trading style comparison:

15. Raw HTML Passthrough

```html fence → content passed directly to page output, no escaping. Use for iframes, custom embeds, or any layout not covered by other components. Server-authored content only — never pipe user input through this.

Rendered — Custom callout with inline style:

Rendered — Two-column layout:

Rendered — YouTube embed:

16. Interactive Calculators

calc type:{name} → self-contained interactive widget. Pure HTML + inline JS, no external dependencies. Four built-in types. Multiple calculators on same page use isolated IDs — no conflicts.

Available types: position-size · kelly · risk-reward · drawdown

Syntax: Fenced block with type: on the opening line — no body needed.

Position Size Calculator

Kelly Criterion Calculator

Risk / Reward Calculator

Drawdown Calculator

MC-11 — Widget Embeds

Use for: Interactive HTML tools, visualizers, and reference guides that go beyond what native markdown components can do. Widgets are self-contained single-file HTML apps hosted on the server.

Syntax — inline shortcode, place on its own line:

Example — Options Trading Jargon Guide:

File → URL mapping:

Requirements for new widget HTML files:

Notes: Processed after Parsedown on final HTML. Error shown if file not found. Gallery of all widgets at oyamori.com/widgets/.