# Astro Markdown with Shiki

import DocButton from '~/components/webkit/DocButton.vue';
import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicContent.vue';
import Container from '~/components/webkit/Container.vue';

<SectionBasicContent
  description="The Astro Markdown with Shiki template demonstrates how to combine Astro's built-in Markdown support with Shiki for syntax highlighting in code blocks. This template provides a powerful solution for technical content, featuring Shiki's high-quality syntax highlighting that matches VS Code's themes, making code blocks both beautiful and functional."
  buttons={[
    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-markdown-with-shiki", outlined: false, icon: "ai ai-azion", iconPos: "left" },
    { label: "View demo", link: "https://ftud9a0zod.map.azionedge.net/", severity: "secondary" }
  ]}
>
  <Fragment slot="content">
    <div style="flex: 1; min-width: 300px;">
      | Item | Details |
      |:----------|:------|
      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-with-markdown-shiki) |
      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
      | Use Case | General |
    </div>
    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-markdown-shiki.png" width="400" alt="Astro markdown with shiki" style="min-width: 100%; max-width: 100%; height: auto;" />
    </div>
  </Fragment>
</SectionBasicContent>

## About this template

This template combines [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/)'s built-in Markdown support with Shiki, the syntax highlighter that also powers VS Code. Code blocks are highlighted at build time using familiar editor themes, so technical posts and documentation render crisp, readable snippets with no client-side JavaScript. Served from Azion's edge, the pages load quickly for readers everywhere.

## Key features

- Markdown content with Shiki-powered syntax highlighting for code blocks.
- VS Code-compatible themes for accurate, high-quality code rendering.
- Highlighting applied at build time, shipping zero extra client JavaScript.
- One-click deployment to Azion's globally distributed global network.