feat: add tokyonight for prism

src/assets/css/blocks/prism.css

@@ -0,0 +1,68 @@
+/* Adapted from the Tokyo Night theme on GitHub
+ * https://github.com/folke/tokyonight.nvim/blob/main/extras/prism/tokyonight_night.js
+ */
+
+pre:has(code) {
+  background-color: #1a1b26;
+  border-radius: 0.5em;
+  padding: 1em;
+  color: #c0caf5;
+}
+
+pre:has(code) .token.prolog,
+pre:has(code) .token.builtin {
+  color: #f7768e;
+}
+
+pre:has(code) .token.function {
+  color: #7aa2f7;
+}
+
+pre:has(code) .token.symbol {
+  color: #2ac3de;
+}
+
+pre:has(code) .token.punctuation {
+  color: #bb9af7;
+}
+
+pre:has(code) .token.string,
+pre:has(code) .token.char,
+pre:has(code) .token.tag,
+pre:has(code) .token.selector {
+  color: #9ece6a;
+}
+
+pre:has(code) .token.keyword {
+  color: #9d7cd8;
+}
+
+pre:has(code) .token.operator {
+  color: #89ddff;
+}
+
+pre:has(code) .token.constant,
+pre:has(code) .token.boolean {
+  color: #ff9e64;
+}
+
+pre:has(code) .token.variable {
+  color: #c0caf5;
+}
+
+pre:has(code) .token.comment {
+  color: #565f89;
+  font-style: italic;
+}
+
+pre:has(code) .token.attr-name {
+  color: #73daca;
+}
+
+pre:has(code) .token.class-name {
+  color: #ff757f;
+}
+
+pre:has(code) .token.plain-text {
+  color: #c0caf5;
+}

src/assets/css/global/global-styles.css

@@ -122,7 +122,7 @@ hr {
   color: var(--color-surface);
 }
 
-code {
+:not(pre) > code {
   background-color: var(--color-surface);
   color: var(--color-primary);
   border-color: var(--color-border);

src/content/posts/my-vim-setup-04-2021.md

@@ -28,119 +28,119 @@ Plus it has “neo” in the name, and that’s plain cool.
 
 This section captures what I would consider to be the basics of vim: clipboard behaviour, backspace behaviour, spellchecking, all that jazz.
 
-```
+```vim
 set nocompatible
 ```
 
 This tells vim to use `vim` settings rather than `vi`. To be honest I don’t full understand what this does, but see it enough in other `.vimrc` I decided to include it.
 
-```
+```vim
 set number
 set relativenumber
 ```
 
 This enables line numbers. You’re gonna need those if you’re developin’. `relativenumber` shows relative line numbers from the currently highlighted line.
 
-```
+```vim
 set title
 ```
 
 Sets the terminal window’s title to be the file currently being edited (I think).
 
-```
+```vim
 set scrolloff=2
 ```
 
 This changes the scroll offset, or in other words when `vim` decides to start scrolling. In my case, once I am on the 2nd to last line of my screen and I want to scroll down (or up), it will scroll the screen upwards and move to the next line.
 
-```
+```vim
 set backspace=indent,eol,start
 ```
 
 This makes the BACKSPACE key behave in a sane way while using `vim`. I don’t know why this behaviour isn’t default — probably some holdover from the “old days”.
 
-```
+```vim
 set nowrap
 ```
 
 No linewrapping allowed. I switch around this setting from time to time.
 
-```
+```vim
 set noerrorbells
 set belloff=all
 ```
 
 I don’t see how playing a sound when there is an error is helpful — like when I try to scroll past the end or beginning of the file. Turn that off.
 
-```
+```vim
 set hlsearch
 ```
 
 This will highlight all search matches on any open buffers, like when using `/` to search for text.
 
-```
+```vim
 set incsearch
 ```
 
 As I start typing when using `/`, it will highlight things as they are matched (before pressing ENTER).
 
-```
+```vim
 set signcolumn=yes
 ```
 
 This enables the sign column in `vim`, which can be used by plugins to highlight lines with errors, warnings, and so on.
 
-```
+```vim
 set hidden
 ```
 
 `vim` by default will throw away buffers when you switch away from them. This stops that behaviour. A reasonable expectation with any modern text editor.
 
-```
+```vim
 set nobackup
 set nowritebackup
 ```
 
 `vim` likes to create backup files (adding `~` to the extension) and I don’t like them. I use version control software and I’m content with that.
 
-```
+```vim
 set cmdheight=2
 ```
 
 This gives me more breathing room in the command window.
 
-```
+```vim
 set shortmess+=c
 ```
 
 Shortens messages from `vim`.
 
-```
+```vim
 set path=$PWD/**
 ```
 
 When running searches in `vim`, set the project directory to where I currently am.
 
-```
+```vim
 set showmode
 ```
 
 Shows which mode `vim` is currently in on the command window. I’m forgetful.
 
-```
+```vim
 set ignorecase
 set smartcase
 ```
 
 Makes search patterns case-insensitive. Except when the search pattern contains uppercase characters (`smartcase`).
 
-```
+```vim
 set clipboard=unnamed
 ```
 
 Removes `vim`’s separate clipboard, and “shares” it between `vim` and the outside world (your computer).
 
-```
+```vim
 set cursorline
 ```
 
@@ -148,7 +148,7 @@ Highlights the line the cursor is currently on. Makes it easier for me to find t
 
 ## Tabs and spaces
 
-```
+```vim
 set tabstop=2
 set shiftwidth=2
 set softtabstop=2
@@ -168,7 +168,7 @@ If I’m at a certain indentation level, then these options ensure I maintain it
 
 ## Spellchecking
 
-```
+```vim
 autocmd FileType gitcommit setlocal spell
 autocmd FileType markdown,md,mdx setlocal spell
 ```
@@ -177,7 +177,7 @@ When I am writing a `git` commit, or inside a Markdown file I want to add spellc
 
 ## Forcing myself to learn hjkl
 
-```
+```vim
 noremap <Up> <NOP>
 noremap <Down> <NOP>
 noremap <Left> <NOP>
@@ -193,7 +193,7 @@ inoremap <Up> <NOP>
 
 ## netrw
 
-```
+```vim
 let g:netrw_banner = 0
 ```
 
@@ -201,7 +201,7 @@ This hides the giant help banner when using `netrw` (`:E`). I use `netrw` to mov
 
 ## Split movement
 
-```
+```vim
 nnoremap <C-J> <C-W><C-J>
 nnoremap <C-K> <C-W><C-K>
 nnoremap <C-L> <C-W><C-L>
@@ -212,7 +212,7 @@ I use splits a lot and this makes it easier to move around between them.
 
 ## Plugins
 
-```
+```vim
 call plug#begin('~/.vim/plugged')
 ```
 
@@ -222,7 +222,7 @@ I use [vim-plug](https://github.com/junegunn/vim-plug) to manage all my plugins.
 
 Adds pairs of quotes, brackets, etc. If I type `”`, it’ll add a closing quote. Works with `()` and `{}`.
 
-```
+```vim
 let g:AutoPairsMultilineClose = 0
 ```
 
@@ -248,7 +248,7 @@ Syntax highlighting for various languages. I use JavaScript (and adjacent stuff
 
 One day I might learn how to use `vimgrep`, but for now I have `fzf`. Requires extra binaries. I thought I needed NERDTree to move around, but `fzf` has got my back.
 
-```
+```vim
 nnoremap <silent> <c-p> :GFiles --cached --others --exclude-standard<cr>
 ```
 
@@ -266,7 +266,7 @@ Like the above, it offers a neat feature, but I keep forgetting to use it. It wi
 
 I bet this one will garner controversy. Getting intelligent autocomplete in `vim` was never something it was intended to do, but `coc` in combination with `nvim` gets us there. For it to function “just so” requires extra configuration, which I’ll highlight below.
 
-```
+```vim
 let g:coc_global_extensions = [
 \   'coc-tsserver',
 \   'coc-json',
@@ -275,7 +275,7 @@ let g:coc_global_extensions = [
 
 This runs these `coc` plugins all the time. Since I’m always mucking about in JavaScript, this isn’t a big deal. It’s smart enough to know when I’m *not* in JavaScript and to not complain, which works for me.
 
-```
+```vim
 if isdirectory('./node_modules') && isdirectory('./node_modules/prettier')
   let g:coc_global_extensions += ['coc-prettier']
 endif
@@ -287,13 +287,13 @@ endif
 
 This tells `coc` to load up `eslint` and `prettier` extensions if I’m using them in my project. Super handy to automatically load up `prettier` only when I need it.
 
-```
+```vim
 nnoremap <silent> K :call CocAction('doHover')<CR>
 ```
 
 Rarely do I need to trigger `coc` on its own, but this is for the odd time. Nice for when looking up variable types (using TypeScript), or method arguments.
 
-```
+```vim
 command! -nargs=0 Prettier :CocCommand prettier.formatFile
 ```
 
@@ -301,26 +301,26 @@ Shortcut to run `prettier` using `:Prettier`. I don’t use this often since I h
 
 ### coc-settings.json
 
-```
+```json
 "suggest.noselect": false,
 ```
 
 This option pre-selects the first option in the autocomplete list.
 
-```
+```json
 "eslint.autoFixOnSave": true,
 "eslint.filetypes": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
 ```
 
 This runs `eslint` on save, and ensures that the files in `filetypes` run `eslint`.
 
-```
+```json
 “coc.preferences.formatOnSaveFiletypes": ["markdown", "mdx", "javascript", "javascriptreact", "typescript", "typescriptreact"],
 ```
 
 This runs `prettier` for me on these filetypes when saving. Somehow this doesn’t interfere with `eslint`, which is magic to me.
 
-```
+```json
 "coc.preferences.jumpCommand": "vsplit"
 ```
 
@@ -332,7 +332,7 @@ I saved the best for last.
 
 I currently use the [Rigel](https://rigel.netlify.app) theme.
 
-```
+```vim
 set statusline=%f%=%m%r%h%w%y[%04l,%04v]
 ```
 
@@ -344,7 +344,7 @@ This sets up my status line to show me what I need to know:
 * What line I’m on
 * What column I’m on
 
-```
+```vim
 highlight Comment cterm=italic gui=italic
 ```
 

src/content/posts/the-suspense-is-killing-me.md

@@ -11,7 +11,7 @@ React’s recent post on [Concurrent Mode](https://reactjs.org/docs/concurrent-m
 
 What is Suspense exactly? Suspense suspends components until they are ready. How does it know when components are ready? Turns out it’s a lot like [Error Boundaries](https://reactjs.org/docs/error-boundaries.html). When `throw Error` happens, an Error Boundary catches the error so the whole app doesn’t crash. Suspense works similarly, except instead of errors, it’s looking for a `Promise` object. This is a little weird to most web developers I imagine… since when did we start `throw`ing promises? Once I understood that though, I started to get how a `<Suspense />` component can tell when data is loaded. Once the Promise (or Promises) resolves, the component is ready. There is an example on the React blog post:
 
-```js
+```jsx
 const resource = fetchProfileData();
 
 function ProfilePage() {
@@ -50,7 +50,7 @@ Another nifty element of Suspense is the ability to control how the UI loads bas
 
 Another option is to nest Suspense options. This allows for a gradual reveal of the UI in the event a data fetch returns earlier than other requests. It gives the developer complete control over how the UI renders. Returning to the example above in its current configuration, the `<ProfileDetails />` component will load and unlock the top level `<Suspense />` wrapper. That will render the `<ProfileDetails />` component and render the next `<Suspense>` block’s `fallback` until the components inside load. Alternatively, the `<Suspense>` block that wraps the `<ProfileTimeline />` component could be removed to produce this:
 
-```js
+```jsx
 function ProfilePage() {
   return (
     <Suspense fallback={<h1>Loading profile...</h1>}>

src/content/posts/version-2-09-2021.md

@@ -59,7 +59,7 @@ export default function Youtube({ id, title }: Props) {
 
 It means I can embed a YouTube video in a post like this:
 
-```
+```jsx
 <Youtube id="vEvlWyb29ik" />
 ```
 
@@ -76,7 +76,7 @@ Some favourite packages of mine in no particular order:
 
 Simple sort `eslintrc` config:
 
-```
+```js
 "simple-import-sort/imports": [
       "error",
       {