现代软件开发语法高亮与 Mermaid 图示例

这篇文章用于验证当前站点对主流编程语言、常见配置文件格式，以及 Mermaid 图表的渲染能力是否正常。

Mermaid: 软件交付流水线

flowchart LR
  A[需求] --> B[设计]
  B --> C[开发]
  C --> D[CI 构建]
  D --> E[测试]
  E --> F[发布]
  F --> G[监控]

Mermaid: 微服务调用时序

sequenceDiagram
  participant U as User
  participant W as Web
  participant A as API
  participant C as Cache
  participant D as DB
  U->>W: 请求页面
  W->>A: 拉取业务数据
  A->>C: 查询缓存
  alt 缓存命中
    C-->>A: 返回缓存数据
  else 缓存未命中
    A->>D: 查询数据库
    D-->>A: 返回结果
    A->>C: 写入缓存
  end
  A-->>W: 响应 JSON
  W-->>U: 渲染页面

Mermaid: 网络分区与流量路径

flowchart TB
  Internet --> CDN
  CDN --> WAF
  WAF --> LB[Load Balancer]
  LB --> APP1[App Node A]
  LB --> APP2[App Node B]
  APP1 --> Redis[(Redis)]
  APP2 --> Redis
  APP1 --> DB[(Primary DB)]
  APP2 --> DB
  DB --> Replica[(Read Replica)]

Mermaid: 工程模块关系

classDiagram
  class WebApp {
    +render()
    +submit()
  }
  class AuthService {
    +login()
    +verifyToken()
  }
  class BillingService {
    +createInvoice()
    +refund()
  }
  class NotificationService {
    +sendMail()
    +sendWebhook()
  }
  WebApp --> AuthService
  WebApp --> BillingService
  BillingService --> NotificationService

Shell 与脚本

#!/usr/bin/env bash
set -euo pipefail

build_dir="_site"
rm -rf "$build_dir"
bundle exec jekyll build
echo "build complete: $build_dir"

autoload -Uz colors && colors
for file in **/*.md(.); do
  print -P "%F{green}${file}%f"
done

from pathlib import Path

posts = sorted(Path("_posts").glob("*.md"))
print(f"posts: {len(posts)}")

def normalize_tags(tags)
  Array(tags).map(&:to_s).map(&:strip).reject(&:empty?)
end

Web 与前端

export async function fetchJSON(url) {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}

type DeployTarget = "staging" | "production";

export function deploy(target: DeployTarget): string {
  return `deploying to ${target}`;
}

export function StatusBadge({ online }) {
  return <span className={online ? "ok" : "error"}>{online ? "UP" : "DOWN"}</span>;
}

type CardProps = { title: string; children: React.ReactNode };

export function Card({ title, children }: CardProps) {
  return <section><h2>{title}</h2>{children}</section>;
}

<main class="dashboard">
  <header>
    <h1>Release Overview</h1>
  </header>
</main>

.dashboard {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

$brand: #ae432e;

.button-primary {
  color: white;
  background: $brand;
}

编译型与系统语言

#include <stdio.h>

int main(void) {
  printf("hello, c\n");
  return 0;
}

#include <iostream>

int main() {
  std::cout << "hello, cpp" << std::endl;
}

@interface NetworkClient : NSObject
- (void)sendRequest;
@end

struct Endpoint {
  let path: String
}

package main

import "fmt"

func main() {
  fmt.Println("hello, go")
}

fn main() {
    println!("hello, rust");
}

public class Hello {
  public static void main(String[] args) {
    System.out.println("hello, java");
  }
}

fun main() {
  println("hello, kotlin")
}

Console.WriteLine("hello, csharp");

<?php
echo "hello, php";

数据与配置文件

services:
  web:
    image: nginx:stable
    ports:
      - "80:80"

{
  "name": "luowei.github.io",
  "private": true
}

{
  // json5 会被映射为 json 高亮
  trailingComma: true,
  features: ["search", "comments"],
}

[server]
host = 127.0.0.1
port = 8080

<configuration>
  <appSettings>
    <add key="mode" value="production" />
  </appSettings>
</configuration>

server {
  listen 443 ssl http2;
  server_name luowei.github.io;

  location / {
    proxy_pass http://127.0.0.1:8080;
  }
}

[program:jekyll]
command=bundle exec jekyll serve --host 0.0.0.0
autorestart=true

FROM ruby:3.3-alpine
WORKDIR /site
COPY . .
RUN bundle install
CMD ["bundle", "exec", "jekyll", "serve", "--host", "0.0.0.0"]

build:
	bundle exec jekyll build

serve:
	bundle exec jekyll serve

SELECT id, title, created_at
FROM posts
WHERE published = true
ORDER BY created_at DESC;

## Release Checklist

- build
- test
- deploy

如果这篇文章中的 Mermaid 图和代码块都正常显示，说明当前站点的图示与高亮链路已经可用。