Code Blocks

Fence code with three backticks and name its language. Clay highlights it with Shiki, the highlighter of VS Code, in matching colors for the light and the dark theme.

```python
def greet(name: str) -> str:
    return f"Hello, {name}!"
```

def greet(name: str) -> str:
    return f"Hello, {name}!"

Every code block has a copy button in its top right corner; on touch screens it is always visible.

#Languages

Clay detects the languages your docs use and loads only those, so you never configure them. Any language Shiki knows works, under its name or a common alias: js, ts, py, sh, yml, md and so on. A block with an unknown language, or none, is shown as plain text.

package main

import "fmt"

func main() {
    fmt.Println("Hello from Go")
}

fn main() {
    println!("Hello from Rust");
}

SELECT title, updated FROM pages WHERE language = 'en' ORDER BY updated DESC;

#Highlighting lines

Put the line numbers in braces after the language, as single lines or ranges: ts {2} or ts {1,3-4}.

const site = loadSite(root);
const pages = site.pages.filter(page => !page.isDir);
console.log(`${pages.length} pages`);

#Notations in comments

Some changes are easier to mark on the line itself. Add a comment with a notation at the end of the line; Clay removes the comment and marks the line:

Use the comment syntax of the block’s language: # in Python, YAML or shell, <!-- --> in HTML, -- in SQL.

A diff:

export default defineConfig({
  title: "My Project", 
  title: "My Documentation", 
  base: "/docs/",
});

A highlighted line and a warning:

config = load_config("clay.yaml")
config["baseURL"] = "/docs/"
build(config, strict=False)  

Focus on one line:

title: "My Project"
baseURL: "/my-project/"
siteURL: "https://example.com"

Highlighted words:

const edition = editionOf(route.path, versions, languages);
const nav = navs[edition.prefix];

#Showing code fences

To show a code block inside a code block, as this page does, fence the outer block with four backticks:

````markdown
```js
console.log("inside");
```
````

#Inline code

Single backticks mark code within a sentence: npm install --save-dev clay-doc. Inline code is not highlighted.