[{"data":1,"prerenderedAt":395},["ShallowReactive",2],{"sidebar-posts":3,"post-count":78,"post-\u002Fprismjs-nuxtjs-static-pages":79,"page-\u002Fprismjs-nuxtjs-static-pages":385,"neighbours-\u002Fprismjs-nuxtjs-static-pages":387,"post-projects-\u002Fprismjs-nuxtjs-static-pages":392},[4,8,12,16,19,23,27,31,35,39,43,47,50,54,58,62,66,70,74],{"path":5,"title":6,"date":7},"\u002Fbuilding-take-contentin-mobile-app","I built a ContentIn mobile app in one night and tested it from the sauna","2026-10-29",{"path":9,"title":10,"date":11},"\u002Fmac-mini-claude-code-dev-server","My Mac Mini is my dev server, and one Claude Code session runs each project","2026-10-27",{"path":13,"title":14,"date":15},"\u002Fmax-out-claude-code-every-week","Max out Claude Code every week until I make 10K a month","2026-10-26",{"path":17,"title":18,"date":15},"\u002Fmaxing-out-claude-code-week-1","Maxing out Claude Code, week 1: a new blog, an app stuck in review and a full Mac Mini",{"path":20,"title":21,"date":22},"\u002Ffully-ai-coded-blog-claude-code","This blog is now fully AI coded and run by an agent I just talk to","2026-10-24",{"path":24,"title":25,"date":26},"\u002Fwhy-i-built-pepelly","Why I built Pepelly, a YouTube app for my daughter without the brain rot","2026-10-22",{"path":28,"title":29,"date":30},"\u002Fhow-i-built-an-equity-tracking-app-for-bootstrap-founders-in-a-weekend","How I Built an Equity Tracking App for Bootstrap Founders in a Weekend","2024-11-25",{"path":32,"title":33,"date":34},"\u002Fbuilding-directory-website-with-ai-in-a-day","How I Built a Directory Website in a Day with AI—and Why It's a Game-Changer for SaaS Traffic","2024-11-10",{"path":36,"title":37,"date":38},"\u002Fnetlify-build-plugin-for-nuxt-dynamic-routes","Use a netlify build plugin to generate your nuxt routes","2020-08-08",{"path":40,"title":41,"date":42},"\u002Foptimized-responsive-lazyloading-images-with-nuxt","How to use optimized, responsive and lazyloading images in a nuxt project","2019-11-16",{"path":44,"title":45,"date":46},"\u002Fnuxt-jam-stack","Building a SEO optimized blog with a Nuxt JAM stack and Markdown files","2019-11-07",{"path":48,"title":49,"date":46},"\u002Fprismjs-nuxtjs-static-pages","Getting Prismjs working with Nuxt",{"path":51,"title":52,"date":53},"\u002Fkeylogs-live-on-producthunt","My second launch this year: Keylogs is LIVE on Product Hunt today!","2018-02-12",{"path":55,"title":56,"date":57},"\u002Fa-new-year-and-a-new-startup","A new year and a new startup","2018-01-19",{"path":59,"title":60,"date":61},"\u002Fabout-mydash-whats-the-stack-and-why-did-i-choose-it","About myDash - What’s the stack and why did I choose it?","2017-10-16",{"path":63,"title":64,"date":65},"\u002Fsuper-fast-wordpress-hosting-germany","WordPress hosting test: super fast on raidboxes.eu","2016-12-09",{"path":67,"title":68,"date":69},"\u002Fbest-resources-for-stock-images","Best resources for stock images","2016-12-05",{"path":71,"title":72,"date":73},"\u002Fset-up-automatic-backups-for-parse-server-on-digital-ocean","Set up automatic backups for parse-server on digital ocean","2016-05-25",{"path":75,"title":76,"date":77},"\u002Fhow-to-run-parse-dashboard-alongside-parse-server-on-digital-ocean","How to setup parse-dashboard alongside parse-server on Digital Ocean","2016-05-18",19,{"id":80,"title":49,"body":81,"date":46,"description":373,"draft":374,"extension":375,"image":376,"meta":377,"navigation":172,"path":48,"projects":378,"readingTime":110,"seo":380,"stem":381,"tags":382,"updated":385,"__hash__":386},"posts\u002Fprismjs-nuxtjs-static-pages.md",{"type":82,"value":83,"toc":371},"minimark",[84,97,316,319,367],[85,86,87,88,92,93,96],"p",{},"It took me some time to figure it out but it's actually fairly straight forward. Just make sure you call ",[89,90,91],"code",{},"Prism.highlightAll()"," in your page's mounted function. If you are using purgeCSS make sure to whitelist the ",[89,94,95],{},".token"," children in your config:",[98,99,104],"pre",{"className":100,"code":101,"language":102,"meta":103,"style":103},"language-javascript shiki shiki-themes derkinzi-tomorrow-night","\u002F\u002F app\u002Fplugins\u002Fprism.js\nimport Prism from 'prismjs'\nimport 'prismjs\u002Fthemes\u002Fprism-tomorrow.css' \u002F\u002F or whatever theme you like\nexport default Prism\n\n\u002F\u002F nuxt.config.js\n\u002F\u002F if you use prugeCSS include prism classes:\npurgeCSS: {\n    whitelistPatternsChildren: [\u002Ftoken$\u002F]\n},\nplugins: [\n  '~\u002Fplugins\u002Fprism'\n],\n\n\u002F\u002F app\u002Fpages\u002F_slug.vue\nimport Prism from '~\u002Fplugins\u002Fprism'\nexport default {\n  ...\n  mounted() {\n    Prism.highlightAll()\n  },\n  ...\n}\n","javascript","",[89,105,106,115,139,155,167,174,180,186,192,212,218,224,235,241,246,252,267,277,284,293,299,305,310],{"__ignoreMap":103},[107,108,111],"span",{"class":109,"line":110},"line",1,[107,112,114],{"class":113},"sUXBo","\u002F\u002F app\u002Fplugins\u002Fprism.js\n",[107,116,118,122,126,129,133,136],{"class":109,"line":117},2,[107,119,121],{"class":120},"sm2d5","import",[107,123,125],{"class":124},"sRYIx"," Prism",[107,127,128],{"class":120}," from",[107,130,132],{"class":131},"s2jRq"," '",[107,134,135],{"class":124},"prismjs",[107,137,138],{"class":131},"'\n",[107,140,142,144,146,149,152],{"class":109,"line":141},3,[107,143,121],{"class":120},[107,145,132],{"class":131},[107,147,148],{"class":124},"prismjs\u002Fthemes\u002Fprism-tomorrow.css",[107,150,151],{"class":131},"'",[107,153,154],{"class":113}," \u002F\u002F or whatever theme you like\n",[107,156,158,161,164],{"class":109,"line":157},4,[107,159,160],{"class":120},"export",[107,162,163],{"class":120}," default",[107,165,166],{"class":124}," Prism\n",[107,168,170],{"class":109,"line":169},5,[107,171,173],{"emptyLinePlaceholder":172},true,"\n",[107,175,177],{"class":109,"line":176},6,[107,178,179],{"class":113},"\u002F\u002F nuxt.config.js\n",[107,181,183],{"class":109,"line":182},7,[107,184,185],{"class":113},"\u002F\u002F if you use prugeCSS include prism classes:\n",[107,187,189],{"class":109,"line":188},8,[107,190,191],{"class":131},"purgeCSS: {\n",[107,193,195,198,201,204,207,209],{"class":109,"line":194},9,[107,196,197],{"class":131},"    whitelistPatternsChildren: [",[107,199,200],{"class":131},"\u002F",[107,202,203],{"class":124},"token",[107,205,206],{"class":120},"$",[107,208,200],{"class":131},[107,210,211],{"class":131},"]\n",[107,213,215],{"class":109,"line":214},10,[107,216,217],{"class":131},"},\n",[107,219,221],{"class":109,"line":220},11,[107,222,223],{"class":131},"plugins: [\n",[107,225,227,230,233],{"class":109,"line":226},12,[107,228,229],{"class":131},"  '",[107,231,232],{"class":124},"~\u002Fplugins\u002Fprism",[107,234,138],{"class":131},[107,236,238],{"class":109,"line":237},13,[107,239,240],{"class":131},"],\n",[107,242,244],{"class":109,"line":243},14,[107,245,173],{"emptyLinePlaceholder":172},[107,247,249],{"class":109,"line":248},15,[107,250,251],{"class":113},"\u002F\u002F app\u002Fpages\u002F_slug.vue\n",[107,253,255,257,259,261,263,265],{"class":109,"line":254},16,[107,256,121],{"class":120},[107,258,125],{"class":124},[107,260,128],{"class":120},[107,262,132],{"class":131},[107,264,232],{"class":124},[107,266,138],{"class":131},[107,268,270,272,274],{"class":109,"line":269},17,[107,271,160],{"class":120},[107,273,163],{"class":120},[107,275,276],{"class":131}," {\n",[107,278,280],{"class":109,"line":279},18,[107,281,283],{"class":282},"sJYcM","  ...\n",[107,285,286,290],{"class":109,"line":78},[107,287,289],{"class":288},"s8nuv","  mounted",[107,291,292],{"class":131},"() {\n",[107,294,296],{"class":109,"line":295},20,[107,297,298],{"class":131},"    Prism.highlightAll()\n",[107,300,302],{"class":109,"line":301},21,[107,303,304],{"class":131},"  },\n",[107,306,308],{"class":109,"line":307},22,[107,309,283],{"class":282},[107,311,313],{"class":109,"line":312},23,[107,314,315],{"class":131},"}\n",[85,317,318],{},"If you want to use more than just the standard languages for the code highlighting simply import the respective library in the plugin file like so:",[98,320,322],{"className":100,"code":321,"language":102,"meta":103,"style":103},"import Prism from 'prismjs'\nimport 'prismjs\u002Fthemes\u002Fprism-tomorrow.css'\nimport 'prismjs\u002Fcomponents\u002Fprism-json'\nexport default Prism\n",[89,323,324,338,348,359],{"__ignoreMap":103},[107,325,326,328,330,332,334,336],{"class":109,"line":110},[107,327,121],{"class":120},[107,329,125],{"class":124},[107,331,128],{"class":120},[107,333,132],{"class":131},[107,335,135],{"class":124},[107,337,138],{"class":131},[107,339,340,342,344,346],{"class":109,"line":117},[107,341,121],{"class":120},[107,343,132],{"class":131},[107,345,148],{"class":124},[107,347,138],{"class":131},[107,349,350,352,354,357],{"class":109,"line":141},[107,351,121],{"class":120},[107,353,132],{"class":131},[107,355,356],{"class":124},"prismjs\u002Fcomponents\u002Fprism-json",[107,358,138],{"class":131},[107,360,361,363,365],{"class":109,"line":157},[107,362,160],{"class":120},[107,364,163],{"class":120},[107,366,166],{"class":124},[368,369,370],"style",{},"html pre.shiki code .sUXBo, html code.shiki .sUXBo{--shiki-default:#999999;--shiki-default-font-style:italic}html pre.shiki code .sm2d5, html code.shiki .sm2d5{--shiki-default:#CC99CD}html pre.shiki code .sRYIx, html code.shiki .sRYIx{--shiki-default:#7EC699}html pre.shiki code .s2jRq, html code.shiki .s2jRq{--shiki-default:#CCCCCC}html pre.shiki code .sJYcM, html code.shiki .sJYcM{--shiki-default:#67CDCC}html pre.shiki code .s8nuv, html code.shiki .s8nuv{--shiki-default:#F08D49}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);}",{"title":103,"searchDepth":117,"depth":141,"links":372},[],"How to get prismjs to play nicely on a static website rendered with nuxt.",false,"md","\u002Fimg\u002Fprismjs-nuxt.jpg",{},[379],"derkinzi",{"title":49,"description":373},"prismjs-nuxtjs-static-pages",[383,384],"nuxt","prism",null,"OD0PXeSBEcMzz40yMnToWMrscqwP8P1ACYvhKl6Xshw",[388,390],{"title":45,"path":44,"stem":389,"children":-1},"nuxt-jam-stack",{"title":52,"path":51,"stem":391,"children":-1},"keylogs-live-on-producthunt",[393],{"id":379,"title":394},"derkinzi.de",1793264868571]