# Obsidian Markdown Showcase: Code and Diagrams This post demonstrates code blocks, tables, and diagram features. ## Inline Code Use `backticks` for inline code like `const x = 42` or commands like `npm install obsidian`. ## Fenced Code Blocks ### JavaScript ```javascript // A simple async function example async function fetchData(url) { try { const response = await fetch(url); const data = await response.json(); return data; } catch (error) { console.error('Error fetching data:', error); throw error; } } // Usage const API_URL = 'https://api.example.com/data'; fetchData(API_URL).then(console.log); ``` ### Python ```python from dataclasses import dataclass from typing import List, Optional @dataclass class BlogPost: title: str content: str tags: List[str] published: bool = False def publish(self) -> None: self.published = True print(f"Published: {self.title}") # Create and publish a post post = BlogPost( title="Hello World", content="This is my first post!", tags=["intro", "hello"] ) post.publish() ``` ### Elixir ```elixir defmodule Calculator do @moduledoc """ A simple calculator module demonstrating Elixir syntax. """ def add(a, b), do: a + b def subtract(a, b), do: a - b def multiply(a, b), do: a * b def divide(_a, 0), do: {:error, :division_by_zero} def divide(a, b), do: {:ok, a / b} def calculate(operation, a, b) do case operation do :add -> add(a, b) :subtract -> subtract(a, b) :multiply -> multiply(a, b) :divide -> divide(a, b) _ -> {:error, :unknown_operation} end end end ``` ### Shell/Bash ```bash #!/bin/bash # Deploy script example echo "Starting deployment..." # Build the project npm run build # Run tests if npm test; then echo "Tests passed!" # Deploy to production rsync -avz ./dist/ user@server:/var/www/app/ echo "Deployment complete!" else echo "Tests failed. Aborting deployment." exit 1 fi ``` ### JSON ```json { "name": "obsidian-showcase", "version": "1.0.0", "description": "A showcase of Obsidian markdown features", "features": [ "callouts", "mermaid", "code-blocks", "tables" ], "config": { "theme": "dark", "fontSize": 16, "enablePlugins": true } } ``` ### YAML (Frontmatter example) ```yaml title: My Blog Post date: 2025-12-03 author: Claude tags: - markdown - tutorial metadata: word_count: 1500 reading_time: 7 min difficulty: intermediate publish: true ``` ### CSS ```css /* Custom styling for callouts */ .callout { border-radius: 8px; padding: 1rem; margin: 1rem 0; border-left: 4px solid var(--accent-color); } .callout[data-callout="tip"] { --accent-color: #10b981; background: rgba(16, 185, 129, 0.1); } .callout[data-callout="warning"] { --accent-color: #f59e0b; background: rgba(245, 158, 11, 0.1); } ``` ### SQL ```sql -- Query to find popular blog posts SELECT p.title, p.published_at, COUNT(c.id) as comment_count, SUM(v.views) as total_views FROM posts p LEFT JOIN comments c ON c.post_id = p.id LEFT JOIN page_views v ON v.post_id = p.id WHERE p.published = true AND p.published_at > NOW() - INTERVAL '30 days' GROUP BY p.id, p.title, p.published_at HAVING COUNT(c.id) > 5 ORDER BY total_views DESC LIMIT 10; ``` ## Tables ### Simple Table | Feature | Supported | Notes | |---------|-----------|-------| | Bold | ✅ | Use `**text**` | | Italic | ✅ | Use `*text*` | | Highlight | ✅ | Use `==text==` | | Strikethrough | ✅ | Use `~~text~~` | ### Aligned Table | Left Aligned | Center Aligned | Right Aligned | |:-------------|:--------------:|--------------:| | Content | Content | Content | | More text | More text | More text | | Even more | Even more | 12,345.67 | ### Complex Table | Language | Typing | Paradigm | Use Case | Performance | |:---------|:------:|:--------:|:---------|:-----------:| | Python | Dynamic | Multi | Data Science, Web | ⭐⭐⭐ | | Rust | Static | Systems | Performance-critical | ⭐⭐⭐⭐⭐ | | Elixir | Dynamic | Functional | Distributed Systems | ⭐⭐⭐⭐ | | JavaScript | Dynamic | Multi | Web, Full-stack | ⭐⭐⭐ | | Go | Static | Imperative | Cloud, CLI tools | ⭐⭐⭐⭐ | ## Mermaid Diagrams ### Flowchart ```mermaid flowchart TD A[Start] --> B{Is it working?} B -->|Yes| C[Great!] B -->|No| D[Debug] D --> E[Check logs] E --> F[Fix issue] F --> B C --> G[Deploy] G --> H[End] ``` ### Sequence Diagram ```mermaid sequenceDiagram participant U as User participant B as Browser participant S as Server participant D as Database U->>B: Click Login B->>S: POST /api/login S->>D: Query user D-->>S: User data S-->>B: JWT Token B-->>U: Redirect to Dashboard ``` ### Class Diagram ```mermaid classDiagram class BlogPost { +String title +String content +Date publishedAt +List~Tag~ tags +publish() +unpublish() +addTag(tag) } class Tag { +String name +String slug +getPostCount() } class Author { +String name +String email +List~BlogPost~ posts +createPost(title, content) } Author "1" --> "*" BlogPost : writes BlogPost "*" --> "*" Tag : has ``` ### State Diagram ```mermaid stateDiagram-v2 [*] --> Draft Draft --> Review : Submit Review --> Draft : Request Changes Review --> Published : Approve Published --> Archived : Archive Archived --> Published : Restore Published --> [*] ``` ### Entity Relationship Diagram ```mermaid erDiagram AUTHOR ||--o{ POST : writes POST ||--|{ COMMENT : has POST }o--o{ TAG : tagged_with AUTHOR ||--o{ COMMENT : writes AUTHOR { int id PK string name string email } POST { int id PK string title text content date published_at int author_id FK } TAG { int id PK string name string slug } ``` ### Gantt Chart ```mermaid gantt title Blog Development Timeline dateFormat YYYY-MM-DD section Planning Requirements :a1, 2025-01-01, 7d Design :a2, after a1, 14d section Development Frontend :b1, after a2, 21d Backend :b2, after a2, 28d Integration :b3, after b1, 14d section Launch Testing :c1, after b3, 7d Deployment :c2, after c1, 3d ``` ### Pie Chart ```mermaid pie title Blog Traffic Sources "Organic Search" : 45 "Social Media" : 25 "Direct" : 15 "Referral" : 10 "Email" : 5 ``` ### Git Graph ```mermaid gitGraph commit id: "Initial" branch develop checkout develop commit id: "Feature A" commit id: "Feature B" checkout main merge develop id: "v1.0" branch hotfix checkout hotfix commit id: "Bugfix" checkout main merge hotfix id: "v1.0.1" ``` --- *Previous: [[Obsidian Markdown Showcase - Links and Embeds]]* *Next: [[Obsidian Markdown Showcase - Advanced Features]]* #markdown #obsidian #code #diagrams #mermaid