Files
2026-09-18 20:59:08 +02:00

1100 lines
53 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>📚 Tutoriály | ApolloNvim</title>
<!-- Meta description & SEO -->
<meta
name="description"
content="Průvodci a návody pro ApolloNvim. Naučte se efektivně používat Neovim s praktickými tutoriály od instalace po pokročilé funkce."
/>
<meta name="author" content="Lukáš Kaňka" />
<meta
name="keywords"
content="ApolloNvim, Neovim, tutoriály, návody, průvodce, Lua, pluginy, konfigurace"
/>
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://apollo-nvim.lukan.cz/tutorialy.html"
/>
<meta property="og:title" content="📚 Tutoriály | ApolloNvim" />
<meta
property="og:description"
content="Průvodci a návody pro ApolloNvim. Naučte se efektivně používat Neovim."
/>
<meta property="og:image" content="../img/apollonvim.jpg" />
<meta property="og:locale" content="cs_CZ" />
<meta property="og:site_name" content="ApolloNvim" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="📚 Tutoriály | ApolloNvim" />
<meta
name="twitter:description"
content="Průvodci a návody pro ApolloNvim. Naučte se efektivně používat Neovim."
/>
<meta name="twitter:image" content="../img/apollonvim.jpg" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<!-- Stylesheets -->
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/animations.css" />
<!-- Canonical -->
<link
rel="canonical"
href="https://apollo-nvim.lukan.cz/tutorialy.html"
/>
<style>
/* ── Tutorial grid ── */
.tutorial-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.tutorial-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
transition:
transform var(--transition),
border-color var(--transition),
box-shadow var(--transition);
overflow: hidden;
}
.tutorial-card::before {
content: "";
position: absolute;
pointer-events: none;
inset: 0;
background: linear-gradient(
135deg,
var(--purple) 0%,
transparent 60%
);
opacity: 0;
transition: opacity var(--transition);
}
.tutorial-card:hover {
transform: translateY(-4px);
border-color: var(--purple);
box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15);
}
.tutorial-card:hover::before {
opacity: 0.04;
}
.tutorial-card__number {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--purple);
font-weight: 700;
letter-spacing: 0.05em;
}
.tutorial-card__title {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.4;
margin: 0;
}
.tutorial-card__desc {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.6;
flex: 1;
margin: 0;
}
.tutorial-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
}
.tutorial-card__link {
font-size: 0.8rem;
font-weight: 600;
color: var(--purple);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition:
gap var(--transition),
color var(--transition);
}
.tutorial-card__link:hover {
gap: 0.6rem;
color: var(--text-primary);
}
.tutorial-card__link::after {
content: "→";
pointer-events: none;
}
/* ── Tips section ── */
.tips-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.25rem;
}
.tip-box {
background: var(--surface);
border: 1px solid var(--border);
border-left: 4px solid var(--cyan);
border-radius: var(--radius-lg);
padding: 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
transition:
border-color var(--transition),
box-shadow var(--transition);
}
.tip-box:hover {
border-left-color: var(--purple);
box-shadow: 0 4px 20px rgba(139, 92, 246, 0.1);
}
.tip-box__label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cyan);
}
.tip-box__title {
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.tip-box__desc {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
/* ── CTA section ── */
.cta-section {
text-align: center;
padding: 4rem 2rem;
background: linear-gradient(
135deg,
rgba(139, 92, 246, 0.08) 0%,
rgba(6, 182, 212, 0.05) 100%
);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.cta-section__title {
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.75rem;
}
.cta-section__subtitle {
font-size: 1rem;
color: var(--text-muted);
margin-bottom: 2rem;
}
/* Animate on scroll */
.animate-on-scroll {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.55s ease,
transform 0.55s ease;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 640px) {
.tutorial-grid {
grid-template-columns: 1fr;
}
.tips-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- ===================== NAVBAR ===================== -->
<header class="navbar" id="navbar">
<nav class="navbar__inner" aria-label="Hlavní navigace">
<a
href="../index.html"
class="navbar__logo"
aria-label="ApolloNvim – Domů"
>🚀 <span>ApolloNvim</span></a>
<ul class="navbar__links" id="nav-links" role="list">
<li><a href="../index.html">Domů</a></li>
<li><a href="./instalace.html">Instalace</a></li>
<li><a href="./pluginy.html">Pluginy</a></li>
<li>
<a
href="./tutorialy.html"
class="active"
aria-current="page"
>Tutoriály</a>
</li>
<li><a href="./novinky.html">Novinky</a></li>
<li><a href="./zkratky.html">Zkratky</a></li>
</ul>
<button
id="hamburger"
class="navbar__hamburger"
aria-label="Otevřít menu"
aria-expanded="false"
aria-controls="mobile-menu"
>
<span></span><span></span><span></span>
</button>
</nav>
<div class="navbar__mobile" id="mobile-menu" hidden>
<ul role="list">
<li><a href="../index.html">Domů</a></li>
<li><a href="./instalace.html">Instalace</a></li>
<li><a href="./pluginy.html">Pluginy</a></li>
<li>
<a href="./tutorialy.html" class="active">Tutoriály</a>
</li>
<li><a href="./novinky.html">Novinky</a></li>
<li><a href="./zkratky.html">Zkratky</a></li>
</ul>
</div>
</header>
<main id="main-content">
<!-- ===================== HERO ===================== -->
<section
class="hero"
aria-labelledby="hero-title"
style="min-height: 42vh"
>
<canvas id="particles-canvas" aria-hidden="true"></canvas>
<div
class="hero__content"
style="padding-top: 6rem; padding-bottom: 4rem"
>
<div class="hero__badge">
<span>📚 Průvodci & Návody</span>
</div>
<h1 id="hero-title" class="hero__title">Tutoriály</h1>
<p class="hero__subtitle">
Průvodci a návody pro ApolloNvim
</p>
</div>
</section>
<!-- ===================== TUTORIAL GRID ===================== -->
<section class="section" aria-labelledby="tutorials-title">
<div class="container">
<header class="section-title section-title--center">
<h2 id="tutorials-title">Všechny tutoriály</h2>
<p class="section__subtitle section__subtitle--center">
Krok za krokem od instalace až po pokročilé workflow
</p>
<div class="section-title__line"></div>
</header>
<div class="tutorial-grid" style="margin-top: 3rem">
<!-- 01 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-01-title"
>
<span class="tutorial-card__number">01</span>
<h3 id="tut-01-title" class="tutorial-card__title">
Jak nainstalovat vim.plug
</h3>
<p class="tutorial-card__desc">
Instalace package manageru plug.vim do Neovim –
základ pro správu všech pluginů.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--purple">Instalace</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/01.%20Jak%20nainstalovat%20vim.plug%20do%20Neovim.md"
class="tutorial-card__link"
aria-label="Číst více – Jak nainstalovat vim.plug"
target="_blank">Číst více</a>
</div>
</article>
<!-- 02 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-02-title"
>
<span class="tutorial-card__number">02</span>
<h3 id="tut-02-title" class="tutorial-card__title">
Klávesové zkratky
</h3>
<p class="tutorial-card__desc">
Přehled výchozích klávesových zkratek Neovim pro
produktivní každodenní práci.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--cyan">Základy</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/02.%20KL%C3%A1vesov%C3%A9_zkratky.md"
class="tutorial-card__link"
aria-label="Číst více – Klávesové zkratky"
target="_blank">Číst více</a>
</div>
</article>
<!-- 03 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-03-title"
>
<span class="tutorial-card__number">03</span>
<h3 id="tut-03-title" class="tutorial-card__title">
Jak nainstalovat Codeium
</h3>
<p class="tutorial-card__desc">
Instalace AI asistenta Codeium zdarma –
inteligentní doplňování kódu přímo v editoru.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--green">AI</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/03.%20Jak%20nainstalovat%20Codeium%20do%20Neovim.md"
class="tutorial-card__link"
aria-label="Číst více – Jak nainstalovat Codeium"
target="_blank">Číst více</a>
</div>
</article>
<!-- 04 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-04-title"
>
<span class="tutorial-card__number">04</span>
<h3 id="tut-04-title" class="tutorial-card__title">
Jak nainstalovat Telescope
</h3>
<p class="tutorial-card__desc">
Fuzzy finder pro Neovim – rychlé vyhledávání
souborů, symbolů a příkazů.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--purple">Pluginy</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/04.%20Jak%20nainstalovat%20Telescope%20do%20editoru%20Neovim.md"
class="tutorial-card__link"
aria-label="Číst více – Jak nainstalovat Telescope"
target="_blank">Číst více</a>
</div>
</article>
<!-- 05 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-05-title"
>
<span class="tutorial-card__number">05</span>
<h3 id="tut-05-title" class="tutorial-card__title">
Barevná schémata
</h3>
<p class="tutorial-card__desc">
Jak nastavit a přepínat barevná témata pro
pohodlnou práci ve dne i v noci.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--pink">Vzhled</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/05.%20Barevn%C3%A9%20sch%C3%A9ma.md"
class="tutorial-card__link"
aria-label="Číst více – Barevná schémata"
target="_blank">Číst více</a>
</div>
</article>
<!-- 06 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-06-title"
>
<span class="tutorial-card__number">06</span>
<h3 id="tut-06-title" class="tutorial-card__title">
Autosave konfigurace
</h3>
<p class="tutorial-card__desc">
Nastavení automatického ukládání – nikdy
nepřijdete o neuloženou práci.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--orange">Konfigurace</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/06.%20Autosave.md"
class="tutorial-card__link"
aria-label="Číst více – Autosave konfigurace"
target="_blank">Číst více</a>
</div>
</article>
<!-- 07 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-07-title"
>
<span class="tutorial-card__number">07</span>
<h3 id="tut-07-title" class="tutorial-card__title">
Kopírování a vkládání
</h3>
<p class="tutorial-card__desc">
Kopírování z externích zdrojů do Neovim –
systémová schránka bez kompromisů.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--cyan">Základy</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/07.%20Kop%C3%ADrov%C3%A1n%C3%AD%20a%20Vkl%C3%A1d%C3%A1n%C3%AD%20do%20a%20z%20%20Neovim%20z%20extern%C3%ADch%20zdroj%C5%AF.md"
class="tutorial-card__link"
aria-label="Číst více – Kopírování a vkládání"
target="_blank">Číst více</a>
</div>
</article>
<!-- 08 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-08-title"
>
<span class="tutorial-card__number">08</span>
<h3 id="tut-08-title" class="tutorial-card__title">
Markdown syntax
</h3>
<p class="tutorial-card__desc">
Práce s Markdown v Neovim – zvýraznění syntaxe,
náhled a Tree-sitter podpora.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--yellow">Markdown</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/08.%20Markdown_syntax.md"
class="tutorial-card__link"
aria-label="Číst více – Markdown syntax"
target="_blank">Číst více</a>
</div>
</article>
<!-- 09 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-09-title"
>
<span class="tutorial-card__number">09</span>
<h3 id="tut-09-title" class="tutorial-card__title">
init.vim základní nastavení
</h3>
<p class="tutorial-card__desc">
Konfigurace základního nastavení – od čísel
řádků po odsazení a kódování.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--orange">Konfigurace</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/09.%20init.vim%20z%C3%A1kladn%C3%AD%20nastaven%C3%AD.md"
class="tutorial-card__link"
aria-label="Číst více – init.vim základní nastavení"
target="_blank">Číst více</a>
</div>
</article>
<!-- 10 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-10-title"
>
<span class="tutorial-card__number">10</span>
<h3 id="tut-10-title" class="tutorial-card__title">
vim-fugitive – Git v Neovim
</h3>
<p class="tutorial-card__desc">
Správa Gitu přímo v editoru – commit, diff,
blame a více bez opuštění Neovim.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--green">Git</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/10.%20vim-fugitive%20ovl%C3%A1dni%20Git%20v%20Neovim.md"
class="tutorial-card__link"
aria-label="Číst více – vim-fugitive Git v Neovim"
target="_blank">Číst více</a>
</div>
</article>
<!-- 11 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-11-title"
>
<span class="tutorial-card__number">11</span>
<h3 id="tut-11-title" class="tutorial-card__title">
Gitsigns
</h3>
<p class="tutorial-card__desc">
Zobrazení git změn přímo v kódu – přidané,
upravené a smazané řádky v reálném čase.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--green">Git</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/11.%20Gitsigns%20drobn%C3%A9%20vylep%C5%A1en%C3%AD%20git%20v%20Neovim.md"
class="tutorial-card__link"
aria-label="Číst více – Gitsigns"
target="_blank">Číst více</a>
</div>
</article>
<!-- 12 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-12-title"
>
<span class="tutorial-card__number">12</span>
<h3 id="tut-12-title" class="tutorial-card__title">
Neovim s Zellij
</h3>
<p class="tutorial-card__desc">
Terminálový multiplexor pro lepší workflow –
panely, záložky a sdílené sezení.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--cyan">Workflow</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/12.%20Je%C5%A1t%C4%9B%20lep%C5%A1%C3%AD%20Neovim%20s%20Zellij%20termin%C3%A1lov%C3%BDm%20multiplexorem.md"
class="tutorial-card__link"
aria-label="Číst více – Neovim s Zellij"
target="_blank">Číst více</a>
</div>
</article>
<!-- 13 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-13-title"
>
<span class="tutorial-card__number">13</span>
<h3 id="tut-13-title" class="tutorial-card__title">
Relativní čísla řádků
</h3>
<p class="tutorial-card__desc">
Efektivní navigace pomocí relativních čísel –
rychlé skoky na přesné řádky.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--purple">Produktivita</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/13.%20Pou%C5%BE%C3%ADv%C3%A1n%C3%AD%20relativn%C3%ADch%20%C4%8D%C3%ADsel%20%C5%99%C3%A1dk%C5%AF.md"
class="tutorial-card__link"
aria-label="Číst více – Relativní čísla řádků"
target="_blank">Číst více</a>
</div>
</article>
<!-- 14 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-14-title"
>
<span class="tutorial-card__number">14</span>
<h3 id="tut-14-title" class="tutorial-card__title">
Inline Parameters
</h3>
<p class="tutorial-card__desc">
Alternativa pro zobrazení parametrů funkcí přímo
v kódu pro lepší přehlednost.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--purple">Pluginy</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/14.%20Inline%20Paramaters%20alernative%20%20Neovim.md"
class="tutorial-card__link"
aria-label="Číst více – Inline Parameters"
target="_blank">Číst více</a>
</div>
</article>
<!-- 15 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-15-title"
>
<span class="tutorial-card__number">15</span>
<h3 id="tut-15-title" class="tutorial-card__title">
Kopírování a vkládání (pokročilé)
</h3>
<p class="tutorial-card__desc">
Pokročilé techniky práce se schránkou –
registry, makra a cross-aplikační vkládání.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--pink">Pokročilé</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/15.%20Jak%20na%20kop%C3%ADrov%C3%A1n%C3%AD%20a%20vkl%C3%A1d%C3%A1n%C3%AD.md"
class="tutorial-card__link"
aria-label="Číst více – Kopírování a vkládání pokročilé"
target="_blank">Číst více</a>
</div>
</article>
<!-- 16 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-16-title"
>
<span class="tutorial-card__number">16</span>
<h3 id="tut-16-title" class="tutorial-card__title">
Instalace nejnovějšího Neovim
</h3>
<p class="tutorial-card__desc">
Aktualizace Neovim na Linuxu – manuální
instalace nejnovější verze z AppImage nebo
zdrojového kódu.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--purple">Instalace</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/16.%20Jak%20nainstalovat%20nejnov%C4%9Bj%C5%A1%C3%AD%20verzi%20Neovim%20do%20linuxu.md"
class="tutorial-card__link"
aria-label="Číst více – Instalace nejnovějšího Neovim"
target="_blank">Číst více</a>
</div>
</article>
<!-- 17 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-17-title"
>
<span class="tutorial-card__number">17</span>
<h3 id="tut-17-title" class="tutorial-card__title">
Jak opravit nefunkční Prettier
</h3>
<p class="tutorial-card__desc">
Řešení problémů s formátováním – diagnostika a
oprava nejčastějších chyb Prettier.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--orange">Řešení problémů</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/17.%20Jak%20opravit%20nefunk%C4%8Dn%C3%AD%20Prettier.md"
class="tutorial-card__link"
aria-label="Číst více – Jak opravit nefunkční Prettier"
target="_blank">Číst více</a>
</div>
</article>
<!-- 18 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-18-title"
>
<span class="tutorial-card__number">18</span>
<h3 id="tut-18-title" class="tutorial-card__title">
Konfigurace Lua
</h3>
<p class="tutorial-card__desc">
Základy konfigurace v jazyce Lua – moduly,
tabulky, funkce a migrace z Vimscript.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--orange">Konfigurace</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/18.%20Konfigurace%20Lua.md"
class="tutorial-card__link"
aria-label="Číst více – Konfigurace Lua"
target="_blank">Číst více</a>
</div>
</article>
<!-- 19 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-19-title"
>
<span class="tutorial-card__number">19</span>
<h3 id="tut-19-title" class="tutorial-card__title">
NERDTree konfigurace
</h3>
<p class="tutorial-card__desc">
Tipy a triky pro souborový panel NERDTree –
klávesové zkratky, skrytí souborů a integrace.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--purple">Pluginy</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/19.%20NERDTree%20konfigurace%20a%20tipy.md"
class="tutorial-card__link"
aria-label="Číst více – NERDTree konfigurace"
target="_blank">Číst více</a>
</div>
</article>
<!-- 20 -->
<article
class="tutorial-card animate-on-scroll"
aria-labelledby="tut-20-title"
>
<span class="tutorial-card__number">20</span>
<h3 id="tut-20-title" class="tutorial-card__title">
Náhled Markdown v nvim
</h3>
<p class="tutorial-card__desc">
Jak zobrazit náhled markdown souborů v
prohlížeči přímo z Neovim v reálném čase.
</p>
<div class="tutorial-card__footer">
<span class="badge badge--yellow">Markdown</span>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025/src/branch/main/tutorials/20.%20N%C3%A1hledy%20markdown%20v%20nvim.md"
class="tutorial-card__link"
aria-label="Číst více – Náhled Markdown v nvim"
target="_blank">Číst více</a>
</div>
</article>
</div>
<!-- /.tutorial-grid -->
</div>
<!-- /.container -->
</section>
<!-- ===================== TIPS SECTION ===================== -->
<section class="section section--alt" aria-labelledby="tips-title">
<div class="container">
<header class="section-title section-title--center">
<h2 id="tips-title">💡 Rychlé tipy</h2>
<p class="section__subtitle section__subtitle--center">
Kratké rady pro každodenní práci s ApolloNvim
</p>
<div class="section-title__line"></div>
</header>
<div class="tips-grid" style="margin-top: 3rem">
<!-- Tip 1 -->
<div class="tip-box animate-on-scroll">
<span class="tip-box__label">💡 Tip #1</span>
<h3 class="tip-box__title">
Oprava Markdown syntax
</h3>
<p class="tip-box__desc">
Pro správnou syntax highlighting Markdown v
Neovim je potřeba nainstalovat Tree-sitter
parser příkazem:
</p>
<div
class="terminal-block"
style="margin-top: 0.75rem"
>
<div class="terminal-block__header">
<span
class="terminal-block__dot terminal-block__dot--red"></span>
<span
class="terminal-block__dot terminal-block__dot--yellow"></span>
<span
class="terminal-block__dot terminal-block__dot--green"></span>
<span class="terminal-block__title">Neovim</span>
</div>
<div class="terminal-block__body">
<code>:TSInstall markdown</code>
</div>
</div>
</div>
<!-- Tip 2 -->
<div class="tip-box animate-on-scroll">
<span class="tip-box__label">💡 Tip #2</span>
<h3 class="tip-box__title">AutoSave nastavení</h3>
<p class="tip-box__desc">
Plugin <code>auto-save.nvim</code> umožňuje
automatické ukládání s nastavitelným zpožděním
(delay v milisekundách). Přidejte do konfigurace
pluginu <code>debounce_delay = 1000</code> pro
uložení 1 sekundu po ukončení psaní.
</p>
</div>
<!-- Tip 3 -->
<div class="tip-box animate-on-scroll">
<span class="tip-box__label">💡 Tip #3</span>
<h3 class="tip-box__title">
Colorscheme auto-start
</h3>
<p class="tip-box__desc">
Chcete-li, aby se barevné téma načítalo
automaticky při spuštění, přidejte do
<code>init.vim</code>:
</p>
<div
class="terminal-block"
style="margin-top: 0.75rem"
>
<div class="terminal-block__header">
<span
class="terminal-block__dot terminal-block__dot--red"></span>
<span
class="terminal-block__dot terminal-block__dot--yellow"></span>
<span
class="terminal-block__dot terminal-block__dot--green"></span>
<span class="terminal-block__title">init.vim</span>
</div>
<div class="terminal-block__body">
<code
>colorscheme dracula<br />autocmd
VimEnter * colorscheme dracula</code
>
</div>
</div>
</div>
<!-- Tip 4 -->
<div class="tip-box animate-on-scroll">
<span class="tip-box__label">💡 Tip #4</span>
<h3 class="tip-box__title">Kde najít init.vim</h3>
<p class="tip-box__desc">
Konfigurační soubor Neovim se nachází na různých
místech podle OS:<br />
<strong>Linux/Mac:</strong>
<code>~/.config/nvim/init.vim</code><br />
<strong>Windows:</strong>
<code>~/AppData/Local/nvim/init.vim</code><br />
Lua alternativa: <code>init.lua</code> ve
stejném adresáři.
</p>
</div>
<!-- Tip 5 -->
<div class="tip-box animate-on-scroll">
<span class="tip-box__label">💡 Tip #5</span>
<h3 class="tip-box__title">
Vkládání z externích zdrojů
</h3>
<p class="tip-box__desc">
Pro vložení textu ze systémové schránky
(zkopírovaného z prohlížeče, jiné aplikace
apod.) použijte v INSERT módu kombinaci kláves
<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd>.
Neovim tak správně vloží text bez automatické
indentace.
</p>
</div>
</div>
<!-- /.tips-grid -->
</div>
<!-- /.container -->
</section>
<!-- ===================== CTA ===================== -->
<section class="section" aria-labelledby="cta-title">
<div class="container">
<div class="cta-section animate-on-scroll">
<p
style="font-size: 2.5rem; margin-bottom: 1rem"
aria-hidden="true"
>
✈️
</p>
<h2 id="cta-title" class="cta-section__title">
Chybí vám nějaký tutoriál?
</h2>
<p class="cta-section__subtitle">
Napište nám na Telegram a my ho přidáme do seznamu!
</p>
<a
href="https://t.me/apollonvim"
class="btn-primary"
target="_blank"
rel="noopener noreferrer"
aria-label="Otevřít Telegram ApolloNvim (otevře se v novém okně)"
>
<span>✈️</span> Telegram
</a>
</div>
</div>
</section>
</main>
<!-- ===================== FOOTER ===================== -->
<footer class="footer" role="contentinfo">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<a
href="../index.html"
class="footer__logo"
aria-label="ApolloNvim – Domů"
>
🚀 ApolloNvim
</a>
<p class="footer__tagline">
Rychlý, lehký a plně konfigurovatelný Neovim pro
Front-End vývojáře.
</p>
<p
class="footer__love"
aria-label="Vytvořeno s láskou a klávesnicí"
>
Made with ❤️ and ⌨️
</p>
</div>
<nav class="footer__nav" aria-label="Patička navigace">
<h4 class="footer__nav-title">Navigace</h4>
<ul class="footer__nav-list" role="list">
<li>
<a href="../index.html" class="footer__link"
>Domů</a>
</li>
<li>
<a href="./instalace.html" class="footer__link"
>Instalace</a>
</li>
<li>
<a href="./pluginy.html" class="footer__link"
>Pluginy</a>
</li>
<li>
<a href="./tutorialy.html" class="footer__link"
>Tutoriály</a>
</li>
<li>
<a href="./novinky.html" class="footer__link"
>Novinky</a>
</li>
<li>
<a href="./zkratky.html" class="footer__link"
>Zkratky</a>
</li>
</ul>
</nav>
<div class="footer__links">
<h4 class="footer__nav-title">Externe</h4>
<ul class="footer__nav-list" role="list">
<li>
<a
href="https://t.me/apollonvim"
class="footer__link"
target="_blank"
rel="noopener noreferrer"
aria-label="Telegram (otevře se v novém okně)"
>
✈️ Telegram
</a>
</li>
<li>
<a
href="https://codeberg.org/Kankys/ApolloNvim2025"
class="footer__link"
target="_blank"
rel="noopener noreferrer"
aria-label="Codeberg repozitář (otevře se v novém okně)"
>
🏔️ Codeberg
</a>
</li>
<li>
<a
href="https://lukaskanka.cz/"
class="footer__link"
target="_blank"
rel="noopener noreferrer"
aria-label="Web autora (otevře se v novém okně)"
>
🧑‍💻 Web autora
</a>
</li>
</ul>
</div>
</div>
<div class="footer__bottom">
<p class="footer__copy">
Copyright &copy; 2024 &ndash; 2026 🚀 ApolloNvim / Lukáš
Kaňka
</p>
<p class="footer__version">
<span class="badge badge--version">v26.09</span>
</p>
</div>
</div>
</footer>
<!-- ===================== SCRIPTS ===================== -->
<script src="../js/particles.js"></script>
<script src="../js/main.js"></script>
<script>
// Animate on scroll observer
(function () {
const elements =
document.querySelectorAll(".animate-on-scroll");
if (!elements.length) return;
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.1, rootMargin: "0px 0px -40px 0px" },
);
elements.forEach((el, i) => {
el.style.transitionDelay = (i % 4) * 80 + "ms";
observer.observe(el);
});
})();
</script>
</body>
</html>