---
description: Code blocks with syntax highlighting.
---

# Syntax Highlighting

Doctopus uses [Tree-sitter](https://tree-sitter.github.io/tree-sitter/) to highlight code blocks at build time. This is not a cheap regex-based approach, which often breaks when faced with complex grammar, but an actual parser that is used in major code editors like Neovim and Zed. Tree-sitter is now mainly maintained by [Zed Industries](https://zed.dev/).

## Supported Languages

- C
- C++
- Bash
- C Sharp
- CSS
- Dockerfile
- Go
- HLSL
- HTML
- Jai
- Java
- JSON
- Kotlin
- Lua
- OCaml
- PHP
- Python
- Rust
- TypeScript
- TypeScript React
- YAML
- Zig

Example:

```c
#include <stdio.h>

int main() {
  printf("Hello, World!");
  return 0;
}
```

```dockerfile
# syntax=docker/dockerfile:1.7

# Docker  file example

ARG BASE_IMAGE=python
ARG BASE_TAG=3.12-slim

FROM ${BASE_IMAGE}:${BASE_TAG} AS builder

LABEL org.opencontainers.image.title="syntax-highlighting-test" \
      org.opencontainers.image.description="Dockerfile with tricky but valid syntax"

ARG APP_HOME=/opt/app
ARG EXTRA_PIP_INDEX_URL=""
ENV PYTHONDONTWRITEBYTECODE=1 \
    PYTHONUNBUFFERED=1 \
    APP_HOME=${APP_HOME} \
    PATH="${APP_HOME}/.venv/bin:${PATH}"

WORKDIR ${APP_HOME}

#  JSON-array form with commas, quotes, and brackets inside strings
COPY ["requirements.txt", "./"]
RUN --mount=type=cache,target=/root/.cache/pip \
    python -m venv .venv && \
    pip install --no-cache-dir -r requirements.txt

# Heredoc, variable expansion, shell operators, escapes, and comment-like text in strings
RUN <<EOF
set -eux
mkdir -p "${APP_HOME}/src"
cat > "${APP_HOME}/src/app.py" <<'PY'
print("hello # not a comment")
print("brackets: [x], braces: {y}, dollars: $HOME")
PY
test -f "${APP_HOME}/src/app.py"
EOF

# Default value expansion, quoted colons, equals, and spaces
ENV GREETING="hello world" \
    CONFIG_PATH="${CONFIG_PATH:-/etc/app/config.yaml}"

FROM ${BASE_IMAGE}:${BASE_TAG} AS runtime

ARG APP_HOME=/opt/app
ENV APP_HOME=${APP_HOME}

WORKDIR ${APP_HOME}

COPY --from=builder ${APP_HOME}/.venv ./.venv
COPY --from=builder ${APP_HOME}/src ./src

# Healthcheck uses shell form and nested quoting
HEALTHCHECK --interval=30s --timeout=3s CMD python -c "print('ok: ' + '${GREETING:-unset}')" || exit 1

# Exec form with JSON array
ENTRYPOINT ["python", "src/app.py"]
```

<!--
Sitemap

URL: https://doctopus.frankmayer.dev/index.md
Title: doctopus
Description: The simplest way to write beautiful documentation

URL: https://doctopus.frankmayer.dev/v0.3.0/config.md
Title: Config
Description: Doctopus build configuration.

URL: https://doctopus.frankmayer.dev/v0.3.0/diagrams.md
Title: Diagrams
Description: Different diagram tools.

URL: https://doctopus.frankmayer.dev/v0.3.0/favicon.md
Title: Favicon
Description: How to set a custom favicon for your docs.

URL: https://doctopus.frankmayer.dev/v0.3.0/homepage.md
Title: Homepage
Description: The special homepage (`/index.html`).

URL: https://doctopus.frankmayer.dev/v0.3.0/hooks.md
Title: Hooks
Description: Integrate external tools using pre- and post-build hooks for things like generating files.

URL: https://doctopus.frankmayer.dev/v0.3.0/index.md
Title: Index

URL: https://doctopus.frankmayer.dev/v0.3.0/math.md
Title: Math
Description: LaTeX math support.

URL: https://doctopus.frankmayer.dev/v0.3.0/syntax_highlighting.md
Title: Syntax Highlighting
Description: Code blocks with syntax highlighting.

URL: https://doctopus.frankmayer.dev/v0.3.1/config.md
Title: Config
Description: Doctopus build configuration.

URL: https://doctopus.frankmayer.dev/v0.3.1/diagrams.md
Title: Diagrams
Description: Different diagram tools.

URL: https://doctopus.frankmayer.dev/v0.3.1/favicon.md
Title: Favicon
Description: How to set a custom favicon for your docs.

URL: https://doctopus.frankmayer.dev/v0.3.1/homepage.md
Title: Homepage
Description: The special homepage (`/index.html`).

URL: https://doctopus.frankmayer.dev/v0.3.1/hooks.md
Title: Hooks
Description: Integrate external tools using pre- and post-build hooks for things like generating files.

URL: https://doctopus.frankmayer.dev/v0.3.1/index.md
Title: Index

URL: https://doctopus.frankmayer.dev/v0.3.1/math.md
Title: Math
Description: LaTeX math support.

URL: https://doctopus.frankmayer.dev/v0.3.1/syntax_highlighting.md
Title: Syntax Highlighting
Description: Code blocks with syntax highlighting.

URL: https://doctopus.frankmayer.dev/next/config.md
Title: Config
Description: Doctopus build configuration.

URL: https://doctopus.frankmayer.dev/next/diagrams.md
Title: Diagrams
Description: Different diagram tools.

URL: https://doctopus.frankmayer.dev/next/favicon.md
Title: Favicon
Description: How to set a custom favicon for your docs.

URL: https://doctopus.frankmayer.dev/next/homepage.md
Title: Homepage
Description: The special homepage (`/index.html`).

URL: https://doctopus.frankmayer.dev/next/hooks.md
Title: Hooks
Description: Integrate external tools using pre- and post-build hooks for things like generating files.

URL: https://doctopus.frankmayer.dev/next/math.md
Title: Math
Description: LaTeX math support.

URL: https://doctopus.frankmayer.dev/next/media.md
Title: Media
Description: More than just images.

URL: https://doctopus.frankmayer.dev/next/search.md
Title: Search
Description: Search pages by content.

URL: https://doctopus.frankmayer.dev/next/syntax_highlighting.md
Title: Syntax Highlighting
Description: Code blocks with syntax highlighting.
-->