3:I[9275,[],""] 5:I[1343,[],""] 6:I[8700,["231","static/chunks/231-ef201d9091b1ab11.js","473","static/chunks/473-028acc0f4f91144a.js","185","static/chunks/app/layout-17cde397e4c9c21a.js"],"ThemeProviders"] 7:I[9032,["231","static/chunks/231-ef201d9091b1ab11.js","473","static/chunks/473-028acc0f4f91144a.js","185","static/chunks/app/layout-17cde397e4c9c21a.js"],"KBarSearchProvider"] 8:I[231,["231","static/chunks/231-ef201d9091b1ab11.js","173","static/chunks/173-79f10aa0f54a3733.js","696","static/chunks/696-76474eb52ea95942.js","797","static/chunks/app/blog/%5B...slug%5D/page-a95932d50e4d3339.js"],""] a:I[509,["231","static/chunks/231-ef201d9091b1ab11.js","473","static/chunks/473-028acc0f4f91144a.js","185","static/chunks/app/layout-17cde397e4c9c21a.js"],"KBarButton"] b:I[1398,["231","static/chunks/231-ef201d9091b1ab11.js","473","static/chunks/473-028acc0f4f91144a.js","185","static/chunks/app/layout-17cde397e4c9c21a.js"],"default"] c:I[8976,["231","static/chunks/231-ef201d9091b1ab11.js","473","static/chunks/473-028acc0f4f91144a.js","185","static/chunks/app/layout-17cde397e4c9c21a.js"],"default"] 4:["slug","introducing/github-gist-html-renderer","c"] 9:T1515,M2.148 18.945v-1.074q-.097-.781-.341-1.416l-.257-.671-.28-.745a22 22 0 0 1-.626-1.704 26 26 0 0 1-.253-.835 9.5 9.5 0 0 1-.279-1.377Q0 10.27 0 9.277q.165-.825.4-1.267a2 2 0 0 1 .088-.149q.268-.4.535-.679l.051-.053.391-1.758H2.93a13 13 0 0 0 1.611.098h1.611q3.711 0 7.618-.293 3.906-.293 8.007-.684a123 123 0 0 1 5.883-.618 151 151 0 0 1 3.785-.261q.474-1.041.626-1.348l.009-.019.342-.683 1.074-.586q2.246-.098 3.125.537a10 10 0 0 1 .604.469q.286.241.513.474a5 5 0 0 1 .25.277q2.539-.195 5.176-.537t5.469-.732a2654 2654 0 0 1 7.91-.977 65 65 0 0 1 7.336-.486L64.355 0q1.661 0 3.125.098a38 38 0 0 1 2.489.245l.344.048 1.171.879a6 6 0 0 0 .977 1.269 11 11 0 0 0 .721.659 15 15 0 0 0 .646.513q1.465 1.172 2.881 2.93 1.416 1.757 1.025 5.175l-.488.977a5 5 0 0 1-.409.366q-.222.18-.486.36l-.081.055-.977 1.27h-1.074a11 11 0 0 0-.511.011q-.462.023-.776.09a2 2 0 0 0-.178.045q-.336.101-.764.271a16 16 0 0 0-.408.169 5 5 0 0 1-.498.214 6 6 0 0 1-.381.127 32 32 0 0 0-.513.159 43 43 0 0 0-.561.183q-.885-.08-1.439-.094l-.221-.003h-1.367a51 51 0 0 0-3.451.123 64 64 0 0 0-2.897.267 183 183 0 0 0-6.59.872l-.051.007a418 418 0 0 1-3.405.412l-1.087.125-2.051.232-1.855.208a453 453 0 0 1-.817 2.109q-.376.963-.717 1.822l-.224.561q-.781 1.953-1.66 3.906t-1.66 3.955a43 43 0 0 0-.848 2.391 55 55 0 0 0-.617 2.053 32 32 0 0 0-1.074 1.721 25 25 0 0 0-.879 1.648 16 16 0 0 0-.786 1.952 21 21 0 0 0-.484 1.71 10.5 10.5 0 0 0-1.677 2.538 10 10 0 0 0-.422 1.075 170 170 0 0 1-.456 1.383q-.181.541-.348 1.026a86 86 0 0 1-.319.911l-.391 1.465q-.507.507-.719.853a1.3 1.3 0 0 0-.111.222q-.107.283-.342.619a5 5 0 0 1-.195.259q-.293 1.27-.781 2.442a34 34 0 0 0-.293.76l-.098.265a3 3 0 0 0-.069.213q-.086.313-.051.525a1 1 0 0 0 .022.092 7 7 0 0 1-.149.653q-.087.307-.196.559a3 3 0 0 1-.241.448 7 7 0 0 1-.097 1.172l-.196 1.172a16 16 0 0 0-.152.57q-.064.262-.111.497l-.03.154a2 2 0 0 0-.032.353 1.8 1.8 0 0 0 .13.672l.586.782a3 3 0 0 1 .268.439q.107.214.195.465l.025.072a1.2 1.2 0 0 0 .357.242 1 1 0 0 0 .132.051 1.3 1.3 0 0 1 .298.141 1 1 0 0 1 .19.152 5 5 0 0 0 .479.37q.258.172.504.275a2 2 0 0 0 .482.136l.976 1.172q.326 1.953-.042 3.423a5 5 0 0 1-1.032 2.046q-1.439 1.838-4.447 2.172a13 13 0 0 1-1.412.074l-1.368-.098-.235-.239q-.466-.481-.546-.64l-.421-.186q-.564-.248-.985-.424l-.059-.024a2.1 2.1 0 0 1-.561-.354q-.269-.232-.513-.574a.86.86 0 0 0-.443-.236l-.045-.008a.9.9 0 0 1-.304-.105.8.8 0 0 1-.184-.139q-.726-.218-1.236-.49a4 4 0 0 1-.327-.194l-1.074-.586.042-.448q.055-.625.055-.919a9 9 0 0 1-1.22-2.344 22 22 0 0 1-.733-2.637l-.28-1.025-.257-.928a5 5 0 0 0-.477-1.162 5 5 0 0 0-.255-.4 55 55 0 0 1-.023-1.578q0-5.804 1.292-9.897a129 129 0 0 1 3.223-9.033 104 104 0 0 0 1.855-4.785 63 63 0 0 0 1.563-4.981l1.074-1.074.239-.202q.357-.298.536-.419a1 1 0 0 1 .104-.062 6.7 6.7 0 0 1 .488-2.491 52 52 0 0 1 .93-2.173l.145-.317a34 34 0 0 0 .732-1.562 8 8 0 0 0 .222-.559q.097-.273.157-.517a4 4 0 0 0 .06-.292q-.638 0-1.148.043l-.072.006a15 15 0 0 0-.824.1l-.299.047a11.4 11.4 0 0 1-1.681.263 10 10 0 0 1-.761.03 13 13 0 0 1-.409-.006q-.567-.019-.86-.092a5 5 0 0 1-.654.273q-.362.119-.701.156l-.11.011a19 19 0 0 1-1.367.048h-2.344q-.763 0-1.319.124a3 3 0 0 0-.536.169H8.789a10 10 0 0 1-.775-.032q-.464-.036-.983-.114-.969-.146-2.035-.724l-.016-.009-.683-.781q-.559-1.025-1.03-1.161l-.044-.011zm63.038 40.137a17.2 17.2 0 0 0 4.638 5.371l.053.014q1.916.49 3.072 1.597 1.172 1.124 2.246 2.393a87 87 0 0 0 4.239 1.316 106 106 0 0 0 7.675 1.858q6.446 1.318 12.598 1.514a9 9 0 0 1 2.49-.635 24 24 0 0 1 2.637-.147l.41.003a31 31 0 0 1 2.129.095q.877.07 1.578.039a8 8 0 0 0 .522-.039 311 311 0 0 0 3.906-2.979 38 38 0 0 0 3.613-3.173q.293-1.954-.244-3.37l-.086-.219a8.2 8.2 0 0 0-1.379-2.271l-.242-.276a25 25 0 0 0-1.809-1.823 16 16 0 0 1-2.002-2.198q-8.593-.097-17.334-.634a81 81 0 0 1-2.17-.163 72 72 0 0 1-14.382-2.718 201 201 0 0 1-1.319-2.686l-.097-.212q-.29-.658-.478-1.441a12 12 0 0 1-.255-1.521q.684-.879 1.27-1.757a3 3 0 0 0 .353-.756q.233-.737.233-1.784a366 366 0 0 0 3.515-3.564q1.758-1.807 3.663-3.467a32 32 0 0 1 4.101-3.027 18 18 0 0 1 1.352-.76 20 20 0 0 1 3.58-1.389l.024-.027a16.9 16.9 0 0 1 3.638-3.049q2.099-1.318 4.492-2.295a56 56 0 0 1 4.98-1.757q2.588-.782 5.616-1.563a9.5 9.5 0 0 0 2.302-.963 11.4 11.4 0 0 0 2.336-1.82 13 13 0 0 0 1.077-1.212 10.6 10.6 0 0 0 1.804-3.378 8 8 0 0 0 .109-.379q.238-.911.238-1.796a6.6 6.6 0 0 0-.542-2.61q-.702-1.65-2.716-2.668a11 11 0 0 0-1.776-.701q.097-.684.293-.977a.32.32 0 0 0 .056-.183q0-.191-.205-.44a2 2 0 0 0-.144-.158q-.876-.125-1.451-.391a2.4 2.4 0 0 1-.551-.342 1.6 1.6 0 0 0-.46-.276q-.499-.196-1.152-.065l.044-.085q.117-.218.396-.697a1 1 0 0 0 .052-.1q.187-.419-.297-.547a2 2 0 0 0-.195-.036l-.065.144q-.255.528-.472.442l-.066-.031q-.223-.112-.52-.409-.341-.341-.732-.634a1 1 0 0 0-.31-.162q-.216-.071-.475-.056a2 2 0 0 0-.192.022 18 18 0 0 1-.927.281 24 24 0 0 1-1.026.256q-1.074.244-1.66-.537-.781 1.172-2.002 1.856a31 31 0 0 1-2.539 1.269 49 49 0 0 0-2.637 1.27 9 9 0 0 0-.744.431 7.3 7.3 0 0 0-1.453 1.229 19 19 0 0 0-1.818.532 14.6 14.6 0 0 0-2.479 1.128 43 43 0 0 0-3.613 2.344q-1.758 1.269-3.662 2.344a15 15 0 0 1-1.702.819 18.3 18.3 0 0 1-2.644.841 5.9 5.9 0 0 1-1.465 1.513l-1.757 1.27a13.6 13.6 0 0 0-1.661 1.416 5 5 0 0 0-1.171 1.855q-.489-.293-1.075-.293a180 180 0 0 1-3.369 3.663 53 53 0 0 0-3.271 3.808q-1.563 2.002-2.832 4.199a24 24 0 0 0-.647 1.199 27 27 0 0 0-1.502 3.635q-.097 3.516.244 7.373.342 3.858 1.368 7.471a31.5 31.5 0 0 0 2.832 6.836Z0:["yxvcy2smkTACFqS_PqEPH",[[["",{"children":["blog",{"children":[["slug","introducing/github-gist-html-renderer","c"],{"children":["__PAGE__?{\"slug\":[\"introducing\",\"github-gist-html-renderer\"]}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["blog",{"children":[["slug","introducing/github-gist-html-renderer","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/c3eb656b86d8918c.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]},[["$","html",null,{"lang":"en-us","className":"__variable_36bd41 scroll-smooth","suppressHydrationWarning":true,"children":[["$","link",null,{"rel":"apple-touch-icon","sizes":"76x76","href":"/static/favicons/apple-touch-icon.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"32x32","href":"/static/favicons/favicon-32x32.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"16x16","href":"/static/favicons/favicon-16x16.png"}],["$","link",null,{"rel":"manifest","href":"/static/favicons/site.webmanifest"}],["$","link",null,{"rel":"mask-icon","href":"/static/favicons/safari-pinned-tab.svg","color":"#5bbad5"}],["$","meta",null,{"name":"msapplication-TileColor","content":"#000000"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: light)","content":"#fff"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: dark)","content":"#000"}],["$","link",null,{"rel":"alternate","type":"application/rss+xml","href":"/feed.xml"}],["$","body",null,{"className":"bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white","children":["$","$L6",null,{"children":[["$undefined","$undefined","$undefined","$undefined","$undefined","$undefined"],["$","section",null,{"className":"mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0","children":["$","div",null,{"className":"flex h-screen flex-col justify-between font-sans","children":[["$","$L7",null,{"kbarConfig":{"searchDocumentsPath":"search.json"},"children":[["$","header",null,{"className":"flex items-center justify-between py-10","children":[["$","div",null,{"children":["$","$L8",null,{"href":"/","aria-label":"Teddy's Site","children":["$","div",null,{"className":"flex items-center justify-between","children":[["$","div",null,{"className":"mr-3","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":50,"height":50,"fill":"currentColor","viewBox":"0 0 119.878 75","children":["$","path",null,{"fillRule":"evenodd","stroke":"currentColor","strokeLinecap":"round","strokeWidth":"1mm","d":"$9","fontSize":12,"style":{"strokeWidth":".1mm"},"vectorEffect":"non-scaling-stroke"}]}]}],["$","div",null,{"className":"hidden h-6 text-2xl font-semibold sm:block","children":"Teddy's Site"}]]}]}]}],["$","div",null,{"className":"flex items-center space-x-4 leading-5 sm:space-x-6","children":[[["$","$L8",null,{"href":"/blog","className":"hidden font-medium text-gray-900 sm:block dark:text-gray-100","children":"Blog"}],["$","$L8",null,{"href":"/tags","className":"hidden font-medium text-gray-900 sm:block dark:text-gray-100","children":"Tags"}],["$","$L8",null,{"href":"/projects","className":"hidden font-medium text-gray-900 sm:block dark:text-gray-100","children":"Projects"}],["$","$L8",null,{"href":"/apps","className":"hidden font-medium text-gray-900 sm:block dark:text-gray-100","children":"Apps"}],["$","$L8",null,{"href":"/random","className":"hidden font-medium text-gray-900 sm:block dark:text-gray-100","children":"Random"}],["$","$L8",null,{"href":"/about","className":"hidden font-medium text-gray-900 sm:block dark:text-gray-100","children":"About"}]],["$","$La",null,{"aria-label":"Search","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24","strokeWidth":1.5,"stroke":"currentColor","className":"h-6 w-6 text-gray-900 dark:text-gray-100","children":["$","path",null,{"strokeLinecap":"round","strokeLinejoin":"round","d":"M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"}]}]}],["$","$Lb",null,{}],["$","$Lc",null,{}]]}]]}],["$","main",null,{"className":"mb-auto","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6","children":[["$","div",null,{"className":"space-x-2 pb-8 pt-6 md:space-y-5","children":["$","h1",null,{"className":"text-6xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:border-r-2 md:px-6 md:text-8xl md:leading-14","children":"404"}]}],["$","div",null,{"className":"max-w-md","children":[["$","p",null,{"className":"mb-4 text-xl font-bold leading-normal md:text-2xl","children":"Sorry we couldn't find this page."}],["$","p",null,{"className":"mb-8","children":"But dont worry, you can find plenty of other things on my homepage."}],["$","br",null,{}],["$","p",null,{"className":"mb-8","children":["Looking for a post that was"," ",["$","$L8",null,{"href":"/blog/list/take-downs","className":"text-blue-500 transition duration-200 hover:text-blue-800","children":"taken down"}],"? ",["$","$L8",null,{"href":"/contact-form","className":"text-blue-500 transition duration-200 hover:text-blue-800","children":"DM"}]," ","me and I can send you a copy."]}],["$","$L8",null,{"href":"/","className":"focus:shadow-outline-blue inline rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-blue-700 focus:outline-none dark:hover:bg-blue-500","children":"Back to homepage"}]]}]]}],"notFoundStyles":[],"styles":null}]}]]}],["$","footer",null,{"children":["$","div",null,{"className":"mt-16 flex flex-col items-center","children":[["$","div",null,{"className":"mb-3 flex space-x-4","children":[null,["$","a",null,{"className":"text-sm text-gray-500 transition hover:text-gray-600","target":"_blank","rel":"noopener noreferrer","href":"https://github.com/tddschn","children":[["$","span",null,{"className":"sr-only","children":"github"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","className":"fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-6 w-6","children":[["$","title",null,{"children":"Github"}],["$","path",null,{"d":"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"}]]}]]}],null,["$","a",null,{"className":"text-sm text-gray-500 transition hover:text-gray-600","target":"_blank","rel":"noopener noreferrer","href":"https://www.youtube.com/@teddysc/playlists","children":[["$","span",null,{"className":"sr-only","children":"youtube"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","className":"fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-6 w-6","children":[["$","title",null,{"children":"Youtube"}],["$","path",null,{"d":"M23.499 6.203a3.008 3.008 0 00-2.089-2.089c-1.87-.501-9.4-.501-9.4-.501s-7.509-.01-9.399.501a3.008 3.008 0 00-2.088 2.09A31.258 31.26 0 000 12.01a31.258 31.26 0 00.523 5.785 3.008 3.008 0 002.088 2.089c1.869.502 9.4.502 9.4.502s7.508 0 9.399-.502a3.008 3.008 0 002.089-2.09 31.258 31.26 0 00.5-5.784 31.258 31.26 0 00-.5-5.808zm-13.891 9.4V8.407l6.266 3.604z"}]]}]]}],["$","a",null,{"className":"text-sm text-gray-500 transition hover:text-gray-600","target":"_blank","rel":"noopener noreferrer","href":"https://www.linkedin.com/in/tddschn","children":[["$","span",null,{"className":"sr-only","children":"linkedin"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","className":"fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-6 w-6","children":[["$","title",null,{"children":"Linkedin"}],["$","path",null,{"d":"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"}]]}]]}],null,null,null,null]}],["$","div",null,{"className":"mb-2 flex space-x-2 text-sm text-gray-500 dark:text-gray-400","children":[["$","div",null,{"children":"Teddy Xinyuan Chen"}],["$","div",null,{"children":" • "}],["$","div",null,{"children":"© 2024"}],["$","div",null,{"children":" • "}],["$","$L8",null,{"href":"/","children":"Teddy's Homepage"}]]}]]}]}]]}]}]]}]}]]}],null],null],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/f0cdd4df7b8837e7.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/9797c0ab1ed88acd.css","precedence":"next","crossOrigin":"$undefined"}]],"$Ld"]]]] e:I[4347,["231","static/chunks/231-ef201d9091b1ab11.js","173","static/chunks/173-79f10aa0f54a3733.js","696","static/chunks/696-76474eb52ea95942.js","797","static/chunks/app/blog/%5B...slug%5D/page-a95932d50e4d3339.js"],"default"] f:I[8173,["231","static/chunks/231-ef201d9091b1ab11.js","173","static/chunks/173-79f10aa0f54a3733.js","696","static/chunks/696-76474eb52ea95942.js","797","static/chunks/app/blog/%5B...slug%5D/page-a95932d50e4d3339.js"],"Image"] 10:I[408,["231","static/chunks/231-ef201d9091b1ab11.js","173","static/chunks/173-79f10aa0f54a3733.js","696","static/chunks/696-76474eb52ea95942.js","797","static/chunks/app/blog/%5B...slug%5D/page-a95932d50e4d3339.js"],"default"] 2:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"headline\":\"Introducing GitHub Gist HTML Renderer\",\"datePublished\":\"2024-05-07T06:00:00.000Z\",\"dateModified\":\"2024-05-07T00:00:00.000Z\",\"description\":\"A simple service that does a simple nice thing\",\"image\":\"/static/images/a-simple-service.jpg\",\"url\":\"https://teddysc.me/blog/introducing/github-gist-html-renderer\",\"author\":[{\"@type\":\"Person\",\"name\":\"Teddy Xinyuan Chen\"}]}"}}],["$","section",null,{"className":"mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0","children":[["$","$Le",null,{}],["$","article",null,{"children":["$","div",null,{"className":"xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700","children":[["$","header",null,{"className":"pt-6 xl:pb-6","children":["$","div",null,{"className":"space-y-1 text-center","children":[["$","dl",null,{"className":"space-y-10","children":["$","div",null,{"children":[["$","dt",null,{"className":"sr-only","children":"Published on"}],["$","dd",null,{"className":"text-base font-medium leading-6 text-gray-500 dark:text-gray-400","children":["$","time",null,{"dateTime":"2024-05-07T06:00:00.000Z","children":"Tuesday, May 7, 2024"}]}]]}]}],["$","div",null,{"children":["$","h1",null,{"className":"text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14 dark:text-gray-100","children":"Introducing GitHub Gist HTML Renderer"}]}]]}]}],["$","div",null,{"className":"grid-rows-[auto_1fr] divide-y divide-gray-200 pb-8 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0 dark:divide-gray-700","children":[["$","dl",null,{"className":"pb-10 pt-6 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700","children":[["$","dt",null,{"className":"sr-only","children":"Authors"}],["$","dd",null,{"children":["$","ul",null,{"className":"flex flex-wrap justify-center gap-4 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8","children":[["$","li","Teddy Xinyuan Chen",{"className":"flex items-center space-x-2","children":[["$","$Lf",null,{"src":"/static/images/selfie-blue-jacket-smiling-20240528-square.jpg","width":38,"height":38,"alt":"avatar","className":"h-10 w-10 rounded-full"}],["$","dl",null,{"className":"whitespace-nowrap text-sm font-medium leading-5","children":[["$","dt",null,{"className":"sr-only","children":"Name"}],["$","dd",null,{"className":"text-gray-900 dark:text-gray-100","children":"Teddy Xinyuan Chen"}],["$","dt",null,{"className":"sr-only","children":"Twitter"}],["$","dd",null,{"children":"$undefined"}]]}]]}]]}]}]]}],["$","div",null,{"className":"divide-y divide-gray-200 xl:col-span-3 xl:row-span-2 xl:pb-0 dark:divide-gray-700","children":[["$","div",null,{"className":"prose max-w-none pb-8 pt-10 dark:prose-invert","children":[["$","p",null,{"children":"gist.teddysc.me is a simple service that does a simple nice thing."}],["$","details",null,{"open":true,"children":[["$","summary",null,{"className":"ml-6 pb-2 pt-2 text-xl font-bold","children":"Table of Contents"}],["$","div",null,{"className":"ml-6","children":["$","ul",null,{"className":"","children":[["$","li","0",{"className":"","children":[["$","a",null,{"href":"#demo-2","children":"Demo"}],["$","ul",null,{"className":"","children":[["$","li","0",{"className":"","children":[["$","a",null,{"href":"#single-file-mode-default","children":"Single File Mode (Default)"}],null]}],["$","li","1",{"className":"","children":[["$","a",null,{"href":"#multi-files-mode","children":"Multi-files Mode"}],null]}]]}]]}],["$","li","1",{"className":"","children":[["$","a",null,{"href":"#why-3","children":"Why"}],null]}],["$","li","2",{"className":"","children":[["$","a",null,{"href":"#the-solution","children":"The Solution"}],null]}],["$","li","3",{"className":"","children":[["$","a",null,{"href":"#usage","children":"Usage"}],["$","ul",null,{"className":"","children":[["$","li","0",{"className":"","children":[["$","a",null,{"href":"#manual","children":"Manual"}],null]}],["$","li","1",{"className":"","children":[["$","a",null,{"href":"#script","children":"Script"}],["$","ul",null,{"className":"","children":[["$","li","0",{"className":"","children":[["$","a",null,{"href":"#what-i-use-in-my-zshrc","children":"What I use in my .zshrc"}],null]}]]}]]}],["$","li","2",{"className":"","children":[["$","a",null,{"href":"#chrome-extension","children":"Chrome Extension"}],null]}]]}]]}]]}]}]]}],["$","h2",null,{"className":"content-header","id":"demo","children":[["$","a",null,{"href":"#demo","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Demo"]}],["$","h3",null,{"className":"content-header","id":"single-file-mode-default","children":[["$","a",null,{"href":"#single-file-mode-default","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Single File Mode (Default)"]}],["$","p",null,{"children":["Just replace ",["$","code",null,{"children":"gist.github.com"}]," with ",["$","code",null,{"children":"g.teddysc.me"}]," or ",["$","code",null,{"children":"gist.teddysc.me"}]," in the URL."]}],["$","p",null,{"children":[["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://gist.github.com/tddschn/22990876690398bd42cfaa4be87a546e","children":"https://gist.github.com/tddschn/22990876690398bd42cfaa4be87a546e"}]," (HTML Gist, unrendered)"]}]," ",["$","p",null,{"className":"text-center","children":"⬇️"}],["$","p",null,{"children":[["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://gist.teddysc.me/tddschn/22990876690398bd42cfaa4be87a546e","children":"https://gist.teddysc.me/tddschn/22990876690398bd42cfaa4be87a546e"}]," (Rendered)"]}],["$","h3",null,{"className":"content-header","id":"multi-files-mode","children":[["$","a",null,{"href":"#multi-files-mode","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Multi-files Mode"]}],["$","p",null,{"children":"If you want the visitor to have easy access to more than 1 file in the Gist, you can use the multi-files mode."}],["$","p",null,{"children":["Just add ",["$","code",null,{"children":"?m"}]," to the URL."]}],["$","p",null,{"children":["Example: ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://g.teddysc.me/cd7f65f529aa85658270dfd897b7dbed?m","children":"https://g.teddysc.me/cd7f65f529aa85658270dfd897b7dbed?m"}]," (When username not supplied, defaults to my GitHub handle ",["$","code",null,{"children":"tddschn"}],")"]}],["$","p",null,{"children":["If the gist has more than 1 file and you do not include the ",["$","code",null,{"children":"m"}]," query parameter, only the 1st file will be rendered as HTML."]}],["$","h2",null,{"className":"content-header","id":"why","children":[["$","a",null,{"href":"#why","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Why"]}],["$","p",null,{"children":"I love sharing non-binary files on GitHub Gist - it's private by default, no one should be able to visit the page without the knowledge of the URL with a long hash, like this:"}],["$","p",null,{"children":["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://gist.github.com/tddschn/22990876690398bd42cfaa4be87a546e","children":"https://gist.github.com/tddschn/22990876690398bd42cfaa4be87a546e"}]}],["$","p",null,{"children":["But what has bothered me for a long, long time is that GitHub renders ",["$","code",null,{"children":".ipynb"}]," files but not ",["$","code",null,{"children":".html"}]," files, which sometimes is not what users want."]}],["$","p",null,{"children":"Because of this, I've been sharing HTML files on rpubs.com via a CLI tool I made to upload files to the site in a single command."}],["$","p",null,{"children":"However, there's no access control on rpubs, everything is public and the URL is easily guessable, which sucks."}],["$","p",null,{"children":"The only upside of using rpubs is that it shows people I'm somewhat an R user, which sounds fancy. 🤗"}],["$","h2",null,{"className":"content-header","id":"the-solution","children":[["$","a",null,{"href":"#the-solution","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"The Solution"]}],["$","p",null,{"children":["There was a site, ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://web.archive.org/web/20170710170952/https://bl.ocks.org/-/about","children":"bl.ocks.org"}],", which was a site to display rendered HTML files and ",["$","code",null,{"children":"d3.js"}]," snippets from Gist, which sounds really cool, but unfortunaly, it's no longer in service."]}],["$","p",null,{"children":["I believe the service was operated by one of ObservableHQ's founders, who also wrote ",["$","code",null,{"children":"d3.js"}]," and the site is the precursor for ObservableHQ."]}],["$","p",null,{"children":"I never got a chance to use bl.ocks.org, but people really loved it and I like it too because it sounds like something a hacker would make, just a simple service that does simple nice things."}],["$","p",null,{"children":["On StackExchange people ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://stackoverflow.com/a/62861360/11133602","children":"suggested"}]," using something like rawgit (3rd party service to render HTML from GitHub for you, sounds kinda sketchy) or just host your own static website and include the HTML file (overkill, too much hassle, no access control), so I decide to hack my own ",["$","code",null,{"children":"bl.ocks.org"}],", with no d3 support."]}],["$","p",null,{"children":["So here it is, introducing ",["$","code",null,{"children":"g{,ist}.teddysc.me"}]," (both domains work):"]}],["$","p",null,{"children":["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://gist.github.com/tddschn/22990876690398bd42cfaa4be87a546e","children":"https://gist.github.com/tddschn/22990876690398bd42cfaa4be87a546e"}]}],["$","p",null,{"children":"becomes"}],["$","ul",null,{"children":[["$","li",null,{"children":[["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://g.teddysc.me/22990876690398bd42cfaa4be87a546e","children":"https://g.teddysc.me/22990876690398bd42cfaa4be87a546e"}]," (uses my GitHub username if not supplied)"]}],["$","li",null,{"children":["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://g.teddysc.me/tddschn/22990876690398bd42cfaa4be87a546e","children":"https://g.teddysc.me/tddschn/22990876690398bd42cfaa4be87a546e"}]}]]}],["$","p",null,{"children":"The snippet below shows how the URL is mapped to a GitHub Gist raw URL:"}],["$","$L10",null,{"className":"language-ts","children":["$","code",null,{"className":"code-highlight language-ts","children":[["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"const"}]," testCases ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"["}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"{"}]," input",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"https://my.domain/tddschn/22990876690398bd42cfaa4be87a546e/myfile.html\""}],["$","span",null,{"className":"token punctuation","children":","}]," expected",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"https://gist.githubusercontent.com/tddschn/22990876690398bd42cfaa4be87a546e/raw/myfile.html\""}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"{"}]," input",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"https://my.domain/tddschn/22990876690398bd42cfaa4be87a546e\""}],["$","span",null,{"className":"token punctuation","children":","}]," expected",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"https://gist.githubusercontent.com/tddschn/22990876690398bd42cfaa4be87a546e/raw/\""}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"{"}]," input",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"https://my.domain/22990876690398bd42cfaa4be87a546e\""}],["$","span",null,{"className":"token punctuation","children":","}]," expected",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"https://gist.githubusercontent.com/tddschn/22990876690398bd42cfaa4be87a546e/raw/\""}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"{"}]," input",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"https://my.domain/anotheruser/1234567890abcdef\""}],["$","span",null,{"className":"token punctuation","children":","}]," expected",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"https://gist.githubusercontent.com/anotheruser/1234567890abcdef/raw/\""}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"{"}]," input",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"https://my.domain/johndoe/abcdef123456789/myfile.js\""}],["$","span",null,{"className":"token punctuation","children":","}]," expected",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"\"https://gist.githubusercontent.com/johndoe/abcdef123456789/raw/myfile.js\""}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":";"}],"\n"]}]]}]}],["$","h2",null,{"className":"content-header","id":"usage","children":[["$","a",null,{"href":"#usage","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Usage"]}],["$","h3",null,{"className":"content-header","id":"manual","children":[["$","a",null,{"href":"#manual","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Manual"]}],["$","p",null,{"children":["Manually replacing ",["$","code",null,{"children":"gist.github.com"}]," to ",["$","code",null,{"children":"g.teddysc.me"}]," or ",["$","code",null,{"children":"gist.teddysc.me"}]," in the Gist URL."]}],["$","h3",null,{"className":"content-header","id":"script","children":[["$","a",null,{"href":"#script","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Script"]}],["$","p",null,{"children":["The bash script ",["$","code",null,{"children":"gist-create-output-processor.sh"}]," below captures stdin, runs ",["$","code",null,{"children":"sed 's/gist.github.com/g.teddysc.me/'"}]," only on the last line of stdin, and output stdin and the processed last line together."]}],["$","$L10",null,{"className":"language-bash","children":["$","code",null,{"className":"code-highlight language-bash","children":[["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token important shebang","children":"#!/usr/bin/env bash"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token comment","children":"# Read and store all lines from stdin into an array"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token builtin class-name","children":"mapfile"}]," ",["$","span",null,{"className":"token variable parameter","children":"-t"}]," lines\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token comment","children":"# Count the number of lines"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token variable assign-left","children":"num_lines"}],["$","span",null,{"className":"token operator","children":"="}],["$","span",null,{"className":"token variable","children":["$${",["$","span",null,{"className":"token operator","children":"#"}],"lines",["$","span",null,{"className":"token punctuation","children":"["}],"@",["$","span",null,{"className":"token punctuation","children":"]"}],"}"]}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token comment","children":"# Process the last line with sed, if there is at least one line"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"if"}]," ",["$","span",null,{"className":"token punctuation","children":"["}]," ",["$","span",null,{"className":"token string","children":["\"",["$","span",null,{"className":"token variable","children":"$$num_lines"}],"\""]}]," ",["$","span",null,{"className":"token variable parameter","children":"-gt"}]," ",["$","span",null,{"className":"token number","children":"0"}]," ",["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":";"}]," ",["$","span",null,{"className":"token keyword","children":"then"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token variable assign-left","children":"last_line_processed"}],["$","span",null,{"className":"token operator","children":"="}],["$","span",null,{"className":"token variable","children":[["$","span",null,{"className":"token variable","children":"$$("}],["$","span",null,{"className":"token builtin class-name","children":"echo"}]," ",["$","span",null,{"className":"token string","children":["\"",["$","span",null,{"className":"token variable","children":["$${lines",["$","span",null,{"className":"token punctuation","children":"["}],"-1",["$","span",null,{"className":"token punctuation","children":"]"}],"}"]}],"\""]}]," ",["$","span",null,{"className":"token operator","children":"|"}]," ",["$","span",null,{"className":"token function","children":"sed"}]," ",["$","span",null,{"className":"token string","children":"'s/gist.github.com/g.teddysc.me/'"}],["$","span",null,{"className":"token variable","children":")"}]]}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"fi"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token comment","children":"# Output all lines"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"for"}]," ",["$","span",null,{"className":"token variable for-or-select","children":"line"}]," ",["$","span",null,{"className":"token keyword","children":"in"}]," ",["$","span",null,{"className":"token string","children":["\"",["$","span",null,{"className":"token variable","children":["$${lines",["$","span",null,{"className":"token punctuation","children":"["}],"@",["$","span",null,{"className":"token punctuation","children":"]"}],"}"]}],"\""]}],["$","span",null,{"className":"token punctuation","children":";"}]," ",["$","span",null,{"className":"token keyword","children":"do"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token builtin class-name","children":"echo"}]," ",["$","span",null,{"className":"token string","children":["\"",["$","span",null,{"className":"token variable","children":"$$line"}],"\""]}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"done"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token comment","children":"# Output the processed last line, if it exists"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"if"}]," ",["$","span",null,{"className":"token punctuation","children":"["}]," ",["$","span",null,{"className":"token string","children":["\"",["$","span",null,{"className":"token variable","children":"$$num_lines"}],"\""]}]," ",["$","span",null,{"className":"token variable parameter","children":"-gt"}]," ",["$","span",null,{"className":"token number","children":"0"}]," ",["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":";"}]," ",["$","span",null,{"className":"token keyword","children":"then"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token builtin class-name","children":"echo"}]," ",["$","span",null,{"className":"token string","children":["\"",["$","span",null,{"className":"token variable","children":"$$last_line_processed"}],"\""]}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"fi"}],"\n"]}]]}]}],["$","$L10",null,{"className":"language-plain","children":["$","code",null,{"className":"code-highlight language-plain","children":[["$","span",null,{"className":"code-line","children":"gh gist create my-fancy-html.html | ./gist-create-output-processor.sh\n"}],["$","span",null,{"className":"code-line","children":"- Creating gist my-fancy-html.html\n"}],["$","span",null,{"className":"code-line","children":"✓ Created secret gist my-fancy-html.html\n"}],["$","span",null,{"className":"code-line","children":"https://gist.github.com/tddschn/ddc8c3ea22d61fc67e979c1d95f4ac45\n"}],["$","span",null,{"className":"code-line","children":"https://g.teddysc.me/tddschn/ddc8c3ea22d61fc67e979c1d95f4ac45 # <- new line added here\n"}]]}]}],["$","h4",null,{"className":"content-header","id":"what-i-use-in-my-zshrc","children":[["$","a",null,{"href":"#what-i-use-in-my-zshrc","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"What I use in my .zshrc"]}],["$","$L10",null,{"className":"language-bash","children":["$","code",null,{"className":"code-highlight language-bash","children":[["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token comment","children":"# prefixing command with `command` just to prevent alias expansion (I defined too many aliases to I do this to be safe)"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token function function-name","children":"tee_to_tty_and_copy_without_newline"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token builtin class-name","children":"command"}]," ",["$","span",null,{"className":"token function","children":"tee"}]," /dev/tty ",["$","span",null,{"className":"token operator","children":"|"}],["$","span",null,{"className":"token punctuation","children":"\\"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token builtin class-name","children":"command"}]," ",["$","span",null,{"className":"token function","children":"tr"}]," ",["$","span",null,{"className":"token variable parameter","children":"-d"}]," ",["$","span",null,{"className":"token string","children":"'\\n'"}]," ",["$","span",null,{"className":"token operator","children":"|"}]," pbcopy\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token builtin class-name","children":"alias"}]," ",["$","span",null,{"className":"token variable parameter","children":"-g"}]," ",["$","span",null,{"className":"token variable assign-left","children":"GTM"}],["$","span",null,{"className":"token operator","children":"="}],["$","span",null,{"className":"token string","children":"'| gist_teddysc_me_url_processing | tee_to_tty_and_copy_without_newline'"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"function"}]," ",["$","span",null,{"className":"token function function-name","children":"gist_teddysc_me_url_processing"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token builtin class-name","children":"command"}]," ",["$","span",null,{"className":"token function","children":"sed"}]," ",["$","span",null,{"className":"token string","children":"'s/gist.github.com/g.teddysc.me/'"}]," ",["$","span",null,{"className":"token operator","children":"|"}],["$","span",null,{"className":"token punctuation","children":"\\"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token builtin class-name","children":"command"}]," ",["$","span",null,{"className":"token function","children":"sed"}]," ",["$","span",null,{"className":"token string","children":"'s:/tddschn::'"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token builtin class-name","children":"alias"}]," ",["$","span",null,{"className":"token variable assign-left","children":"gisttm"}],["$","span",null,{"className":"token operator","children":"="}],["$","span",null,{"className":"token string","children":"'gist_create_gist_teddysc_me'"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token function function-name","children":"gist_create_gist_teddysc_me"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"if"}]," ",["$","span",null,{"className":"token punctuation","children":"["}]," ",["$","span",null,{"className":"token variable parameter","children":"-z"}]," ",["$","span",null,{"className":"token string","children":["\"",["$","span",null,{"className":"token variable","children":"$$1"}],"\""]}]," ",["$","span",null,{"className":"token punctuation","children":"]"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"then"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token builtin class-name","children":"command"}]," ",["$","span",null,{"className":"token string","children":"'gh'"}]," ",["$","span",null,{"className":"token string","children":"'gist'"}]," ",["$","span",null,{"className":"token string","children":"'create'"}]," ",["$","span",null,{"className":"token operator","children":"|"}]," gist_teddysc_me_url_processing ",["$","span",null,{"className":"token operator","children":"|"}]," tee_to_tty_and_copy_without_newline\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"elif"}]," ",["$","span",null,{"className":"token punctuation","children":"["}]," ",["$","span",null,{"className":"token variable parameter","children":"-z"}]," ",["$","span",null,{"className":"token string","children":["\"",["$","span",null,{"className":"token variable","children":"$$2"}],"\""]}]," ",["$","span",null,{"className":"token punctuation","children":"]"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"then"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token builtin class-name","children":"command"}]," ",["$","span",null,{"className":"token string","children":"'gh'"}]," ",["$","span",null,{"className":"token string","children":"'gist'"}]," ",["$","span",null,{"className":"token string","children":"'create'"}]," ",["$","span",null,{"className":"token string","children":["\"",["$","span",null,{"className":"token variable","children":"$$1"}],"\""]}]," ",["$","span",null,{"className":"token operator","children":"|"}]," gist_teddysc_me_url_processing ",["$","span",null,{"className":"token operator","children":"|"}]," tee_to_tty_and_copy_without_newline\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"else"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token builtin class-name","children":"echo"}]," ",["$","span",null,{"className":"token string","children":"'Using multi-file mode'"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token builtin class-name","children":"command"}]," ",["$","span",null,{"className":"token string","children":"'gh'"}]," ",["$","span",null,{"className":"token string","children":"'gist'"}]," ",["$","span",null,{"className":"token string","children":"'create'"}]," ",["$","span",null,{"className":"token string","children":["\"",["$","span",null,{"className":"token variable","children":"$$@"}],"\""]}]," ",["$","span",null,{"className":"token operator","children":"|"}]," gist_teddysc_me_url_processing ",["$","span",null,{"className":"token operator","children":"|"}]," ",["$","span",null,{"className":"token function","children":"awk"}]," ",["$","span",null,{"className":"token string","children":"'{print $0 \"?m\"}'"}]," ",["$","span",null,{"className":"token operator","children":"|"}]," tee_to_tty_and_copy_without_newline\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"fi"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]]}]}],["$","p",null,{"children":["So if multiple files are passed, ",["$","code",null,{"children":"?m"}]," will be appended to the URL."]}],["$","$L10",null,{"className":"language-plain","children":["$","code",null,{"className":"code-highlight language-plain","children":[["$","span",null,{"className":"code-line","children":"gisttm *.html\n"}],["$","span",null,{"className":"code-line","children":"Using multi-file mode\n"}],["$","span",null,{"className":"code-line","children":"- Creating gist with multiple files\n"}],["$","span",null,{"className":"code-line","children":"✓ Created secret gist aisb-0515-message-count-by-party.html\n"}],["$","span",null,{"className":"code-line","children":"https://g.teddysc.me/a0507ad12558c69348f5c4c88d0fb483?m\n"}]]}]}],["$","h3",null,{"className":"content-header","id":"chrome-extension","children":[["$","a",null,{"href":"#chrome-extension","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Chrome Extension"]}],["$","p",null,{"children":"Use this extension to do the manual work for you when you already opened the link in the browser:"}],["$","p",null,{"children":["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://github.com/tddschn/url-regex-replace-chrome-extension","children":"https://github.com/tddschn/url-regex-replace-chrome-extension"}]}],["$","p",null,{"children":["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://chromewebstore.google.com/detail/url-regex-replace/nkohlbebkognioabnnjchnchdapolofb","children":"Chrome Web Store"}]}]]}],["$","div",null,{"className":"pb-6 pt-6 text-sm text-gray-700 dark:text-gray-300","children":[["$","a",null,{"target":"_blank","rel":"nofollow","href":"https://mobile.twitter.com/search?q=https%3A%2F%2Fteddysc.me%2Fblog%2Fintroducing%2Fgithub-gist-html-renderer","children":"Discuss on Twitter"}]," • ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://github.com/tddschn/tailwind-nextjs-starter-blog/blob/main/data/blog/introducing/github-gist-html-renderer.mdx","children":"View on GitHub"}]]}],"$undefined"]}],["$","footer",null,{"children":[["$","div",null,{"className":"divide-gray-200 text-sm font-medium leading-5 xl:col-start-1 xl:row-start-2 xl:divide-y dark:divide-gray-700","children":[["$","div",null,{"className":"py-4 xl:py-8","children":[["$","h2",null,{"className":"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400","children":"Tags"}],["$","div",null,{"className":"flex flex-wrap","children":[["$","$L8",null,{"href":"/tags/tech","className":"mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":"tech"}],["$","$L8",null,{"href":"/tags/cloudflare","className":"mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":"cloudflare"}],["$","$L8",null,{"href":"/tags/cloudflare-workers","className":"mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":"cloudflare-workers"}],["$","$L8",null,{"href":"/tags/github","className":"mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":"github"}],["$","$L8",null,{"href":"/tags/announcement","className":"mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":"announcement"}]]}]]}],["$","div",null,{"className":"flex justify-between py-4 xl:block xl:space-y-8 xl:py-8","children":[["$","div",null,{"children":[["$","h2",null,{"className":"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400","children":"Previous Article"}],["$","div",null,{"className":"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":["$","$L8",null,{"href":"/blog/raleigh-menswear-stores-review","children":"Raleigh (Classic) Menswear Stores Review"}]}]]}],["$","div",null,{"children":[["$","h2",null,{"className":"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400","children":"Next Article"}],["$","div",null,{"className":"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":["$","$L8",null,{"href":"/blog/mandarin-flipped-words","children":"How Mandarin Flipped (So Many) 2-Character Words"}]}]]}]]}]]}],["$","div",null,{"className":"pt-4 xl:pt-8","children":["$","$L8",null,{"href":"/blog","className":"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","aria-label":"Back to the blog","children":"← Back to the blog"}]}]]}]]}]]}]}]]}]] d:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Introducing GitHub Gist HTML Renderer | Teddy's Homepage"}],["$","meta","3",{"name":"description","content":"A simple service that does a simple nice thing"}],["$","meta","4",{"name":"robots","content":"index, follow"}],["$","meta","5",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","6",{"rel":"canonical","href":"https://teddysc.me/blog/introducing/github-gist-html-renderer"}],["$","link","7",{"rel":"alternate","type":"application/rss+xml","href":"https://teddysc.me/feed.xml"}],["$","meta","8",{"property":"og:title","content":"Introducing GitHub Gist HTML Renderer"}],["$","meta","9",{"property":"og:description","content":"A simple service that does a simple nice thing"}],["$","meta","10",{"property":"og:url","content":"https://teddysc.me/blog/introducing/github-gist-html-renderer"}],["$","meta","11",{"property":"og:site_name","content":"Teddy's Homepage"}],["$","meta","12",{"property":"og:locale","content":"en_US"}],["$","meta","13",{"property":"og:image","content":"https://teddysc.me/static/images/a-simple-service.jpg"}],["$","meta","14",{"property":"og:type","content":"article"}],["$","meta","15",{"property":"article:published_time","content":"2024-05-07T06:00:00.000Z"}],["$","meta","16",{"property":"article:modified_time","content":"2024-05-07T00:00:00.000Z"}],["$","meta","17",{"property":"article:author","content":"Teddy Xinyuan Chen"}],["$","meta","18",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","19",{"name":"twitter:title","content":"Introducing GitHub Gist HTML Renderer"}],["$","meta","20",{"name":"twitter:description","content":"A simple service that does a simple nice thing"}],["$","meta","21",{"name":"twitter:image","content":"https://teddysc.me/static/images/a-simple-service.jpg"}],["$","meta","22",{"name":"next-size-adjust"}]] 1:null