verbum v2.0

테마 테스트 — コードブロック & LaTeX 検証

nyan 테마의 코드블럭(Prism 하이라이팅)과 KaTeX 수식 렌더링을 함께 검증하는 테스트 글입니다.

目次 INDEX 本文へ ↓

見出しがないみたい…

이 글은 nyan 테마가 코드블럭과 수식(LaTeX)을 어떻게 렌더링하는지 확인하기 위한 테스트 글입니다. (`・ω・´)

현재 이 사이트에는 Settings → Code injection 을 통해 Prism.js(코드 하이라이팅)와 KaTeX(수식)가 이미 설치되어 있습니다. 그래서 테마 쪽에서는 코드블럭을 터미널 스타일로 감싸고, 다크 배경에서도 토큰 색이 잘 보이도록 보정만 해두었습니다.

1. 코드블럭 테스트

JavaScript

// 최애를 정렬하는 함수
function sortOshi(list) {
  return list
    .filter((x) => x.moe > 0)
    .sort((a, b) => b.moe - a.moe);
}

const team = [
  { name: "にゃんこ先生", moe: 120 },
  { name: "せんぱい", moe: 300 },
];

const result = sortOshi(team);
console.log(`최애는 ${result[0].name}!!`);

Python

from dataclasses import dataclass
from typing import List

@dataclass
class Character:
    name: str
    power: float
    moe: float = 0.0

def power_level(chars: List[Character]) -> float:
    return sum(c.power ** 2 for c in chars) ** 0.5

squad = [Character("にゃんこ", 9000, 9999), Character("せんぱい", 7500, 1200)]
print(f"총 전투력: {power_level(squad):.1f}")

Bash

#!/usr/bin/env bash
# 오늘도 덕질을 시작한다
set -euo pipefail

for i in {1..3}; do
  echo "推し活 ${i} 日目: 元気!"
done

ls -la ~/2d && echo "88888888"

HTML / CSS

<div class="hero">
  <span class="sticker">期間限定</span>
  <p>ようこそ、二次元へ</p>
</div>

인라인 코드

인라인은 이렇게 표시됩니다: npm run dev · const moe = "∞" · git push --force-with-lease · docker compose up -d

2. LaTeX 수식 테스트

인라인 수식

질량–에너지 등가 원리는 \(E = mc^2\) 로 유명합니다. 그렇다면 '덕력'도 보존될까요? 오늘의 덕력은 \(D = \sum_{i} \frac{moe_i}{t_i}\) 로 써볼 수 있겠습니다. (단위는 물론 애정입니다.)

블록 수식

가우시안 적분은 이렇게 렌더링됩니다.

$$ \int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi} $$

행렬과 벡터

$$ \begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix} $$

정렬된 방정식

$$ \begin{aligned} \text{총 덕력} &= \sum_{i=1}^{n} \text{모에}_i \times \text{활동량}_i \\ &= \text{애정} \times \text{시간} \end{aligned} $$

급수와 극한

바젤 문제도 한번.

$$ \sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6} \qquad \lim_{x \to \infty} \left(1 + \frac{1}{x}\right)^x = e $$

3. 기타 요소 테스트

「이 글은 테스트야. コードと数式、ちゃんと見える?」

리스트

  • 리스트 아이템 하나
  • 리스트 아이템 둘
    • 중첩된 하위 항목
    • 또 하나
  • 리스트 아이템 셋
  1. 첫째, 코드블럭 확인
  2. 둘째, 수식 확인
  3. 셋째, 다크 모드 확인

항목결과
코드블럭✅ Prism 하이라이팅
LaTeX✅ KaTeX 렌더링
인라인 코드✅ 핑크 하이라이트

링크도 확인: Ghost · KaTeX · Prism

— 테스트 끝! おつかれさま♡

0