1. Форматирование текста и акценты#

Базовые стили:

• Полужирное начертание (**bold**)
• Курсивное выделение (*italic*)
• Полужирный курсив (***bold italic***)
• Зачёркнутый текст (~~strikethrough~~)
• Встроенный код (`inline code`)
• Индексы: H₂O, 2¹⁰ = 1024
• Скрытый ответ: Astro — победитель State of JS 2024 в категории «Фреймворки»

Маркеры выделения (==text==) — Shirone поддерживает семантические маркеры без лишнего HTML:

• Основной акцент темы (primary)
• Вторичный, ненавязчивый сигнал
• Третичный редакторский акцент
• Ошибка или критическая ситуация
• Практический совет читателю

Аннотации к тексту ([+label]) — Astro строит большинство страниц заранее, гидратируя только интерактивные острова + по требованию.

Сноски — блог работает на Astro¹ с темой Shirone².

2. Уведомления (Callouts)#

3. Структурированный контент#

Шаги (:::steps) — для пошаговых инструкций:

Раскрывающиеся панели (:::collapse) — для FAQ и дополнительных деталей:

4. Кодовая база (Expressive Code)#

TypeScript — асинхронный клиент с повторными попытками:

1
interface FetchOptions {
2
  retries?: number;
3
  backoffMs?: number;
4
}
5

6
export async function fetchWithRetry<T>(
7
  url: string,
8
  options: FetchOptions = {},
9
): Promise<T> {
10
  const { retries = 3, backoffMs = 500 } = options;
11
  // const res = await fetch(url);
12
  for (let attempt = 1; attempt <= retries; attempt++) {
13
    try {
14
      const response = await fetch(url);
15
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
16
      return (await response.json()) as T;
17
    } catch (err) {
18
      if (attempt === retries) throw err;
19
      await new Promise((r) => setTimeout(r, backoffMs * attempt));
20
    }
21
  }
22
  throw new Error("Unexpected end of retries loop");
23
}

Многоязычные вкладки (:::code-group):

1
package main
2

3
import (
4
  "fmt"
5
  "sync"
6
)
7

8
func worker(id int, jobs <-chan int, results chan<- int, wg *sync.WaitGroup) {
9
  defer wg.Done()
10
  for j := range jobs {
11
    results <- j * 2
12
    fmt.Printf("worker %d processed job %d\n", id, j)
13
  }
14
}

1
use tokio::net::TcpListener;
2
use tokio::io::{AsyncReadExt, AsyncWriteExt};
3

4
#[tokio::main]
5
async fn main() -> Result<(), Box<dyn std::error::Error>> {
6
    let listener = TcpListener::bind("127.0.0.1:8080").await?;
7
    loop {
8
        let (mut socket, _) = listener.accept().await?;
9
        tokio::spawn(async move {
10
            let mut buf = [0; 1024];
11
            while let Ok(n) = socket.read(&mut buf).await {
12
                if n == 0 { return; }
13
                let _ = socket.write_all(&buf[..n]).await;
14
            }
15
        });
16
    }
17
}

1
import torch
2
import torch.nn as nn
3

4
class ConvNet(nn.Module):
5
    def __init__(self):
6
        super().__init__()
7
        self.features = nn.Sequential(
8
            nn.Conv2d(3, 32, kernel_size=3, padding=1),
9
            nn.ReLU(),
10
            nn.MaxPool2d(2, 2)
11
        )
12
        self.fc = nn.Linear(32 * 16 * 16, 10)
13

14
    def forward(self, x):
15
        x = self.features(x)
16
        return self.fc(x.view(x.size(0), -1))

Интерактивное дерево кода (:::code-tree) — IDE-подобная навигация по файлам:

1
<script lang="ts">
2
  let { label = "Нажмите", variant = "filled" } = $props();
3
</script>
4

5
<button class="m3-btn m3-btn--{variant}">{label}</button>

1
.m3-btn
2
  background: var(--primary)
3
  color: var(--on-primary)
4
  border-radius: var(--shape-corner-full)
5
  padding: 0 var(--m3e-space-4)
6
  font: var(--m3e-type-label-large)
7
  transition: box-shadow var(--m3e-duration-short) var(--m3e-easing-standard)

1
{
2
  "name": "button-demo",
3
  "version": "1.0.0",
4
  "dependencies": {
5
    "shirones": "^0.1.5"
6
  }
7
}

5. Файловые деревья#

Структура проекта (:::file-tree) — с диффами ++/-- и комментариями:

Из терминала (```file-tree):

6. Формулы и математика (KaTeX)#

Уравнение Шрёдингера: $i\hbar \frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \left [ -\frac{\hbar^2}{2m}\nabla^2 + V(\mathbf{r},t) \right ] \Psi(\mathbf{r},t)$

Формула Байеса: $P(A|B) = \frac{P(B|A) \cdot P(A)}{P(B)}$

Реакция термоядерного синтеза: $\ce{^2_1H + ^3_1H -> ^4_2He + ^1_0n + 17.6 MeV}$

7. Диаграммы (Mermaid)#

sequenceDiagram
    autonumber
    actor User as Читатель
    participant Browser as Браузер
    participant CDN as Cloudflare Edge
    participant Pagefind as Pagefind

    User->>Browser: Переход на nullvert.uz
    Browser->>CDN: GET /posts/markdown-showcase/
    CDN-->>Browser: Статический HTML + CSS (кэш)
    User->>Browser: Поиск по сайту
    Browser->>Pagefind: Запрос к локальному индексу
    Pagefind-->>Browser: Результаты без сетевых запросов

8. Интеграция с GitHub#

Репозиторий фреймворка, на котором работает блог:

withastro/astro

Компонентный движок интерфейса:

sveltejs/svelte

9. Изображения#

Одиночное изображение с подписью:

Сетка изображений ([grid]):

[grid] [/grid]

10. Таблица возможностей#

Все расширения рендерятся в семантический HTML во время сборки и следуют токенам M3E.