```markdown
---
title: "Welcome to krowdev"
description: "A practitioner's knowledge base for agentic coding, DNS, and TLS fingerprinting."
published: 2026-03-15
kind: article
tags: [meta]
maturity: budding
origin: ai-drafted
---
This is krowdev — a developer knowledge base and blog.
## What You'll Find Here
- **How-to guides** for common dev tasks
- **Concepts** explained from first principles
- **Agentic coding** patterns — the unique angle
## The Stack
Built with Astro 6, themed with Catppuccin Mocha.
```
```html
This is krowdev — a developer knowledge base and blog.
What You'll Find Here
- How-to guides for common dev tasks
- Concepts explained from first principles
- Agentic coding patterns — the unique angle
The Stack
Built with Astro 6, themed with Catppuccin Mocha.
```
Notice what happened:
- **Frontmatter** was extracted as structured data (`entry.data.title`, `entry.data.published`, etc.) — not rendered
- **`## Heading`** became `
` — with auto-generated anchor IDs for the ToC
- **`**bold**`** became `bold`
- **`- list`** became ``
- The **KBEntry layout** wraps this in a header (date, tags) + ToC sidebar
- The **Base layout** wraps that in the full page shell
The frontmatter `published: 2026-03-15` is used by `KBEntry.astro` to display "March 15, 2026" in the header — computed at build time.
## Code Blocks — Shiki
Astro uses Shiki for syntax highlighting. Shiki uses the same grammar files as VS Code, so highlighting looks identical to your editor.
In markdown, use fenced code blocks with a language tag:
````markdown
```python
def greet(name: str) -> str:
return f"Hello, {name}!"
```
````
Astro's built-in Markdown highlighting (Shiki) takes a light/dark theme pair directly in config:
```js
// astro.config.mjs — Astro's built-in Shiki highlighting
markdown: {
shikiConfig: {
themes: {
light: 'catppuccin-latte',
dark: 'catppuccin-mocha',
},
},
},
```
Shiki embeds both themes' colors as CSS custom properties, and the CSS in `global.css` switches between them based on `data-theme`. (krowdev itself layers the [`astro-expressive-code`](https://expressive-code.com/) integration on top — it wraps Shiki to add features like collapsible sections, and is configured under `integrations` rather than `markdown.shikiConfig` — but the dual-theme idea is identical.)
```css
html[data-theme='light'] pre.astro-code span {
color: var(--shiki-light) !important;
}
html[data-theme='dark'] pre.astro-code span {
color: var(--shiki-dark) !important;
}
```
## Supported Languages
Shiki supports 200+ languages out of the box. Some examples:
```javascript
// JavaScript
const result = await fetch('/api/data').then(r => r.json());
```
```bash
# Shell
npm run build && npx pagefind --site dist
```
```sql
-- SQL
SELECT title, date FROM posts WHERE difficulty = 'beginner' ORDER BY date DESC;
```
```yaml
# YAML frontmatter
title: "My Article"
difficulty: beginner
tags: [astro, webdev]
```
## MDX — Markdown + Components
Files ending in `.mdx` can import and use Astro components inside markdown:
```mdx
---
title: Interactive Demo
---
import Chart from '../../components/Chart.astro';
Here's a regular paragraph.
And more text after the component.
```
:::key
MDX is markdown that can embed components. Use it when you need interactive elements or custom layouts inside article content. Use plain `.md` when you don't — it's simpler and faster to process.
:::
For krowdev, the `@astrojs/mdx` integration is installed but most articles use plain `.md` since they don't need embedded components.
## HTML in Markdown
Standard markdown allows raw HTML. This is how the interactive elements in this course work:
```markdown
:::key
Content here with **markdown** formatting.
:::
```
The `
` and `` pass through as-is. The markdown inside them still gets processed. The styling comes from `global.css`.
**Challenge: Create a syntax-highlighted article**
Create a new kb entry at `content/kb/git-basics.md`:
```yaml
---
title: "Git Basics Cheatsheet"
description: "Essential git commands for daily use."
kind: snippet
created: 2026-03-20
tags: [git]
maturity: seedling
origin: human
confidence: high
---
```
Add 3-4 code blocks using different languages (`bash`, `diff`, `text`). For example:
````markdown
```bash
git status
git add -p
git commit -m "message"
```
```diff
- old line that was removed
+ new line that was added
```
````
Run `npm run dev` and check that:
- Syntax highlighting matches the Catppuccin theme
- Toggling dark/light mode switches the code colors too
- The article appears on the site under the reference section
---
Previous: [Styling](/guide/astro-styling/) | Next: [Build & Deploy](/guide/astro-build-and-deploy/)
## Sources
- Astro Docs, [Markdown content](https://docs.astro.build/en/guides/markdown-content/)
- Astro Docs, [MDX integration](https://docs.astro.build/en/guides/integrations-guide/mdx/)
- Shiki, [Syntax highlighter](https://shiki.style/)