[{"data":1,"prerenderedAt":408},["ShallowReactive",2],{"cms-blog-adding-syntax-highlighting-to-my-blog-with-torchlight":3,"cms-blog":16},{"title":4,"excerpt":5,"slug":8,"rawDate":9,"date":10,"content":11,"readingTime":12,"acf":13,"featuredMedia":15},"Adding syntax highlighting to my blog with Torchlight",{"raw":6,"plain":7},"\u003Cp>Background A little while ago I read the following blog post, Web Component for a Code Block by Chris Coyier, it got me thinking about how I could enhance the code blocks on my website. This is a tech blog after all, and from time to time I want to share tips and tricks which involve […]\u003C\u002Fp>","Background A little while ago I read the following blog post, Web Component for a Code Block by Chris Coyier, it got me thinking about how I could enhance the code blocks on my website. This is a tech blog after all, and from time to time I want to share tips and tricks which involve […]","adding-syntax-highlighting-to-my-blog-with-torchlight","2023-06-16T14:27:07",["Date","2023-06-16T00:00:00.000Z"],"\u003Ch2 class=\"wp-block-heading\">Background\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">A little while ago I read the following blog post, \u003Ca href=\"https:\u002F\u002Fcss-tricks.com\u002Fweb-component-for-a-code-block\u002F\" target=\"_blank\">Web Component for a Code Block\u003Cpicture>\u003Cimg decoding=\"async\" loading=\"lazy\" width=\"16\" height=\"16\" src=\"\u002Fcdn-cgi\u002Fimage\u002Fformat=auto,quality=80,fit=scale-down,width=32\u002Fimg\u002Ffavicons\u002Fcss-tricks.com.png\" alt=\"css-tricks.com favicon\">\u003C\u002Fpicture>\u003C\u002Fa> by Chris Coyier, it got me thinking about how I could enhance the code blocks on my website. This is a tech blog after all, and from time to time I want to share tips and tricks which involve code snippets. Code syntax highlighting is vital for blog posts because it helps to visually distinguish different elements of code, making it easier to read, understand, and spot errors. HTML has very handy \u003Ccode><pre>\u003C\u002Fcode> and \u003Ccode><code>\u003C\u002Fcode> elements which help with the markup. I previously had some styling that left me with this solution:\u003C\u002Fp>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cpicture>\u003Cimg src=\"\u002Fcdn-cgi\u002Fimage\u002Fformat=auto,quality=80,fit=scale-down,width=736\u002Fhttps:\u002F\u002Fcms.joebailey.xyz\u002Fmedia\u002Fc30e9217ced886beae9b7b1a1de0f08cc36583096a965e68d79f83ce2a5290ac\u002Fc30e9217ced886be-image.png\" srcset=\"\u002Fcdn-cgi\u002Fimage\u002Fformat=auto,quality=80,fit=scale-down,width=480\u002Fhttps:\u002F\u002Fcms.joebailey.xyz\u002Fmedia\u002Fc30e9217ced886beae9b7b1a1de0f08cc36583096a965e68d79f83ce2a5290ac\u002Fc30e9217ced886be-image.png 480w, \u002Fcdn-cgi\u002Fimage\u002Fformat=auto,quality=80,fit=scale-down,width=736\u002Fhttps:\u002F\u002Fcms.joebailey.xyz\u002Fmedia\u002Fc30e9217ced886beae9b7b1a1de0f08cc36583096a965e68d79f83ce2a5290ac\u002Fc30e9217ced886be-image.png 736w\" sizes=\"(min-width: 1200px) 1140px, 100vw\" decoding=\"async\" loading=\"lazy\" alt=\"\" width=\"736\" height=\"168\">\u003C\u002Fpicture>\u003C\u002Ffigure>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Note that all the text is just white, not at all what you would see in your IDE of choice.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Research & Implementation\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">All of the content on this blog is hosted on WordPress, and I’ve built a Nuxt module to fetch the content and transform it which I’ll write another blog post on at a later date once I’ve finalised the API for it.\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">I initially extended my module to process all \u003Ccode><pre>\u003C\u002Fcode> elements in a blog post. I wrote a loop over each element and which let me experiment with a few different syntax highlighting libraries.\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Chris had used \u003Ca href=\"https:\u002F\u002Fprismjs.com\u002F\" target=\"_blank\">PrismJS\u003Cpicture>\u003Cimg decoding=\"async\" loading=\"lazy\" width=\"16\" height=\"16\" src=\"\u002Fimg\u002Ffavicons\u002Fprismjs.com.svg\" alt=\"prismjs.com favicon\">\u003C\u002Fpicture>\u003C\u002Fa> in his web component, so I thought that was as best a place to start as any. It was relatively easy to install with Yarn.\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">I realised none of my code examples included a language, and Prism needed a language set for each block. I went down a rabbit hole of finding a language detector. Trying to Google that got a lot of results for detecting human languages, such as English or Spanish, rather than code languages, such as JavaScript or PHP. I did find a few detectors, including one based on what GitHub use, \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fjs-linguist\" target=\"_blank\">Linguist\u003C\u002Fa>, but most of the auto-detection libraries rely on other contextual clues such as file extension, whereas I just wanted to pass a string to the detector.\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">I then found a blog from LogRocket, \u003Ca href=\"https:\u002F\u002Fblog.logrocket.com\u002Fexploring-best-syntax-highlighting-libraries\u002F\" target=\"_blank\">exploring the best syntax highlighting libraries\u003Cpicture>\u003Cimg decoding=\"async\" loading=\"lazy\" width=\"16\" height=\"16\" src=\"\u002Fcdn-cgi\u002Fimage\u002Fformat=auto,quality=80,fit=scale-down,width=32\u002Fimg\u002Ffavicons\u002Fblog.logrocket.com.png\" alt=\"blog.logrocket.com favicon\">\u003C\u002Fpicture>\u003C\u002Fa>, and looked into \u003Ca href=\"https:\u002F\u002Fhighlightjs.org\u002F\" target=\"_blank\">Highlight.js\u003Cpicture>\u003Cimg decoding=\"async\" loading=\"lazy\" width=\"16\" height=\"16\" src=\"\u002Fcdn-cgi\u002Fimage\u002Fformat=auto,quality=80,fit=scale-down,width=32\u002Fimg\u002Ffavicons\u002Fhighlightjs.org.png\" alt=\"highlightjs.org favicon\">\u003C\u002Fpicture>\u003C\u002Fa>. They offer an auto-detection language feature which worked, but wasn’t very accurate. Similar to PrismJS, it was very quick to get a working solution together.\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">I bit the bullet and went through all of my old blog posts and assigned each code block a language. It didn’t take much longer than 5 minutes as I didn’t have that many code blocks in the first place. I was just over-complicating things!\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">I stumbled upon \u003Ca href=\"https:\u002F\u002Faustencam.com\u002Fposts\u002Fenhancing-torchlight-syntax-highlighting-in-statamic-with-a-copy-to-clipboard-feature\" target=\"_blank\">another blog post\u003Cpicture>\u003Cimg decoding=\"async\" loading=\"lazy\" width=\"16\" height=\"16\" src=\"\u002Fcdn-cgi\u002Fimage\u002Fformat=auto,quality=80,fit=scale-down,width=32\u002Fimg\u002Ffavicons\u002Faustencam.com.png\" alt=\"austencam.com favicon\">\u003C\u002Fpicture>\u003C\u002Fa> talking about the \u003Ca href=\"https:\u002F\u002Ftorchlight.dev\u002F\" target=\"_blank\">Torchlight\u003C\u002Fa> syntax highlighting library and realised that Highlight.js was not very good at Syntax highlighting at all. Torchlight works slightly differently from Highlight.js and PrismJS in that it is a HTTP API. You pass your content to it, and it returns it with syntax highlighting. The highlighter is closed-source, but it uses the engine behind VSCode, so highlighting is much more accurate. The code examples on my site could match exactly what I see in VSCode, perfect! Using Torchlight also meant I could pre-render the highlighting, massively reducing the weight of scripts I was making the end user download. I’m all about performance, so I was sold. There’s a \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@torchlight-api\u002Fclient\" target=\"_blank\">JavaScript client library\u003C\u002Fa> but it had no docs, so I had to spend a lot of time in the source code figuring out how everything works. \u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">To get started, you import the Torchlight constructor and call the \u003Ccode>init()\u003C\u002Fcode> method. The Torchlight constructor takes 3 arguments, a configuration object, a cache class, and a boolean of whether to perform a re-initialisation if Torchlight has already been set up. The library offers a \u003Ccode>makeConfig()\u003C\u002Fcode> helper function, which looks for a \u003Ccode>torchlight.config.js\u003C\u002Fcode> file in the root directory if it is not passed a configuration object. For my case, I was happy with the defaults Torchlight sets, but wanted to change the theme, so opted to pass this through the function rather than created a config file. I took an informed guess from the \u003Ca href=\"https:\u002F\u002Ftorchlight.dev\u002Fdocs\u002Fclients\u002Fcli#configuration-file\" target=\"_blank\">options that are available\u003C\u002Fa> to the other libraries. Torchlight has various themes available which are \u003Ca href=\"https:\u002F\u002Ftorchlight.dev\u002Fdocs\u002Fthemes\" target=\"_blank\">documented here\u003C\u002Fa>. Torchlight offers 2 caching mechanisms, a file-based cache, and an in-memory cache. As this site is statically generated, an in-memory cache wouldn’t be any good for me, so I set up a file cache. Again, the library provides a handy helper, allowing you to call \u003Ccode>new FileCache\u003C\u002Fcode> or \u003Ccode>new MemoryCache\u003C\u002Fcode>. The \u003Ccode>FileCache\u003C\u002Fcode> constructor takes a configuration object allowing you to specify the directory in which to cache the files. For each request to the HTTP API, Torchlight stores the response in a JSON file in this directory. When making a request, Torchlight looks in the cache directory first, checking the expiration time, before making a new request to the HTTP API if needed. I omitted the \u003Ccode>force\u003C\u002Fcode> argument as this is set to false by default.\u003C\u002Fp>\n\n\n\n\u003Cpre class=\"language-javascript torchlight\" data-language=\"javascript\">\u003Ccode data-torchlight-id=\"faf7a96a-6ee1-cf60-be91-76d8099a90fc\">\u003C!-- Syntax highlighted by torchlight.dev -->\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 1\u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">import\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> { \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">makeConfig\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">torchlight\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">FileCache\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> } \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">from\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'@torchlight-api\u002Fclient'\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 2\u003C\u002Fspan> \u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 3\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">torchlight\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">init\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 4\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">await\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">makeConfig\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">({\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 5\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">theme:\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'dark-plus'\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 6\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  }),\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 7\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">new\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">FileCache\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">({\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 8\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">directory:\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'.\u002F.torchlight-cache'\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 9\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  })\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">10\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fcode>\n    \u003Cdiv class=\"copy-button__container js-copy-to-clipboard-container\">\n      \u003Cdiv class=\"copy-button__text js-copy-to-clipboard-notification\">Copied!\u003C\u002Fdiv>\n      \u003Cbutton type=\"button\" title=\"Copy to clipboard\" class=\"copy-button__button js-copy-to-clipboard-button\">\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cspan class=\"torchlight-copy-target js-copy-to-clipboard-target\" style=\"display: none\">import { makeConfig, torchlight, FileCache } from '@torchlight-api\u002Fclient'\n\ntorchlight.init(\n  await makeConfig({\n    theme: 'dark-plus'\n  }),\n  new FileCache({\n    directory: '.\u002F.torchlight-cache'\n  })\n)\n\u003C\u002Fspan>\n    \u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">I installed the \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fnetlify-plugin-cache\" target=\"_blank\">netlify-plugin-cache package\u003C\u002Fa> which allows you to specify directories that Netlify should cache. This means that the \u003Ccode>.torchlight-cache\u003C\u002Fcode> directory persists between builds. I added the following to my \u003Ccode>netlify.toml\u003C\u002Fcode>.\u003C\u002Fp>\n\n\n\n\u003Cpre class=\"language-toml torchlight\" data-language=\"toml\">\u003Ccode data-torchlight-id=\"47fa6505-cca2-ac3b-a4d5-36c07dffe19e\">\u003C!-- Syntax highlighted by torchlight.dev -->\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">1\u003C\u002Fspan>\u003Cspan style=\"color: #6A9955;\"># netlify.toml\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">2\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">[[plugins]]\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">3\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">package\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">\"netlify-plugin-cache\"\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">4\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  [plugins.inputs]\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">5\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">paths\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = [\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">6\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">\".torchlight-cache\"\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">7\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  ]\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fcode>\n    \u003Cdiv class=\"copy-button__container js-copy-to-clipboard-container\">\n      \u003Cdiv class=\"copy-button__text js-copy-to-clipboard-notification\">Copied!\u003C\u002Fdiv>\n      \u003Cbutton type=\"button\" title=\"Copy to clipboard\" class=\"copy-button__button js-copy-to-clipboard-button\">\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cspan class=\"torchlight-copy-target js-copy-to-clipboard-target\" style=\"display: none\"># netlify.toml\n[[plugins]]\npackage = \"netlify-plugin-cache\"\n  [plugins.inputs]\n  paths = [\n    \".torchlight-cache\"\n  ]\u003C\u002Fspan>\n    \u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Now that Torchlight was set up, I actually needed to pass code to it to highlight. There’s another class, \u003Ccode>block\u003C\u002Fcode>, which you create for every block of code you want to highlight. You push these into an array and then call \u003Ccode>torchlight.highlight()\u003C\u002Fcode> on it, which returns you an array of highlighted blocks. The \u003Ccode>block\u003C\u002Fcode> constructor takes 2 arguments, the code, and the language. I’ve added CSS classes to all my code blocks now, so can grab the language from there. I’m using the \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcheerio\" target=\"_blank\">Cheerio library\u003C\u002Fa> to parse the WordPress post content, so fetching a class is very simple. I also add the language as a data attribute to the code block, so I can display it with CSS. WordPress’s post content is HTML encoded, so I use the he library to decode it before adding it to the block. This allows HTML inside code blocks to be formatted correctly. The block class generates a unique id, which we set on the <code> element to enable us to update its content once we have received the highlighted code.\u003C\u002Fp>\n\n\n\n\u003Cpre class=\"language-javascript torchlight\" data-language=\"javascript\">\u003Ccode data-torchlight-id=\"8b6ec503-ce1c-ca32-44c9-3339aac0cca1\">\u003C!-- Syntax highlighted by torchlight.dev -->\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 1\u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">import\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> { \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">load\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> } \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">from\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'cheerio'\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 2\u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">import\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">he\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">from\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'he'\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 3\u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">import\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> { \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">Block\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> } \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">from\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'@torchlight-api\u002Fclient'\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 4\u003C\u002Fspan> \u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 5\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">$\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'pre code'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">).\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">each\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">((\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">i\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">) \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">=>\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 6\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">const\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #4FC1FF;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">$\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 7\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">let\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">language\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">parent\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">().\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">attr\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'class'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">).\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">split\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">' '\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">).\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">find\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">((\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">className\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">) \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">=>\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">className\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">startsWith\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'language-'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)) || \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">null\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 8\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">if\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> (\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">language\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">) {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 9\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">language\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">language\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">replace\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'language-'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">''\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">10\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">parent\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">().\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">attr\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'data-language'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">language\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">11\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  }\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">12\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">const\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #4FC1FF;\">torchlightBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">new\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">Block\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">({\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">13\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">code:\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">he\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">decode\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">html\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">()),\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">14\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">language\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">15\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  })\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">16\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">torchlightBlocks\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">push\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">torchlightBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">17\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">attr\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'data-torchlight-id'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">torchlightBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">id\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">18\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">})\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fcode>\n    \u003Cdiv class=\"copy-button__container js-copy-to-clipboard-container\">\n      \u003Cdiv class=\"copy-button__text js-copy-to-clipboard-notification\">Copied!\u003C\u002Fdiv>\n      \u003Cbutton type=\"button\" title=\"Copy to clipboard\" class=\"copy-button__button js-copy-to-clipboard-button\">\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cspan class=\"torchlight-copy-target js-copy-to-clipboard-target\" style=\"display: none\">import { load } from 'cheerio'\nimport he from 'he'\nimport { Block } from '@torchlight-api\u002Fclient'\n\n$('pre code').each((i, code) => {\n  const $code = $(code)\n  let language = $code.parent().attr('class').split(' ').find((className) => className.startsWith('language-')) || null\n  if (language) {\n    language = language.replace('language-', '')\n    $code.parent().attr('data-language', language)\n  }\n  const torchlightBlock = new Block({\n    code: he.decode($code.html()),\n    language\n  })\n  torchlightBlocks.push(torchlightBlock)\n  $code.attr('data-torchlight-id', torchlightBlock.id)\n})\u003C\u002Fspan>\n    \u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Now that we have created each block ready for highlighting, we can make the request to the Torchlight API. The JS library has some features to optimise requests, such as sending chunks, so we use the helper function \u003Ccode>torchlight.highlight()\u003C\u002Fcode> here. We then loop through each highlighted block and update the HTML with the highlighted version, notice how the ID comes in handy here for selecting the correct code block.\u003C\u002Fp>\n\n\n\n\u003Cpre class=\"language-javascript torchlight\" data-language=\"javascript\">\u003Ccode data-torchlight-id=\"6f97fd50-5628-94de-24ec-527fb8e22868\">\u003C!-- Syntax highlighted by torchlight.dev -->\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">1\u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">const\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #4FC1FF;\">highlightedBlocks\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">await\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">torchlight\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">highlight\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">torchlightBlocks\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">2\u003C\u002Fspan> \u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">3\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">highlightedBlocks\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">forEach\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">((\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">highlightedBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">) \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">=>\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">4\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">const\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #4FC1FF;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">$\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">`pre code[data-torchlight-id=\"\u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">${\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">highlightedBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">id\u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">}\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">\"]`\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">5\u003C\u002Fspan> \u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">6\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">parent\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">().\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">addClass\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">highlightedBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">classes\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">7\u003C\u002Fspan> \u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">8\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">html\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">highlightedBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">highlighted\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">9\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">})\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fcode>\n    \u003Cdiv class=\"copy-button__container js-copy-to-clipboard-container\">\n      \u003Cdiv class=\"copy-button__text js-copy-to-clipboard-notification\">Copied!\u003C\u002Fdiv>\n      \u003Cbutton type=\"button\" title=\"Copy to clipboard\" class=\"copy-button__button js-copy-to-clipboard-button\">\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cspan class=\"torchlight-copy-target js-copy-to-clipboard-target\" style=\"display: none\">const highlightedBlocks = await torchlight.highlight(torchlightBlocks)\n\nhighlightedBlocks.forEach((highlightedBlock) => {\n  const $code = $(`pre code[data-torchlight-id=\"${highlightedBlock.id}\"]`)\n\n  $code.parent().addClass(highlightedBlock.classes)\n\n  $code.html(highlightedBlock.highlighted)\n})\u003C\u002Fspan>\n    \u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">That’s it, code snippets have been highlighted in a performant and accurate way. You can see them in action on this very post. I obviously have a lot of custom styling but this is personal preference. The nice thing about Torchlight is that all the styling for the highlighting is done inline, so no need to include any other stylesheets and worry about theming, just change the config property. I do like my implementation of the language identifier though, which you can see a snippet of CSS for below:\u003C\u002Fp>\n\n\n\n\u003Cpre class=\"language-scss torchlight\" data-language=\"scss\">\u003Ccode data-torchlight-id=\"7712c622-277a-03b0-6e35-5d0d8f15fa4a\">\u003C!-- Syntax highlighted by torchlight.dev -->\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 1\u003C\u002Fspan>\u003Cspan style=\"color: #D7BA7D;\">pre.torchlight\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 2\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">position\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">relative\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 3\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">&\u003C\u002Fspan>\u003Cspan style=\"color: #D7BA7D;\">:before\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 4\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">position\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">absolute\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 5\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">top\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">.75rem\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 6\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">right\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">1.25rem\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 7\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">z-index\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">10\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 8\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">color\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">#858585\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 9\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">transition\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">color\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">.25s\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">ease-out\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">10\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">content\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">attr\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">data-language\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">11\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  }\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">12\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fcode>\n    \u003Cdiv class=\"copy-button__container js-copy-to-clipboard-container\">\n      \u003Cdiv class=\"copy-button__text js-copy-to-clipboard-notification\">Copied!\u003C\u002Fdiv>\n      \u003Cbutton type=\"button\" title=\"Copy to clipboard\" class=\"copy-button__button js-copy-to-clipboard-button\">\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cspan class=\"torchlight-copy-target js-copy-to-clipboard-target\" style=\"display: none\">pre.torchlight {\n  position: relative;\n  &:before {\n    position: absolute;\n    top: .75rem;\n    right: 1.25rem;\n    z-index: 10;\n    color: #858585;\n    transition: color .25s ease-out;\n    content: attr(data-language)\n  }\n}\u003C\u002Fspan>\n    \u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Going back to the original blog post that introduced me to Torchlight, I did want to have a go at adding copy-all functionality to my code snippets. The blog’s example was using Statamic and Alpine, so I had to adapt it to my Nuxt use case. The \u003Ccode>copyable\u003C\u002Fcode> Torchlight config option did nothing for me, but the original code was available in the response object under the \u003Ccode>code\u003C\u002Fcode> key. The basic idea is to add a container to each code block which contains text to be displayed when a user clicks the copy button, the copy button itself, and the raw code to copy. I could again use the he library to encode the code so that it would display correctly inside of the \u003Ccode><code>\u003C\u002Fcode> element.\u003C\u002Fp>\n\n\n\n\u003Cpre class=\"language-javascript torchlight\" data-language=\"javascript\">\u003Ccode data-torchlight-id=\"4e8dcd43-ea29-e4ce-a700-add20a1d6869\">\u003C!-- Syntax highlighted by torchlight.dev -->\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 1\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">$\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">`\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 2\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\"><div class=\"copy-button__container js-copy-to-clipboard-container\">\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 3\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">  <div class=\"copy-button__text js-copy-to-clipboard-notification\">Copied!<\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 4\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">  <button\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 5\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">    type=\"button\"\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 6\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">    title=\"Copy to clipboard\"\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 7\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">    class=\"copy-button__button js-copy-to-clipboard-button\"\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 8\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">  >\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 9\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">  <\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">10\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\"><\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">11\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\"><span class=\"torchlight-copy-target js-copy-to-clipboard-target\" style=\"display: none\">\u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">${\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">he\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">encode\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">highlightedBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">}\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">12\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">`\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">).\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">appendTo\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">parent\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">())\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fcode>\n    \u003Cdiv class=\"copy-button__container js-copy-to-clipboard-container\">\n      \u003Cdiv class=\"copy-button__text js-copy-to-clipboard-notification\">Copied!\u003C\u002Fdiv>\n      \u003Cbutton type=\"button\" title=\"Copy to clipboard\" class=\"copy-button__button js-copy-to-clipboard-button\">\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cspan class=\"torchlight-copy-target js-copy-to-clipboard-target\" style=\"display: none\">$(`\n<div class=\"copy-button__container js-copy-to-clipboard-container\">\n  <div class=\"copy-button__text js-copy-to-clipboard-notification\">Copied!<\u002Fdiv>\n  <button\n    type=\"button\"\n    title=\"Copy to clipboard\"\n    class=\"copy-button__button js-copy-to-clipboard-button\"\n  >\n  <\u002Fbutton>\n<\u002Fdiv>\n<span class=\"torchlight-copy-target js-copy-to-clipboard-target\" style=\"display: none\">${he.encode(highlightedBlock.code)}<\u002Fspan>\n`).appendTo($code.parent())\u003C\u002Fspan>\n    \u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">I then wrote some JavaScript for the client side to handle clicking the copy button. I’ve been using classes for this type of thing a lot at Rareloop and it’s really helped me write cleaner code. I’m passing the \u003Ccode>registerCopyToClipboardContainers()\u003C\u002Fcode> function to a Vue mixin, but it could be used quite easily in vanilla js.\u003C\u002Fp>\n\n\n\n\u003Cpre class=\"language-javascript torchlight\" data-language=\"javascript\">\u003Ccode data-torchlight-id=\"20b7e101-c8f8-57fb-1a36-777ba359ee9e\">\u003C!-- Syntax highlighted by torchlight.dev -->\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 1\u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">class\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #4EC9B0;\">CopyToClipboard\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 2\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">constructor\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> (\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">container\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">) {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 3\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">this\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">container\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">container\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 4\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">this\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">notification\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">this\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">container\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">querySelector\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'.js-copy-to-clipboard-notification'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 5\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">this\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">button\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">this\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">container\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">querySelector\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'.js-copy-to-clipboard-button'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 6\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">this\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">textToBeCopied\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">this\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">container\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">parentElement\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">querySelector\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'.js-copy-to-clipboard-target'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 7\u003C\u002Fspan> \u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 8\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">this\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">button\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'click'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, () \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">=>\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 9\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">      \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">navigator\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">clipboard\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">writeText\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">this\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">textToBeCopied\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">innerHTML\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">10\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">      \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">this\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">notification\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">classList\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">add\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'copied'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">11\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">      \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">setTimeout\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(() \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">=>\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">12\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">        \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">this\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">notification\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">classList\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">remove\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'copied'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">13\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">      }, \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">2000\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">14\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    })\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">15\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  }\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">16\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">17\u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">function\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">registerCopyToClipboardContainers\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> () {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">18\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">document\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">querySelectorAll\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'.js-copy-to-clipboard-container'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">).\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">forEach\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">((\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">element\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">) \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">=>\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">19\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">return\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">new\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">CopyToClipboard\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">element\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">20\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  })\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">21\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fcode>\n    \u003Cdiv class=\"copy-button__container js-copy-to-clipboard-container\">\n      \u003Cdiv class=\"copy-button__text js-copy-to-clipboard-notification\">Copied!\u003C\u002Fdiv>\n      \u003Cbutton type=\"button\" title=\"Copy to clipboard\" class=\"copy-button__button js-copy-to-clipboard-button\">\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cspan class=\"torchlight-copy-target js-copy-to-clipboard-target\" style=\"display: none\">class CopyToClipboard {\n  constructor (container) {\n    this.container = container\n    this.notification = this.container.querySelector('.js-copy-to-clipboard-notification')\n    this.button = this.container.querySelector('.js-copy-to-clipboard-button')\n    this.textToBeCopied = this.container.parentElement.querySelector('.js-copy-to-clipboard-target')\n\n    this.button.addEventListener('click', () => {\n      navigator.clipboard.writeText(this.textToBeCopied.innerHTML)\n      this.notification.classList.add('copied')\n      setTimeout(() => {\n        this.notification.classList.remove('copied')\n      }, 2000)\n    })\n  }\n}\nfunction registerCopyToClipboardContainers () {\n  document.querySelectorAll('.js-copy-to-clipboard-container').forEach((element) => {\n    return new CopyToClipboard(element)\n  })\n}\u003C\u002Fspan>\n    \u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">The CSS is then as simple as below. We hide the raw code, and the copied notification, position the icon at the bottom right of our \u003Ccode><pre>\u003C\u002Fcode> element, and show the copied notification when the \u003Ccode>.copied\u003C\u002Fcode> class gets applied.\u003C\u002Fp>\n\n\n\n\u003Cpre class=\"language-scss torchlight\" data-language=\"scss\">\u003Ccode data-torchlight-id=\"2366a87f-03ad-22f5-b83f-374da9673780\">\u003C!-- Syntax highlighted by torchlight.dev -->\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 1\u003C\u002Fspan>\u003Cspan style=\"color: #D7BA7D;\">.torchlight-copy-target\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 2\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">display\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">none\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 3\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 4\u003C\u002Fspan>\u003Cspan style=\"color: #D7BA7D;\">.copy-button__container\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 5\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">position\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">absolute\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 6\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">right\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">1.25rem\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 7\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">bottom\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">.75rem\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 8\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">z-index\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">10\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 9\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">display\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">flex\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">10\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">gap\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">.5rem\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">11\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">align-items\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">center\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">12\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">height\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">2rem\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">13\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">color\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">#858585\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">14\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">transition\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">color\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">.25s\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">ease-out\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">15\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">&\u003C\u002Fspan>\u003Cspan style=\"color: #D7BA7D;\">:hover\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">16\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">color\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">white\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">17\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #D7BA7D;\">.copy-button__button\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">18\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">      \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">background-color\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">white\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">19\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    }\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">20\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  }\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">21\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">22\u003C\u002Fspan>\u003Cspan style=\"color: #D7BA7D;\">.copy-button__text\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">23\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">opacity\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">0\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">24\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">transition\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">opacity\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">.25s\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">ease-out\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">25\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">&\u003C\u002Fspan>\u003Cspan style=\"color: #D7BA7D;\">.copied\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">26\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">opacity\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">1\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">27\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  }\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">28\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">29\u003C\u002Fspan>\u003Cspan style=\"color: #D7BA7D;\">.copy-button__button\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">30\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">width\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">2rem\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">31\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">height\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">2rem\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">32\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">padding\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">0\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">33\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">background-color\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">#858585\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">34\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">border\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">0\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">35\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">cursor\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">pointer\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">36\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">mask-image\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">url\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75' \u002F%3E%3C\u002Fsvg%3E\"\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">);\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">37\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">mask-size\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">contain\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">38\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">mask-position\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">center\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">39\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">mask-repeat\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">no-repeat\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">;\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">40\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">transition\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">: \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">background-color\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #B5CEA8;\">.25s\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">ease-out\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">41\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fcode>\n    \u003Cdiv class=\"copy-button__container js-copy-to-clipboard-container\">\n      \u003Cdiv class=\"copy-button__text js-copy-to-clipboard-notification\">Copied!\u003C\u002Fdiv>\n      \u003Cbutton type=\"button\" title=\"Copy to clipboard\" class=\"copy-button__button js-copy-to-clipboard-button\">\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cspan class=\"torchlight-copy-target js-copy-to-clipboard-target\" style=\"display: none\">.torchlight-copy-target {\n  display: none\n}\n.copy-button__container {\n  position: absolute;\n  right: 1.25rem;\n  bottom: .75rem;\n  z-index: 10;\n  display: flex;\n  gap: .5rem;\n  align-items: center;\n  height: 2rem;\n  color: #858585;\n  transition: color .25s ease-out;\n  &:hover {\n    color: white;\n    .copy-button__button {\n      background-color: white\n    }\n  }\n}\n.copy-button__text {\n  opacity: 0;\n  transition: opacity .25s ease-out;\n  &.copied {\n    opacity: 1\n  }\n}\n.copy-button__button {\n  width: 2rem;\n  height: 2rem;\n  padding: 0;\n  background-color: #858585;\n  border: 0;\n  cursor: pointer;\n  mask-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75' \u002F%3E%3C\u002Fsvg%3E\");\n  mask-size: contain;\n  mask-position: center;\n  mask-repeat: no-repeat;\n  transition: background-color .25s ease-out\n}\u003C\u002Fspan>\n    \u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">The final code for highlighting my post content with Torchlight is below:\u003C\u002Fp>\n\n\n\n\u003Cpre class=\"language-javascript torchlight\" data-language=\"javascript\">\u003Ccode data-torchlight-id=\"0be2203d-a2c9-ed1e-22b9-18184c5b53d3\">\u003C!-- Syntax highlighted by torchlight.dev -->\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 1\u003C\u002Fspan>\u003Cspan style=\"color: #6A9955;\">\u002F\u002F modules\u002Fprepare-wordpress-content\u002Fconvert-code.js\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 2\u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">import\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> { \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">load\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> } \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">from\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'cheerio'\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 3\u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">import\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">he\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">from\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'he'\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 4\u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">import\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> { \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">makeConfig\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">Block\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">torchlight\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">FileCache\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> } \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">from\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'@torchlight-api\u002Fclient'\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 5\u003C\u002Fspan> \u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 6\u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">export\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">async\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">function\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">syntaxHighlightCodeWithTorchlight\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> (\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">postContent\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">) {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 7\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">const\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #4FC1FF;\">regex\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> =\u003C\u002Fspan>\u003Cspan style=\"color: #D16969;\"> \u002F<pre.\u003C\u002Fspan>\u003Cspan style=\"color: #D7BA7D;\">*?\u003C\u002Fspan>\u003Cspan style=\"color: #D16969;\">>\u002F\u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">g\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 8\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">const\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #4FC1FF;\">matches\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">postContent\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">match\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">regex\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\"> 9\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">if\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> (!\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">matches\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">) {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">10\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">return\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">postContent\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">11\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  }\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">12\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">const\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #4FC1FF;\">$\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">load\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">postContent\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">null\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">false\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">13\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">$\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'pre'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">).\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">removeClass\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'wp-block-code'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">14\u003C\u002Fspan> \u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">15\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">torchlight\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">init\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">16\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">await\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">makeConfig\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">({\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">17\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">      \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">theme:\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'dark-plus'\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">18\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    }),\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">19\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">new\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">FileCache\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">({\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">20\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">      \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">directory:\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'.\u002F.torchlight-cache'\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">21\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    })\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">22\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  )\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">23\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">const\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #4FC1FF;\">torchlightBlocks\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = []\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">24\u003C\u002Fspan> \u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">25\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">$\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'pre code'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">).\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">each\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">((\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">i\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">) \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">=>\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">26\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">const\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #4FC1FF;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">$\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">27\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">let\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">language\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">parent\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">().\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">attr\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'class'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">).\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">split\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">' '\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">).\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">find\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">((\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">className\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">) \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">=>\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">className\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">startsWith\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'language-'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)) || \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">null\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">28\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">if\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> (\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">language\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">) {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">29\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">      \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">language\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">language\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">replace\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'language-'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, \u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">''\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">30\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">      \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">parent\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">().\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">attr\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'data-language'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">language\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">31\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    }\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">32\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">const\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #4FC1FF;\">torchlightBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">new\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">Block\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">({\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">33\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">      \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">code:\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">he\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">decode\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">html\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">()),\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">34\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">      \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">language\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">35\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    })\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">36\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">torchlightBlocks\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">push\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">torchlightBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">37\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">attr\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">'data-torchlight-id'\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">, \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">torchlightBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">id\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">38\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  })\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">39\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">const\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #4FC1FF;\">highlightedBlocks\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">await\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">torchlight\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">highlight\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">torchlightBlocks\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">40\u003C\u002Fspan> \u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">41\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">highlightedBlocks\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">forEach\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">((\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">highlightedBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">) \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">=>\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> {\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">42\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">const\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #4FC1FF;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> = \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">$\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">`pre code[data-torchlight-id=\"\u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">${\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">highlightedBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">id\u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">}\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">\"]`\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">43\u003C\u002Fspan> \u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">44\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">parent\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">().\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">addClass\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">highlightedBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">classes\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">45\u003C\u002Fspan> \u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">46\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">html\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">highlightedBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">highlighted\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">47\u003C\u002Fspan> \u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">48\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">    \u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">$\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">`\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">49\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">    <div class=\"copy-button__container js-copy-to-clipboard-container\">\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">50\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">      <div class=\"copy-button__text js-copy-to-clipboard-notification\">Copied!<\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">51\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">      <button\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">52\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">        type=\"button\"\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">53\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">        title=\"Copy to clipboard\"\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">54\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">        class=\"copy-button__button js-copy-to-clipboard-button\"\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">55\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">      >\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">56\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">      <\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">57\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">58\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">    <span class=\"torchlight-copy-target js-copy-to-clipboard-target\" style=\"display: none\">\u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">${\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">he\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">encode\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">highlightedBlock\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">)\u003C\u002Fspan>\u003Cspan style=\"color: #569CD6;\">}\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">59\u003C\u002Fspan>\u003Cspan style=\"color: #CE9178;\">    `\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">).\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">appendTo\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">(\u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">$code\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">parent\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">())\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">60\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  })\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">61\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">  \u003C\u002Fspan>\u003Cspan style=\"color: #C586C0;\">return\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\"> \u003C\u002Fspan>\u003Cspan style=\"color: #9CDCFE;\">$\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">.\u003C\u002Fspan>\u003Cspan style=\"color: #DCDCAA;\">html\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">()\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cdiv class=\"line\">\u003Cspan style=\"color:#858585; text-align: right; -webkit-user-select: none; user-select: none;\" class=\"line-number\">62\u003C\u002Fspan>\u003Cspan style=\"color: #D4D4D4;\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fcode>\n    \u003Cdiv class=\"copy-button__container js-copy-to-clipboard-container\">\n      \u003Cdiv class=\"copy-button__text js-copy-to-clipboard-notification\">Copied!\u003C\u002Fdiv>\n      \u003Cbutton type=\"button\" title=\"Copy to clipboard\" class=\"copy-button__button js-copy-to-clipboard-button\">\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cspan class=\"torchlight-copy-target js-copy-to-clipboard-target\" style=\"display: none\">\u002F\u002F modules\u002Fprepare-wordpress-content\u002Fconvert-code.js\nimport { load } from 'cheerio'\nimport he from 'he'\nimport { makeConfig, Block, torchlight, FileCache } from '@torchlight-api\u002Fclient'\n\nexport async function syntaxHighlightCodeWithTorchlight (postContent) {\n  const regex = \u002F<pre.*?>\u002Fg\n  const matches = postContent.match(regex)\n  if (!matches) {\n    return postContent\n  }\n  const $ = load(postContent, null, false)\n  $('pre').removeClass('wp-block-code')\n\n  torchlight.init(\n    await makeConfig({\n      theme: 'dark-plus'\n    }),\n    new FileCache({\n      directory: '.\u002F.torchlight-cache'\n    })\n  )\n  const torchlightBlocks = []\n\n  $('pre code').each((i, code) => {\n    const $code = $(code)\n    let language = $code.parent().attr('class').split(' ').find((className) => className.startsWith('language-')) || null\n    if (language) {\n      language = language.replace('language-', '')\n      $code.parent().attr('data-language', language)\n    }\n    const torchlightBlock = new Block({\n      code: he.decode($code.html()),\n      language\n    })\n    torchlightBlocks.push(torchlightBlock)\n    $code.attr('data-torchlight-id', torchlightBlock.id)\n  })\n  const highlightedBlocks = await torchlight.highlight(torchlightBlocks)\n\n  highlightedBlocks.forEach((highlightedBlock) => {\n    const $code = $(`pre code[data-torchlight-id=\"${highlightedBlock.id}\"]`)\n\n    $code.parent().addClass(highlightedBlock.classes)\n\n    $code.html(highlightedBlock.highlighted)\n\n    $(`\n    <div class=\"copy-button__container js-copy-to-clipboard-container\">\n      <div class=\"copy-button__text js-copy-to-clipboard-notification\">Copied!<\u002Fdiv>\n      <button\n        type=\"button\"\n        title=\"Copy to clipboard\"\n        class=\"copy-button__button js-copy-to-clipboard-button\"\n      >\n      <\u002Fbutton>\n    <\u002Fdiv>\n    <span class=\"torchlight-copy-target js-copy-to-clipboard-target\" style=\"display: none\">${he.encode(highlightedBlock.code)}<\u002Fspan>\n    `).appendTo($code.parent())\n  })\n  return $.html()\n}\n\u003C\u002Fspan>\n    \u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">For all of the code I added, \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fjoebailey26\u002Fjoebaileyxyz\u002Fcommit\u002Fd18153717444fa23a755903209a2b9bf7e378e56\" target=\"_blank\">check out this commit\u003Cpicture>\u003Cimg decoding=\"async\" loading=\"lazy\" width=\"16\" height=\"16\" src=\"\u002Fcdn-cgi\u002Fimage\u002Fformat=auto,quality=80,fit=scale-down,width=32\u002Fimg\u002Ffavicons\u002Fgithub.com.png\" alt=\"github.com favicon\">\u003C\u002Fpicture>\u003C\u002Fa>.\u003C\u002Fp>",8,{"icons":14,"project_url":14,"github":14},"","https:\u002F\u002Fjoebailey.xyz\u002Fcdn-cgi\u002Fimage\u002Fformat=auto,quality=80,fit=scale-down,width=1200\u002Fhttps:\u002F\u002Fcms.joebailey.xyz\u002Fmedia\u002Fe1e861af4f6259527d0fc8ad9790f0070bbbbc9e3026b722390c4894a9472d28\u002Fe1e861af4f625952-NVIDIA-GeForce-Overlay-DT-2023-06-16-14.07.00-1.png",[17,96,190,265,335],[18,26,34,42,50,54,61,68,75,86],{"title":19,"excerpt":20,"slug":22,"date":23,"readingTime":24,"acf":25},"How to download a Google Sheet on a cron",{"plain":21},"Working with Google Cloud can be confusing for beginners and sometimes all you need is to manipulate a Google Sheet. I have a couple of use cases for downloading a sheet and uploading a sheet. I haven’t quite figured out the upload part yet, but I have got downloading to work. I’ve decided to write […]","how-to-download-a-google-sheet-on-a-cron",["Date","2024-02-22T00:00:00.000Z"],4,{"icons":14,"project_url":14,"github":14},{"title":27,"excerpt":28,"slug":30,"date":31,"readingTime":32,"acf":33},"How to add Custom Variables to LiveChat",{"plain":29},"I had a task to add a Google Analytics ID to the user profile in LiveChat. We wanted to be able to match up the person we were chatting to with the analytics data in Google. This looked really simple according to their docs. You can just use the following function: What their docs failed […]","how-to-add-custom-variables-to-livechat",["Date","2024-01-16T00:00:00.000Z"],1,{"icons":14,"project_url":14,"github":14},{"title":35,"excerpt":36,"slug":38,"date":39,"readingTime":40,"acf":41},"This one Nuxt trick prevents broken deploys",{"plain":37},"Have you ever experienced broken deploys while using Nuxt? It can be frustrating when your build encounters errors, but still proceeds to deploy all the files, resulting in broken pages on your website. Fortunately, I discovered a handy Nuxt trick that prevents such broken deploys and ensures a more reliable deployment process. In my case, […]","this-one-nuxt-trick-prevents-broken-deploys",["Date","2023-07-12T00:00:00.000Z"],2,{"icons":14,"project_url":14,"github":14},{"title":43,"excerpt":44,"slug":46,"date":47,"readingTime":48,"acf":49},"The importance of read time for blog posts and how to automatically generate it using Node.js",{"plain":45},"In today’s fast-paced digital world, attention spans are getting shorter, and users often have limited time to consume content. As a result, providing readers with an estimated reading time can be a valuable feature for any blog or content-based website. Why having a read time for a blog post is important Automatically generate a read […]","the-importance-of-read-time-for-blog-posts-and-how-to-automatically-generate-it-using-node-js",["Date","2023-06-20T00:00:00.000Z"],3,{"icons":14,"project_url":14,"github":14},{"title":4,"excerpt":51,"slug":8,"date":52,"readingTime":12,"acf":53},{"plain":7},["Date","2023-06-16T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":55,"excerpt":56,"slug":58,"date":59,"readingTime":24,"acf":60},"Adding Algolia search to my 404 page",{"plain":57},"My site is pretty small, so I don’t really need search functionality, but the Netlify Algolia plugin looked easy enough to use and a bit of fun. Diving into the docs, I got a bit overwhelmed. Algolia’s breadth of capabilities is huge. They definitely seem like the go-to for fully customisable search on a Jamstack […]","adding-algolia-search-to-my-404-page",["Date","2023-06-13T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":62,"excerpt":63,"slug":65,"date":66,"readingTime":32,"acf":67},"Dragging to Scroll with JavaScript",{"plain":64},"My portfolio has some cards to showcase projects and blog posts. On mobile, these cards display in a horizontal slider, which is easy enough to scroll on a touchscreen, or trackpad, but what if someone is viewing the website at a small size on a device with a mouse? Well they can of course use […]","dragging-to-scroll-with-javascript",["Date","2023-03-30T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":69,"excerpt":70,"slug":72,"date":73,"readingTime":40,"acf":74},"How To Secure your server using UFW and Cloudflare",{"plain":71},"This guide will help you use UFW (uncomplicated firewall) to block all traffic to your server other than traffic coming via Cloudflare, or for essential operations such as FTP and SSH. Why would you want to do this? Cloudflare will protect your site from all manner of attacks. However, your server may still be vulnerable. […]","how-to-secure-your-server-using-ufw-and-cloudflare",["Date","2021-01-11T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":76,"excerpt":77,"slug":79,"date":80,"readingTime":32,"acf":81},"Adobe XD Challenge Calculator",{"plain":78},"The third challenge was to create a calculator. I wanted to practise my CSS art and so chose an image of an old Casio calculator and tried to recreate it as closely as possible. It was quite a challenge creating the code for the calculator to function. It wasn’t as simple as just adding numbers […]","adobe-xd-challenge-calculator",["Date","2020-08-06T00:00:00.000Z"],{"icons":82,"project_url":84,"github":85},[83],"Vue","https:\u002F\u002Fvue-calculator-joe.netlify.app","https:\u002F\u002Fgithub.com\u002Fjoebailey26\u002FVue-Calculator",{"title":87,"excerpt":88,"slug":90,"date":91,"readingTime":32,"acf":92},"Adobe XD Challenge Fitness App",{"plain":89},"The second challenge was to create a fitness app. I chose to make an activity tracker. I took inspiration from Lifelog, an app by Sony that I used for many years. I used the Google Maps API and created a component in Vue for the activities.","adobe-xd-challenge-fitness-app",["Date","2020-08-06T00:00:00.000Z"],{"icons":93,"project_url":94,"github":95},[83],"https:\u002F\u002Fjoe-exercise.netlify.app","https:\u002F\u002Fgithub.com\u002Fjoebailey26\u002FExercise-App",[97,107,114,121,132,141,151,158,169,180],{"title":98,"excerpt":99,"slug":101,"date":102,"readingTime":32,"acf":103},"Adobe XD Challenge – Music Player",{"plain":100},"Me and Eleanor Morgan participated in the Adobe XD Challenge. I wanted to use Vue.js rather than practise my skills in XD as I view myself as more of a developer than a designer. The first challenge was to create a music player. I played around with the audio API and used some CSS animations.","adobe-xd-challenge-music-player",["Date","2020-08-06T00:00:00.000Z"],{"icons":104,"project_url":105,"github":106},[83],"http:\u002F\u002Fmusic-player.joebailey.xyz\u002F","https:\u002F\u002Fgithub.com\u002Fjoebailey26\u002Fmusic-player",{"title":108,"excerpt":109,"slug":111,"date":112,"readingTime":48,"acf":113},"React and Vue re-visited",{"plain":110},"After re-creating my portfolio with Gatsby (which uses React) and building an app for a client in Vue I feel I have more knowledge about the two JavaScript frameworks to give an informed opinion on both. When I was first starting out using these sort of frameworks I wrote this article on my thoughts. I […]","react-and-vue-re-visited",["Date","2020-05-09T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":115,"excerpt":116,"slug":118,"date":119,"readingTime":40,"acf":120},"What is a Front-End Developer?",{"plain":117},"I’ve been asking myself this question a lot recently after applying for quite a few web development placements. The experience has been enlightening, teaching me a great deal about the industry. I’ve been reflecting on what I’m good at in web development and what I enjoy. Whilst freelancing I’d describe myself as a Full-Stack Developer. […]","what-is-a-front-end-developer",["Date","2020-05-07T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":122,"excerpt":123,"slug":125,"date":126,"readingTime":32,"acf":127},"Points Of Interest",{"plain":124},"Following on from developing the HitTastic! site we had to create a site in PHP that allows users to view POI’s stored in a database, and contribute to this database. We had to do some basic styles to go along with it.","points-of-interest",["Date","2020-04-28T00:00:00.000Z"],{"icons":128,"project_url":130,"github":131},[129],"PHP","https:\u002F\u002Fpoi.joebailey.xyz\u002F","https:\u002F\u002Fgithub.com\u002Fjoebailey26\u002FPointsOfInterest-MySQLi",{"title":133,"excerpt":134,"slug":136,"date":137,"readingTime":32,"acf":138},"HitTastic!",{"plain":135},"In my second year of university, I did a PHP unit where we were tasked with creating a site showing the number one songs from a certain year. We had to make a login, connect to a database, and perform a search.","hittastic",["Date","2020-04-28T00:00:00.000Z"],{"icons":139,"project_url":14,"github":140},[129],"https:\u002F\u002Fgithub.com\u002Fjoebailey26\u002FPHP-Lessons",{"title":142,"excerpt":143,"slug":145,"date":146,"readingTime":32,"acf":147},"Hangman",{"plain":144},"Whilst I was searching for a placement I had a few tasks to complete for various roles I was interviewing for. One of these tasks was to create a simple Hangman game in PHP.","hangman",["Date","2020-04-28T00:00:00.000Z"],{"icons":148,"project_url":149,"github":150},[129],"https:\u002F\u002Fhangman.joebailey.xyz\u002F","https:\u002F\u002Fgithub.com\u002Fjoebailey26\u002FHangman",{"title":152,"excerpt":153,"slug":155,"date":156,"readingTime":40,"acf":157},"Re-creating my portfolio with Gatsby",{"plain":154},"You may have read Re-creating my portfolio with React where I talked about my experiences converting my simple static portfolio into a React website, turning reusable objects on the page into React components. This inspired me to learn Gatsby, a static site generator that uses React. I was previously using my a category on my […]","re-creating-my-portfolio-with-gatsby",["Date","2020-04-27T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":159,"excerpt":160,"slug":162,"date":163,"readingTime":32,"acf":164},"Firebase Chat App",{"plain":161},"In my first year of University I had a go at creating a chat app using Firebase following my lecturers instructions. I was the only person in my class to succeed. Go ahead, type something.","firebase-chat-app",["Date","2020-04-24T00:00:00.000Z"],{"icons":165,"project_url":167,"github":168},[166],"Firebase","https:\u002F\u002Fchat-app-a7f51.firebaseapp.com\u002F","https:\u002F\u002Fgithub.com\u002Fjoebailey26\u002Ffirebase_chat_app",{"title":170,"excerpt":171,"slug":173,"date":174,"readingTime":32,"acf":175},"React Tic Tac Toe",{"plain":172},"My first venture into the world of React was building this Tic Tac Toe game using the React Docs. It also helped me get to grips with CodePen for creating small little projects.","react-tic-tac-toe",["Date","2020-04-24T00:00:00.000Z"],{"icons":176,"project_url":178,"github":179},[177],"React","https:\u002F\u002Fcodepen.io\u002Fjoebailey26\u002Fpen\u002FpoogwjN","https:\u002F\u002Fgithub.com\u002Fjoebailey26\u002FReact-Tic-Tac-Toe",{"title":181,"excerpt":182,"slug":184,"date":185,"readingTime":32,"acf":186},"Vue To-Do List",{"plain":183},"After experimenting using Vue in my Photography Website I decided to have a go at making a To-Do List. You can create and delete To Dos but they don’t currently persist. This is something I wish to add in the future.","vue-to-do-list",["Date","2020-04-24T00:00:00.000Z"],{"icons":187,"project_url":188,"github":189},[83],"https:\u002F\u002Frelaxed-cori-9310e4.netlify.app\u002F","https:\u002F\u002Fgithub.com\u002Fjoebailey26\u002FVue-To-Do-List",[191,202,209,216,223,230,237,244,251,258],{"title":192,"excerpt":193,"slug":195,"date":196,"readingTime":32,"acf":197},"To-Do List",{"plain":194},"As part of my university course we were tasked with creating a To Do List in Vanilla JavaScript. For many, it was also an introduction into using NPM and BrowserSync for the first time. We also experimented with using Local Browser Storage.","to-do-list",["Date","2020-04-24T00:00:00.000Z"],{"icons":198,"project_url":200,"github":201},[199],"Custom","https:\u002F\u002Fcodepen.io\u002Fjoebailey26\u002Fpen\u002FwvvbBpN","https:\u002F\u002Fgithub.com\u002Fjoebailey26\u002FJavaScript-To-Do-List",{"title":203,"excerpt":204,"slug":206,"date":207,"readingTime":32,"acf":208},"Re-creating my Portfolio with React",{"plain":205},"I’ve just finished recreating my portfolio using React. There aren’t very many visual changes apart from changing the hover effects a little. The site features a lot of repetitive content, such as portfolio items. React is good for this because I can create a component for the item which minimizes the amount of coding required. […]","re-creating-my-portfolio-with-react",["Date","2020-02-03T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":210,"excerpt":211,"slug":213,"date":214,"readingTime":40,"acf":215},"A new Portfolio with Vue.js – Joe Bailey Photography",{"plain":212},"To mark the beginning of my second year at University I thought that I would try learning a new skill, namely Vue.js. I usually struggle to learn something if I don’t see any real practical application for it, but this time I figured I could turn my photography portfolio into a dynamic Vue.js enhanced page. […]","a-new-portfolio-with-vue-js",["Date","2019-12-07T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":217,"excerpt":218,"slug":220,"date":221,"readingTime":32,"acf":222},"Cookie Consent – Joe Bailey Photography",{"plain":219},"Over the past couple of months, I’ve added some Analytics software to my site such as Google Analytics and Facebook Pixel. As my website serves customers in the EU, the Cookie Law applies. I have used JavaScript to ensure that cookies are not fired until the user has explicitly accepted them on the website. A […]","cookie-consent",["Date","2019-12-07T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":224,"excerpt":225,"slug":227,"date":228,"readingTime":40,"acf":229},"Re-doing my portfolio",{"plain":226},"I built my web design portfolio site over the Christmas of 2018 and decided it needed a bit of a refresh during the summer. I got in touch with the @_tashhockey, the person behind Honest Feedback, to give my website a bit of a review. She made some really good points and brought to light […]","re-doing-my-portfolio",["Date","2019-10-07T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":231,"excerpt":232,"slug":234,"date":235,"readingTime":32,"acf":236},"Animated mobile menu",{"plain":233},"In quite a few of my projects I’ve needed a quick and easy way of making a menu which scales onto mobile. I like the style that android apps have; the animated drawer, so I have replicated this. The menu is swipe aware using Hammer.js which means if you swipe right on mobile then the […]","animated-mobile-menu",["Date","2019-09-30T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":238,"excerpt":239,"slug":241,"date":242,"readingTime":32,"acf":243},"No scroll whilst lightbox is open – Joe Bailey Photography",{"plain":240},"I read the following article by CSS Tricks https:\u002F\u002Fcss-tricks.com\u002Fprevent-page-scrolling-when-a-modal-is-open\u002F and decided that my website shouldn’t scroll whilst the lightbox is shown, i.e. on the Blog and the Memories pages when an image is clicked. I use the Featherlight plugin on my Blog and the equivalent for the Memories page. I added the following CSS to […]","no-scroll-whilst-lightbox-is-open",["Date","2019-08-01T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":245,"excerpt":246,"slug":248,"date":249,"readingTime":32,"acf":250},"Dark Mode – Joe Bailey Photography",{"plain":247},"I read the following article: https:\u002F\u002Fwww.howtogeek.com\u002F434592\u002Fwhat%E2%80%99s-new-in-chrome-76-arriving-july-30th\u002F and was excited by “Automatic Dark Mode is Coming to Websites”. I decided to give it a shot. I read up on the Media Queries Level 5 spec and added the “prefers-color-scheme” media query to my CSS. I downloaded a copy of Chrome Canary to test the website, as […]","dark-mode",["Date","2019-07-29T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":252,"excerpt":253,"slug":255,"date":256,"readingTime":32,"acf":257},"Joe Bailey Photography is now a Progressive Web App",{"plain":254},"Making my site work offline had been on my bucket list for a while. It was the last thing in Google Chrome’s Lighthouse test to complete. The site now has close to 100 scores across all areas in Google Chrome’s Lighthouse Audit. I read up on Service Workers on both Google Developers and MDN Web […]","joe-bailey-photography-is-now-a-progressive-web-app",["Date","2019-07-18T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":259,"excerpt":260,"slug":262,"date":263,"readingTime":32,"acf":264},"Data Flow Diagrams",{"plain":261},"When we first started doing Data Flow Diagrams at the start of the semester I thought they were the worst thing in the world. However, as I came to understand them more and start to think about more real-world business problems that I was encountering such as creating a website for my Dad or as […]","data-flow-diagrams",["Date","2019-04-19T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},[266,272,279,286,293,300,307,314,321,328],{"title":166,"excerpt":267,"slug":269,"date":270,"readingTime":32,"acf":271},{"plain":268},"During our Web Technologies practical lessons, we have to follow a set of instructions to create a website or simple script. The lecturer has hosted the notes for the unit on Firebase. I’d looked into Firebase before but couldn’t understand how to use it. However, when an extended task came up in lesson I gave […]","firebase",["Date","2019-04-19T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":273,"excerpt":274,"slug":276,"date":277,"readingTime":32,"acf":278},"Angular, React, Vue, Node",{"plain":275},"Whilst working on various projects this semester I’ve encountered the following technologies: Angular, React, Vue, and Node. I’ve experimented with them to some extent and found Node Package Manager quite useful. Initially, when I first heard about them I thought they were JavaScript Libraries like JQuery, however, they are far from it. Each technology is […]","angular-react-vue-node",["Date","2019-04-19T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":280,"excerpt":281,"slug":283,"date":284,"readingTime":48,"acf":285},"New Laptop, Deployment Manager, NAS and VPN",{"plain":282},"I’d wanted to buy a new laptop for ages as mine was quite heavy and I wanted to take it to lectures, and store it in my bag but couldn’t. This meant I was looking for something quite light. I also wanted something powerful as I do a lot of media production and web development. […]","new-laptop-deployment-manager-nas-and-vpn",["Date","2019-04-16T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":287,"excerpt":288,"slug":290,"date":291,"readingTime":32,"acf":292},"Git",{"plain":289},"As part of my studies at Solent, we were introduced to using Git in our workflow. Git is useful as it means mistakes can be corrected by rolling back the code to a version that worked. I’d come across this before at Fluid Studios Ltd. where they were using Git Kraken, however, I’d never really […]","git",["Date","2019-04-16T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":294,"excerpt":295,"slug":297,"date":298,"readingTime":32,"acf":299},"Web Design Portfolio",{"plain":296},"I’d been meaning to update my portfolio site for quite a while as I wasn’t really happy with the design. The long Christmas break gave me a chance to do just that. I was inspired by this template. In my lectures, we’d been learning about Figma and UX design. I wanted to use this redesign […]","web-design-portfolio",["Date","2019-02-06T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":301,"excerpt":302,"slug":304,"date":305,"readingTime":32,"acf":306},"Transferring my hosting package from 1and1 IONOS to iPage",{"plain":303},"I think transferring hosting provider was the single greatest nightmare I’ve had in my life. I bought a few domains with 1and1, hoping to get SSL certificates that were advertised, however you only get one SSL certificate per contract. I’d have to create multiple contracts for all my domains, and then would not be able […]","transferring-my-hosting-package-from-1and1-ionos-to-ipage",["Date","2019-02-06T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":308,"excerpt":309,"slug":311,"date":312,"readingTime":32,"acf":313},"Website Updates: Portfolio and Memories – Joe Bailey Photography",{"plain":310},"After creating my Web Design portfolio site and transferring my hosting package I was in the mood to do some web design. I’d been meaning to add a portfolio to my photography site for a long while. Whilst making the photography portfolio I created some cool code to create a gallery of images which you […]","website-updates-portfolio-and-memories",["Date","2019-02-01T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":315,"excerpt":316,"slug":318,"date":319,"readingTime":32,"acf":320},"Don’t forget your future self – Dan Benham",{"plain":317},"I attended a talk by Dan Benham, set up by the university, which I found really interesting. He works for Studio Republic in Winchester. He was tired of working for corporate clients and started an ethical business to combat this. His business helps charities and other ethical entities with their creative tasks. An interesting question […]","dont-forget-your-future-self-dan-benham",["Date","2019-01-31T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":322,"excerpt":323,"slug":325,"date":326,"readingTime":48,"acf":327},"Web Components using PHP – Joe Bailey Photography",{"plain":324},"In my Web Design and Development course, we touched on using web components and live style guides. This is the practice of having a set of components and styles that can be reused across your website. The advantage is that when something gets updated it rolls out across the whole site at the same time. […]","web-components-using-php",["Date","2018-11-22T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":329,"excerpt":330,"slug":332,"date":333,"readingTime":32,"acf":334},"Wix Vs WordPress",{"plain":331},"Now I’ve come across two instances of Wix in the past couple of months. Neither website was optimised for mobile. Wix has the option there, but it’s incredibly hard to use, you can change one thing and it will delete half the content on your site. The drag and drop editor is extremely slow, it’s […]","wix-vs-wordpress",["Date","2018-11-22T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},[336,343,350,357,364,371,378,385,394,401],{"title":337,"excerpt":338,"slug":340,"date":341,"readingTime":40,"acf":342},"Flickr changes to free accounts – Joe Bailey Photography",{"plain":339},"You might notice that my website uses Flickr to display most of the images. This is done by using an iframe of the Flickr slideshow. The reason I chose to use Flickr to display my images is that I didn’t have much experience coding at the time (I’m still not a code genius). It was […]","flickr-changes-to-free-accounts",["Date","2018-11-22T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":344,"excerpt":345,"slug":347,"date":348,"readingTime":32,"acf":349},"Logo design for a Web Developer",{"plain":346},"My first project at university was to write a report on how I designed a set of logos to brand myself as a web developer. We had to include research, feedback and final designs. I got a C1 on this report as I found it quite hard being the first one I’ve done at university. […]","logo-design-for-a-web-developer",["Date","2018-11-09T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":351,"excerpt":352,"slug":354,"date":355,"readingTime":32,"acf":356},"rankingCoach",{"plain":353},"I attended a workshop in Hotel Mercure Southampton Centre Dolphin on rankingCoach by Alasdair Stone. It was a very interesting event and we learnt about how to optimize website for search engines. We also learnt how to use tools such as Google My Business. I came away from the event with a lot of notes […]","rankingcoach",["Date","2018-11-08T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":358,"excerpt":359,"slug":361,"date":362,"readingTime":40,"acf":363},"Material Design",{"plain":360},"“Make beautiful products, faster. Material is a design system – backed by open-source code – that helps teams build digital experiences” Material.io Material is a design language created by Google in 2014 for the Android platform. It has unified Android apps under a single design format. This has helped to give the Android platform a […]","material-design",["Date","2018-10-17T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":365,"excerpt":366,"slug":368,"date":369,"readingTime":32,"acf":370},"Barcamp Southampton",{"plain":367},"I went to a Barcamp in Southampton, which consists of people giving talks on things they find interesting, with a heavy bias on technology. The normal talks last 45 minutes to an hour. They also have an opportunity to give lightning talks after lunch which last about 10 minutes and can be about anything. I […]","barcamp-soton",["Date","2018-10-07T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":372,"excerpt":373,"slug":375,"date":376,"readingTime":40,"acf":377},"CSS Grid",{"plain":374},"“CSS Grid Layout is shaping up to be the layout tool we’ve always wanted on the web.” Stacy Kvernmo (September 19, 2016) In the early days of the web, developers laid things out using tables. Tables are only designed for tabular data and developers were splitting GIFs up to lay them out and create visually […]","css-grid",["Date","2018-10-04T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":379,"excerpt":380,"slug":382,"date":383,"readingTime":32,"acf":384},"Web Design and Development",{"plain":381},"I’ve just started my first proper job in the Web Design and Development industry at Fluid Studios Ltd and it’s going really well. I’m also starting to get ready for university, the next big exciting chapter in my life.","web-design-and-development",["Date","2018-06-08T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":386,"excerpt":387,"slug":389,"date":390,"readingTime":32,"acf":391},"joebailey.xyz",{"plain":388},"I’ve started creating a site to showcase my work as a web design professional. Once finished it will be live at joebailey.xyz I’m not really feeling it as much as my photography website, I don’t think the design flows that well, and it doesn’t really optimize for mobile all that well either. I think maybe […]","joebailey-xyz",["Date","2018-03-21T00:00:00.000Z"],{"icons":392,"project_url":14,"github":14},[177,199,393],"Netlify",{"title":395,"excerpt":396,"slug":398,"date":399,"readingTime":32,"acf":400},"New Blog – Joe Bailey Photography",{"plain":397},"I’ve finally started phase 3 of the redesign of my website. Phase one was to create it, learning lots of code along the way to prepare me for my University course, and also to give me the creative freedom that I hadn’t yet been able to achieve with various website builders. During phase 2 I […]","new-blog",["Date","2018-03-21T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},{"title":402,"excerpt":403,"slug":405,"date":406,"readingTime":32,"acf":407},"Welcome – Joe Bailey Photography",{"plain":404},"Hello everyone, Welcome to my new website. Sorry for the delay, it’s been a year in the making and there’s still much to do, like implement a store and add my backlog of images to the gallery. If you encounter any problems whilst browsing, please don’t hesitate to contact me, and I’ll see what I […]","welcome",["Date","2018-01-20T00:00:00.000Z"],{"icons":14,"project_url":14,"github":14},1792776054990]