astro markdownのコードブロックのハイライトとmermaidのレンダリング設定

2025-06-16 | 3 min read | engineering astro mermaid

markdownのコードブロックと、mermaid構文のレンダリング設定

ほぼ参考ページの通りではあるがメモ

環境

“astro”: “^5.6.0”
“rehype-mermaid”: “^3.0.0”
“rehype-pretty-code”: “^0.14.1”
“playwright”: “^1.53.0”

code block

rehype pretty codeにしている

configにsyntaxHighlightを設定することでもcodeタグをハイライトされるが

コピーボタンの追加などのカスタムしたかったので

install

npm install rehype-pretty-code

configコードはmermaidセクションの方にかいた。また、exampleのリポジトリのものを流用しているので割愛

https://github.com/rehype-pretty/rehype-pretty-code/tree/master/examples/astro

mermaid

install

 npm install rehype-mermaid
 npm install playwright
 npx playwright install --with-deps chromium

astro.config.ts

export default defineConfig({
  markdown: {
    rehypePlugins: [
      rehypeMermaid,
      [
        rehypePrettyCode,
        {
          keepBackground: true,
          theme: moonlightTheme,
          transformers: [
            transformerCopyButton({
              visibility: "hover",
              feedbackDuration: 2500,
            }),
          ],
        },
      ],
    ],
    syntaxHighlight: false,
  },
...

以下のキャプチャような感じでsvgとしてレンダリングされる

deploy設定

cloudflare workderでgithub連携してデプロイしていたが、 build環境でplaywrightがインストールできなかったので github actionsでデプロイするように変更した

actionsのファイルは以下 wrangler versions uploadでプレビュー用のデプロイを行い、wrangler deployで本番用のデプロイを行っているまた、PRコメントとしてプレビューURLを投稿するようにしている

playwrightのインストールはいるからbuild遅くなるかと思ったら数十秒くらい増えただけだったのでそこまで影響はなさそう mermaidがレンダリングされた状態で記事ページが生成されていた

name: Deploy to Cloudflare Workers
 
on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
 
permissions:
  contents: read
  pull-requests: write
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright (chromium & deps)
        run: npx playwright install chromium --with-deps
      - name: Build Astro project
        run: npm run build
      - name: Deploy to Cloudflare Workers (preview)
        if: github.ref != 'refs/heads/main'
        id: deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          command: versions upload --message "${{ github.sha }}" --tag "${{ github.sha }}"
 
      - name: Publish to Cloudflare Workers (production)
        if: github.ref == 'refs/heads/main'
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          command: deploy
 
      - name: Comment preview URL on PR
        if: github.event_name == 'pull_request'
        env:
          DEPLOYMENT_URL: ${{ steps.deploy.outputs.deployment-url }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
          PR_NUMBER=$(jq --raw-output .pull_request.number "$GITHUB_EVENT_PATH")
          gh pr comment "$PR_NUMBER" --body "Deployment URL: $DEPLOYMENT_URL"

参考

code block

mermaid

deploy to cloudflare with github actions and playwright