[{"data":1,"prerenderedAt":266},["ShallowReactive",2],{"navigation":3,"\u002F2026-03-tuto-shiki":84,"\u002F2026-03-tuto-shiki-surround":260},[4,8,12,16,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80],{"title":5,"path":6,"stem":7},"Découvrir le Markdown — la syntaxe qui vous suivra partout","\u002F2025-09-decouvrir-markdown","2025-09-decouvrir-markdown",{"title":9,"path":10,"stem":11},"Le logiciel libre, en quelques idées simples","\u002F2025-09-logiciel-libre-open-source","2025-09-logiciel-libre-open-source",{"title":13,"path":14,"stem":15},"Utiliser l'ENT et Capytale au quotidien","\u002F2025-09-utiliser-ent-capytale","2025-09-utiliser-ent-capytale",{"title":17,"path":18,"stem":19},"Excalidraw — dessiner des schémas qu'on ose montrer","\u002F2025-10-excalidraw-schemas","2025-10-excalidraw-schemas",{"title":21,"path":22,"stem":23},"Concours Castor — l'informatique en 45 minutes","\u002F2025-11-concours-castor","2025-11-concours-castor",{"title":25,"path":26,"stem":27},"Godot, un moteur de jeu libre pour démarrer sérieusement","\u002F2026-01-godot-moteur-jeu","2026-01-godot-moteur-jeu",{"title":29,"path":30,"stem":31},"Prologin — s'entraîner toute l'année à l'algorithmique","\u002F2026-01-prologin-entrainement","2026-01-prologin-entrainement",{"title":33,"path":34,"stem":35},"Le voyage d'un programme à travers le CPU","\u002F2026-02-voyage-programme-cpu","2026-02-voyage-programme-cpu",{"title":37,"path":38,"stem":39},"Coloration syntaxique côté serveur avec Shiki","\u002F2026-03-tuto-shiki","2026-03-tuto-shiki",{"title":41,"path":42,"stem":43},"Bun 1.2 — où en est-on ?","\u002F2026-03-veille-bun","2026-03-veille-bun",{"title":45,"path":46,"stem":47},"Club prologin — bilan de la session","\u002F2026-04-club-prologin","2026-04-club-prologin",{"title":49,"path":50,"stem":51},"L'IA dans nos cours, sans s'y noyer","\u002F2026-04-edito-ia-cours","2026-04-edito-ia-cours",{"title":53,"path":54,"stem":55},"Semaine des langues — quand Python lit nos textes","\u002F2026-04-semaine-langues-nlp","2026-04-semaine-langues-nlp",{"title":57,"path":58,"stem":59},"Sous le capot de nsi.rocks","\u002F2026-05-coulisses-nsi-rocks","2026-05-coulisses-nsi-rocks",{"title":61,"path":62,"stem":63},"Créer votre premier jeu vidéo — le guide pragmatique","\u002F2026-05-creer-jeu-video-debutant","2026-05-creer-jeu-video-debutant",{"title":65,"path":66,"stem":67},"Le tableau de bord élève — mode d'emploi","\u002F2026-05-dashboard-eleve-mode-emploi","2026-05-dashboard-eleve-mode-emploi",{"title":69,"path":70,"stem":71},"Évaluations notées, auto-évaluations — qui sert à quoi","\u002F2026-05-evaluations-et-auto-eval","2026-05-evaluations-et-auto-eval",{"title":73,"path":74,"stem":75},"La Nuit du Code 2026 — coder en équipe, manette en main","\u002F2026-05-nuit-du-code-2026","2026-05-nuit-du-code-2026",{"title":77,"path":78,"stem":79},"Pourquoi LLVM ?","\u002F2026-05-pourquoi-llvm","2026-05-pourquoi-llvm",{"title":81,"path":82,"stem":83},"git bisect : trouver un bug en log(n) étapes","\u002F2026-05-tuto-git-bisect","2026-05-tuto-git-bisect",{"id":85,"title":37,"authors":86,"body":89,"category":251,"date":252,"description":253,"extension":254,"featured":255,"image":256,"meta":257,"navigation":136,"path":38,"readingTime":115,"seo":258,"stem":39,"__hash__":259},"posts\u002F2026-03-tuto-shiki.md",[87],{"name":88},"Mathieu N.",{"type":90,"value":91,"toc":248},"minimark",[92,96,101,241,244],[93,94,95],"p",{},"Shiki utilise les mêmes grammaires TextMate que VS Code. La sortie est du HTML\npur, sans dépendance runtime.",[97,98,100],"h2",{"id":99},"setup-minimal","Setup minimal",[102,103,108],"pre",{"className":104,"code":105,"language":106,"meta":107,"style":107},"language-ts shiki shiki-themes github-light github-light github-dark","import { createHighlighter } from 'shiki'\n\nconst h = await createHighlighter({\n  themes: ['github-light', 'github-dark'],\n  langs: ['ts', 'vue', 'bash']\n})\n\nconst html = h.codeToHtml(source, { lang: 'ts', theme: 'github-light' })\n","ts","",[109,110,111,131,138,161,179,201,207,212],"code",{"__ignoreMap":107},[112,113,116,120,124,127],"span",{"class":114,"line":115},"line",1,[112,117,119],{"class":118},"s8jYJ","import",[112,121,123],{"class":122},"sxrX7"," { createHighlighter } ",[112,125,126],{"class":118},"from",[112,128,130],{"class":129},"sIIMD"," 'shiki'\n",[112,132,134],{"class":114,"line":133},2,[112,135,137],{"emptyLinePlaceholder":136},true,"\n",[112,139,141,144,148,151,154,158],{"class":114,"line":140},3,[112,142,143],{"class":118},"const",[112,145,147],{"class":146},"sBjJW"," h",[112,149,150],{"class":118}," =",[112,152,153],{"class":118}," await",[112,155,157],{"class":156},"snPdu"," createHighlighter",[112,159,160],{"class":122},"({\n",[112,162,164,167,170,173,176],{"class":114,"line":163},4,[112,165,166],{"class":122},"  themes: [",[112,168,169],{"class":129},"'github-light'",[112,171,172],{"class":122},", ",[112,174,175],{"class":129},"'github-dark'",[112,177,178],{"class":122},"],\n",[112,180,182,185,188,190,193,195,198],{"class":114,"line":181},5,[112,183,184],{"class":122},"  langs: [",[112,186,187],{"class":129},"'ts'",[112,189,172],{"class":122},[112,191,192],{"class":129},"'vue'",[112,194,172],{"class":122},[112,196,197],{"class":129},"'bash'",[112,199,200],{"class":122},"]\n",[112,202,204],{"class":114,"line":203},6,[112,205,206],{"class":122},"})\n",[112,208,210],{"class":114,"line":209},7,[112,211,137],{"emptyLinePlaceholder":136},[112,213,215,217,220,222,225,228,231,233,236,238],{"class":114,"line":214},8,[112,216,143],{"class":118},[112,218,219],{"class":146}," html",[112,221,150],{"class":118},[112,223,224],{"class":122}," h.",[112,226,227],{"class":156},"codeToHtml",[112,229,230],{"class":122},"(source, { lang: ",[112,232,187],{"class":129},[112,234,235],{"class":122},", theme: ",[112,237,169],{"class":129},[112,239,240],{"class":122}," })\n",[93,242,243],{},"C'est tout. À intégrer dans un endpoint Nitro ou un build step.",[245,246,247],"style",{},"html pre.shiki code .s8jYJ, html code.shiki .s8jYJ{--shiki-light:#D73A49;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sxrX7, html code.shiki .sxrX7{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sIIMD, html code.shiki .sIIMD{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sBjJW, html code.shiki .sBjJW{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .snPdu, html code.shiki .snPdu{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":107,"searchDepth":133,"depth":133,"links":249},[250],{"id":99,"depth":133,"text":100},"tuto","2026-03-28","Comment je rends des blocs de code en SSR sans charger un seul ko de JS supplémentaire côté client.","md",false,null,{},{"title":37,"description":253},"IgB6R1swnhMIUOZG614ng006Oy2H92ab3BYdexdcHzA",[261,264],{"title":33,"path":34,"stem":35,"description":262,"category":263,"readingTime":115,"children":-1},"Du fichier source au \"Hello, World!\" qui s'affiche — comprendre les étapes que franchit un programme avant son exécution.","veille",{"title":41,"path":42,"stem":43,"description":265,"category":263,"readingTime":115,"children":-1},"Le runtime ambitieux a-t-il tenu ses promesses face à Node 22 LTS ?",1788015772045]