feat(plugin): ShikiCodeblocks (#267)

Co-authored-by: ArjixWasTaken <53124886+ArjixWasTaken@users.noreply.github.com>
Co-authored-by: Ven <vendicated@riseup.net>

32 files changed, 1480 insertions, 105 deletions

diff --git a/package.json b/package.json
index 839e874..f0c3103 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,8 @@
         "@types/yazl": "^2.4.2",
         "@typescript-eslint/eslint-plugin": "^5.44.0",
         "@typescript-eslint/parser": "^5.44.0",
+        "@vap/core": "0.0.12",
+        "@vap/shiki": "0.10.3",
         "console-menu": "^0.1.0",
         "diff": "^5.1.0",
         "discord-types": "^1.3.26",
@@ -50,6 +52,7 @@
         "eslint-plugin-path-alias": "^1.0.0",
         "eslint-plugin-simple-import-sort": "^8.0.0",
         "eslint-plugin-unused-imports": "^2.0.0",
+        "highlight.js": "10.6.0",
         "moment": "^2.29.4",
         "puppeteer-core": "^19.3.0",
         "standalone-electron-types": "^1.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eaf90a1..6f76ff3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,6 +13,8 @@ specifiers:
   '@types/yazl': ^2.4.2
   '@typescript-eslint/eslint-plugin': ^5.44.0
   '@typescript-eslint/parser': ^5.44.0
+  '@vap/core': 0.0.12
+  '@vap/shiki': 0.10.3
   console-menu: ^0.1.0
   diff: ^5.1.0
   discord-types: ^1.3.26
@@ -24,6 +26,7 @@ specifiers:
   eslint-plugin-simple-import-sort: ^8.0.0
   eslint-plugin-unused-imports: ^2.0.0
   fflate: ^0.7.4
+  highlight.js: 10.6.0
   moment: ^2.29.4
   puppeteer-core: ^19.3.0
   standalone-electron-types: ^1.0.0
@@ -39,8 +42,10 @@ devDependencies:
   '@types/react': 18.0.25
   '@types/react-dom': 18.0.9
   '@types/yazl': 2.4.2
-  '@typescript-eslint/eslint-plugin': 5.44.0_fnsv2sbzcckq65bwfk7a5xwslu
-  '@typescript-eslint/parser': 5.44.0_hsf322ms6xhhd4b5ne6lb74y4a
+  '@typescript-eslint/eslint-plugin': 5.45.0_czs5uoqkd3podpy6vgtsxfc7au
+  '@typescript-eslint/parser': 5.45.0_hsf322ms6xhhd4b5ne6lb74y4a
+  '@vap/core': 0.0.12
+  '@vap/shiki': 0.10.3
   console-menu: 0.1.0
   diff: 5.1.0
   discord-types: 1.3.26
@@ -50,7 +55,8 @@ devDependencies:
   eslint-plugin-header: 3.1.1_eslint@8.28.0
   eslint-plugin-path-alias: 1.0.0_m6sma4g6bh67km3q6igf6uxaja_eslint@8.28.0
   eslint-plugin-simple-import-sort: 8.0.0_eslint@8.28.0
-  eslint-plugin-unused-imports: 2.0.0_aucl44mjeutxyzmt4nvo2cczya
+  eslint-plugin-unused-imports: 2.0.0_5am2datodjm2qi4eijrjrnoz54
+  highlight.js: 10.6.0
   moment: 2.29.4
   puppeteer-core: 19.3.0
   standalone-electron-types: 1.0.0
@@ -83,9 +89,9 @@ packages:
     dependencies:
       ajv: 6.12.6
       debug: 4.3.4
-      espree: 9.4.1
-      globals: 13.18.0
-      ignore: 5.2.1
+      espree: 9.4.0
+      globals: 13.17.0
+      ignore: 5.2.0
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       minimatch: 3.1.2
@@ -161,7 +167,7 @@ packages:
     resolution: {integrity: sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==}
     dependencies:
       '@types/prop-types': 15.7.5
-      csstype: 3.1.1
+      csstype: 3.1.0
     dev: true
 
   /@types/react/18.0.25:
@@ -169,7 +175,7 @@ packages:
     dependencies:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.2
-      csstype: 3.1.1
+      csstype: 3.1.0
     dev: true
 
   /@types/scheduler/0.16.2:
@@ -194,8 +200,8 @@ packages:
       '@types/node': 18.11.9
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.44.0_fnsv2sbzcckq65bwfk7a5xwslu:
-    resolution: {integrity: sha512-j5ULd7FmmekcyWeArx+i8x7sdRHzAtXTkmDPthE4amxZOWKFK7bomoJ4r7PJ8K7PoMzD16U8MmuZFAonr1ERvw==}
+  /@typescript-eslint/eslint-plugin/5.45.0_czs5uoqkd3podpy6vgtsxfc7au:
+    resolution: {integrity: sha512-CXXHNlf0oL+Yg021cxgOdMHNTXD17rHkq7iW6RFHoybdFgQBjU3yIXhhcPpGwr1CjZlo6ET8C6tzX5juQoXeGA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -205,24 +211,24 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.44.0_hsf322ms6xhhd4b5ne6lb74y4a
-      '@typescript-eslint/scope-manager': 5.44.0
-      '@typescript-eslint/type-utils': 5.44.0_hsf322ms6xhhd4b5ne6lb74y4a
-      '@typescript-eslint/utils': 5.44.0_hsf322ms6xhhd4b5ne6lb74y4a
+      '@typescript-eslint/parser': 5.45.0_hsf322ms6xhhd4b5ne6lb74y4a
+      '@typescript-eslint/scope-manager': 5.45.0
+      '@typescript-eslint/type-utils': 5.45.0_hsf322ms6xhhd4b5ne6lb74y4a
+      '@typescript-eslint/utils': 5.45.0_hsf322ms6xhhd4b5ne6lb74y4a
       debug: 4.3.4
       eslint: 8.28.0
-      ignore: 5.2.1
+      ignore: 5.2.0
       natural-compare-lite: 1.4.0
       regexpp: 3.2.0
-      semver: 7.3.8
+      semver: 7.3.7
       tsutils: 3.21.0_typescript@4.9.3
       typescript: 4.9.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.44.0_hsf322ms6xhhd4b5ne6lb74y4a:
-    resolution: {integrity: sha512-H7LCqbZnKqkkgQHaKLGC6KUjt3pjJDx8ETDqmwncyb6PuoigYajyAwBGz08VU/l86dZWZgI4zm5k2VaKqayYyA==}
+  /@typescript-eslint/parser/5.45.0_hsf322ms6xhhd4b5ne6lb74y4a:
+    resolution: {integrity: sha512-brvs/WSM4fKUmF5Ot/gEve6qYiCMjm6w4HkHPfS6ZNmxTS0m0iNN4yOChImaCkqc1hRwFGqUyanMXuGal6oyyQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -231,9 +237,9 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 5.44.0
-      '@typescript-eslint/types': 5.44.0
-      '@typescript-eslint/typescript-estree': 5.44.0_typescript@4.9.3
+      '@typescript-eslint/scope-manager': 5.45.0
+      '@typescript-eslint/types': 5.45.0
+      '@typescript-eslint/typescript-estree': 5.45.0_typescript@4.9.3
       debug: 4.3.4
       eslint: 8.28.0
       typescript: 4.9.3
@@ -241,16 +247,16 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager/5.44.0:
-    resolution: {integrity: sha512-2pKml57KusI0LAhgLKae9kwWeITZ7IsZs77YxyNyIVOwQ1kToyXRaJLl+uDEXzMN5hnobKUOo2gKntK9H1YL8g==}
+  /@typescript-eslint/scope-manager/5.45.0:
+    resolution: {integrity: sha512-noDMjr87Arp/PuVrtvN3dXiJstQR1+XlQ4R1EvzG+NMgXi8CuMCXpb8JqNtFHKceVSQ985BZhfRdowJzbv4yKw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.44.0
-      '@typescript-eslint/visitor-keys': 5.44.0
+      '@typescript-eslint/types': 5.45.0
+      '@typescript-eslint/visitor-keys': 5.45.0
     dev: true
 
-  /@typescript-eslint/type-utils/5.44.0_hsf322ms6xhhd4b5ne6lb74y4a:
-    resolution: {integrity: sha512-A1u0Yo5wZxkXPQ7/noGkRhV4J9opcymcr31XQtOzcc5nO/IHN2E2TPMECKWYpM3e6olWEM63fq/BaL1wEYnt/w==}
+  /@typescript-eslint/type-utils/5.45.0_hsf322ms6xhhd4b5ne6lb74y4a:
+    resolution: {integrity: sha512-DY7BXVFSIGRGFZ574hTEyLPRiQIvI/9oGcN8t1A7f6zIs6ftbrU0nhyV26ZW//6f85avkwrLag424n+fkuoJ1Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -259,8 +265,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 5.44.0_typescript@4.9.3
-      '@typescript-eslint/utils': 5.44.0_hsf322ms6xhhd4b5ne6lb74y4a
+      '@typescript-eslint/typescript-estree': 5.45.0_typescript@4.9.3
+      '@typescript-eslint/utils': 5.45.0_hsf322ms6xhhd4b5ne6lb74y4a
       debug: 4.3.4
       eslint: 8.28.0
       tsutils: 3.21.0_typescript@4.9.3
@@ -269,13 +275,13 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/types/5.44.0:
-    resolution: {integrity: sha512-Tp+zDnHmGk4qKR1l+Y1rBvpjpm5tGXX339eAlRBDg+kgZkz9Bw+pqi4dyseOZMsGuSH69fYfPJCBKBrbPCxYFQ==}
+  /@typescript-eslint/types/5.45.0:
+    resolution: {integrity: sha512-QQij+u/vgskA66azc9dCmx+rev79PzX8uDHpsqSjEFtfF2gBUTRCpvYMh2gw2ghkJabNkPlSUCimsyBEQZd1DA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.44.0_typescript@4.9.3:
-    resolution: {integrity: sha512-M6Jr+RM7M5zeRj2maSfsZK2660HKAJawv4Ud0xT+yauyvgrsHu276VtXlKDFnEmhG+nVEd0fYZNXGoAgxwDWJw==}
+  /@typescript-eslint/typescript-estree/5.45.0_typescript@4.9.3:
+    resolution: {integrity: sha512-maRhLGSzqUpFcZgXxg1qc/+H0bT36lHK4APhp0AEUVrpSwXiRAomm/JGjSG+kNUio5kAa3uekCYu/47cnGn5EQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -283,56 +289,70 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.44.0
-      '@typescript-eslint/visitor-keys': 5.44.0
+      '@typescript-eslint/types': 5.45.0
+      '@typescript-eslint/visitor-keys': 5.45.0
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.3.8
+      semver: 7.3.7
       tsutils: 3.21.0_typescript@4.9.3
       typescript: 4.9.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.44.0_hsf322ms6xhhd4b5ne6lb74y4a:
-    resolution: {integrity: sha512-fMzA8LLQ189gaBjS0MZszw5HBdZgVwxVFShCO3QN+ws3GlPkcy9YuS3U4wkT6su0w+Byjq3mS3uamy9HE4Yfjw==}
+  /@typescript-eslint/utils/5.45.0_hsf322ms6xhhd4b5ne6lb74y4a:
+    resolution: {integrity: sha512-OUg2JvsVI1oIee/SwiejTot2OxwU8a7UfTFMOdlhD2y+Hl6memUSL4s98bpUTo8EpVEr0lmwlU7JSu/p2QpSvA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@types/json-schema': 7.0.11
       '@types/semver': 7.3.13
-      '@typescript-eslint/scope-manager': 5.44.0
-      '@typescript-eslint/types': 5.44.0
-      '@typescript-eslint/typescript-estree': 5.44.0_typescript@4.9.3
+      '@typescript-eslint/scope-manager': 5.45.0
+      '@typescript-eslint/types': 5.45.0
+      '@typescript-eslint/typescript-estree': 5.45.0_typescript@4.9.3
       eslint: 8.28.0
       eslint-scope: 5.1.1
       eslint-utils: 3.0.0_eslint@8.28.0
-      semver: 7.3.8
+      semver: 7.3.7
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@typescript-eslint/visitor-keys/5.44.0:
-    resolution: {integrity: sha512-a48tLG8/4m62gPFbJ27FxwCOqPKxsb8KC3HkmYoq2As/4YyjQl1jDbRr1s63+g4FS/iIehjmN3L5UjmKva1HzQ==}
+  /@typescript-eslint/visitor-keys/5.45.0:
+    resolution: {integrity: sha512-jc6Eccbn2RtQPr1s7th6jJWQHBHI6GBVQkCHoJFQ5UreaKm59Vxw+ynQUPPY2u2Amquc+7tmEoC2G52ApsGNNg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.44.0
+      '@typescript-eslint/types': 5.45.0
       eslint-visitor-keys: 3.3.0
     dev: true
 
-  /acorn-jsx/5.3.2_acorn@8.8.1:
+  /@vap/core/0.0.12:
+    resolution: {integrity: sha512-3csHpkE1zUSRTZwl7xIf2uXg1cD4IhhtUm0F6K/dWydc95R5Nj+krB4OTNATuqkewIv/ViCbwjPfkafAgvZQSg==}
+    dependencies:
+      eventemitter3: 4.0.7
+    dev: true
+
+  /@vap/shiki/0.10.3:
+    resolution: {integrity: sha512-tZPHZxDKEBlorQ2BaprytGfkbo5yKBvdxdAF144p94HCTpjO3ScJk/f319wi7GtV1NE4DV8HBQo/0XpldixWQA==}
+    dependencies:
+      jsonc-parser: 3.2.0
+      vscode-oniguruma: 1.7.0
+      vscode-textmate: 5.2.0
+    dev: true
+
+  /acorn-jsx/5.3.2_acorn@8.8.0:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      acorn: 8.8.1
+      acorn: 8.8.0
     dev: true
 
-  /acorn/8.8.1:
-    resolution: {integrity: sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==}
+  /acorn/8.8.0:
+    resolution: {integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==}
     engines: {node: '>=0.4.0'}
     hasBin: true
     dev: true
@@ -522,7 +542,7 @@ packages:
     dev: true
 
   /concat-map/0.0.1:
-    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
   /console-menu/0.1.0:
@@ -553,8 +573,8 @@ packages:
       which: 2.0.2
     dev: true
 
-  /csstype/3.1.1:
-    resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
+  /csstype/3.1.0:
+    resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==}
     dev: true
 
   /debug/2.6.9:
@@ -897,7 +917,7 @@ packages:
       eslint: 8.28.0
     dev: true
 
-  /eslint-plugin-unused-imports/2.0.0_aucl44mjeutxyzmt4nvo2cczya:
+  /eslint-plugin-unused-imports/2.0.0_5am2datodjm2qi4eijrjrnoz54:
     resolution: {integrity: sha512-3APeS/tQlTrFa167ThtP0Zm0vctjr4M44HMpeg1P4bK6wItarumq0Ma82xorMKdFsWpphQBlRPzw/pxiVELX1A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -907,7 +927,7 @@ packages:
       '@typescript-eslint/eslint-plugin':
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.44.0_fnsv2sbzcckq65bwfk7a5xwslu
+      '@typescript-eslint/eslint-plugin': 5.45.0_czs5uoqkd3podpy6vgtsxfc7au
       eslint: 8.28.0
       eslint-rule-composer: 0.3.0
     dev: true
@@ -971,21 +991,21 @@ packages:
       eslint-scope: 7.1.1
       eslint-utils: 3.0.0_eslint@8.28.0
       eslint-visitor-keys: 3.3.0
-      espree: 9.4.1
+      espree: 9.4.0
       esquery: 1.4.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
       file-entry-cache: 6.0.1
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.18.0
+      globals: 13.17.0
       grapheme-splitter: 1.0.4
-      ignore: 5.2.1
+      ignore: 5.2.0
       import-fresh: 3.3.0
       imurmurhash: 0.1.4
       is-glob: 4.0.3
       is-path-inside: 3.0.3
-      js-sdsl: 4.2.0
+      js-sdsl: 4.1.5
       js-yaml: 4.1.0
       json-stable-stringify-without-jsonify: 1.0.1
       levn: 0.4.1
@@ -1001,12 +1021,12 @@ packages:
       - supports-color
     dev: true
 
-  /espree/9.4.1:
-    resolution: {integrity: sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==}
+  /espree/9.4.0:
+    resolution: {integrity: sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      acorn: 8.8.1
-      acorn-jsx: 5.3.2_acorn@8.8.1
+      acorn: 8.8.0
+      acorn-jsx: 5.3.2_acorn@8.8.0
       eslint-visitor-keys: 3.3.0
     dev: true
 
@@ -1039,6 +1059,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /eventemitter3/4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+    dev: true
+
   /extend-shallow/2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
     engines: {node: '>=0.10.0'}
@@ -1198,8 +1222,8 @@ packages:
       path-is-absolute: 1.0.1
     dev: true
 
-  /globals/13.18.0:
-    resolution: {integrity: sha512-/mR4KI8Ps2spmoc0Ulu9L7agOF0du1CZNQ3dke8yItYlyKNmGrkONemBbd6V8UTc1Wgcqn21t3WYB7dbRmh6/A==}
+  /globals/13.17.0:
+    resolution: {integrity: sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==}
     engines: {node: '>=8'}
     dependencies:
       type-fest: 0.20.2
@@ -1212,7 +1236,7 @@ packages:
       array-union: 2.1.0
       dir-glob: 3.0.1
       fast-glob: 3.2.12
-      ignore: 5.2.1
+      ignore: 5.2.0
       merge2: 1.4.1
       slash: 3.0.0
     dev: true
@@ -1257,6 +1281,10 @@ packages:
       kind-of: 4.0.0
     dev: true
 
+  /highlight.js/10.6.0:
+    resolution: {integrity: sha512-8mlRcn5vk/r4+QcqerapwBYTe+iPL5ih6xrNylxrnBdHQiijDETfXX7VIxC3UiCRiINBJfANBAsPzAvRQj8RpQ==}
+    dev: true
+
   /https-proxy-agent/5.0.1:
     resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
     engines: {node: '>= 6'}
@@ -1271,8 +1299,8 @@ packages:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: true
 
-  /ignore/5.2.1:
-    resolution: {integrity: sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==}
+  /ignore/5.2.0:
+    resolution: {integrity: sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==}
     engines: {node: '>= 4'}
     dev: true
 
@@ -1423,8 +1451,8 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /js-sdsl/4.2.0:
-    resolution: {integrity: sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==}
+  /js-sdsl/4.1.5:
+    resolution: {integrity: sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==}
     dev: true
 
   /js-yaml/4.1.0:
@@ -1442,6 +1470,10 @@ packages:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
 
+  /jsonc-parser/3.2.0:
+    resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
+    dev: true
+
   /keypress/0.2.1:
     resolution: {integrity: sha512-HjorDJFNhnM4SicvaUXac0X77NiskggxJdesG72+O5zBKpSqKFCrqmndKVqpu3pFqkla0St6uGk8Ju0sCurrmg==}
     dev: true
@@ -1797,8 +1829,8 @@ packages:
       ret: 0.1.15
     dev: true
 
-  /semver/7.3.8:
-    resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==}
+  /semver/7.3.7:
+    resolution: {integrity: sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
@@ -2053,6 +2085,14 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
 
+  /vscode-oniguruma/1.7.0:
+    resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==}
+    dev: true
+
+  /vscode-textmate/5.2.0:
+    resolution: {integrity: sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ==}
+    dev: true
+
   /webidl-conversions/3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
     dev: true
diff --git a/src/api/settings.ts b/src/api/settings.ts
index b7c143a..2617903 100644
--- a/src/api/settings.ts
+++ b/src/api/settings.ts
@@ -141,14 +141,19 @@ export const Settings = makeProxy(settings);
  * Settings hook for React components. Returns a smart settings
  * object that automagically triggers a rerender if any properties
  * are altered
+ * @param paths An optional list of paths to whitelist for rerenders
  * @returns Settings
  */
-export function useSettings() {
+export function useSettings(paths?: string[]) {
     const [, forceUpdate] = React.useReducer(() => ({}), {});
 
+    const onUpdate: SubscriptionCallback = paths
+        ? (value, path) => paths.includes(path) && forceUpdate()
+        : forceUpdate;
+
     React.useEffect(() => {
-        subscriptions.add(forceUpdate);
-        return () => void subscriptions.delete(forceUpdate);
+        subscriptions.add(onUpdate);
+        return () => void subscriptions.delete(onUpdate);
     }, []);
 
     return Settings;
diff --git a/src/components/VencordSettings/Updater.tsx b/src/components/VencordSettings/Updater.tsx
index bb344f5..3369069 100644
--- a/src/components/VencordSettings/Updater.tsx
+++ b/src/components/VencordSettings/Updater.tsx
@@ -179,7 +179,7 @@ function Newer(props: CommonProps) {
 }
 
 function Updater() {
-    const [repo, err, repoPending] = useAwaiter(getRepo, "Loading...");
+    const [repo, err, repoPending] = useAwaiter(getRepo, { fallbackValue: "Loading..." });
 
     React.useEffect(() => {
         if (err)
diff --git a/src/components/VencordSettings/VencordTab.tsx b/src/components/VencordSettings/VencordTab.tsx
index 746fcf0..ad8fe14 100644
--- a/src/components/VencordSettings/VencordTab.tsx
+++ b/src/components/VencordSettings/VencordTab.tsx
@@ -27,7 +27,9 @@ import { Button, Card, Forms, Margins, React, Switch } from "@webpack/common";
 const st = (style: string) => `vcSettings${style}`;
 
 function VencordSettings() {
-    const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading...");
+    const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), {
+        fallbackValue: "Loading..."
+    });
     const settings = useSettings();
 
     const [donateImage] = React.useState(
diff --git a/src/patcher.ts b/src/patcher.ts
index 0849e5a..0cf7e24 100644
--- a/src/patcher.ts
+++ b/src/patcher.ts
@@ -109,16 +109,36 @@ if (!process.argv.includes("--vanilla")) {
 
 
         // Remove CSP
+        type PolicyResult = Record<string, string[]>;
+
+        const parsePolicy = (policy: string): PolicyResult => {
+            const result: PolicyResult = {};
+            policy.split(";").forEach(directive => {
+                const [directiveKey, ...directiveValue] = directive.trim().split(/\s+/g);
+                if (directiveKey && !Object.prototype.hasOwnProperty.call(result, directiveKey)) {
+                    result[directiveKey] = directiveValue;
+                }
+            });
+            return result;
+        };
+        const stringifyPolicy = (policy: PolicyResult): string =>
+            Object.entries(policy)
+                .filter(([, values]) => values?.length)
+                .map(directive => directive.flat().join(" "))
+                .join("; ");
+
         function patchCsp(headers: Record<string, string[]>, header: string) {
             if (header in headers) {
-                let patchedHeader = headers[header][0];
-                for (const directive of ["style-src", "connect-src", "img-src", "font-src", "media-src"]) {
-                    patchedHeader = patchedHeader.replace(new RegExp(`${directive}.+?;`), `${directive} * blob: data: 'unsafe-inline';`);
+                const csp = parsePolicy(headers[header][0]);
+
+                for (const directive of ["style-src", "connect-src", "img-src", "font-src", "media-src", "worker-src"]) {
+                    csp[directive] = ["*", "blob:", "data:", "'unsafe-inline'"];
                 }
                 // TODO: Restrict this to only imported packages with fixed version.
                 // Perhaps auto generate with esbuild
-                patchedHeader = patchedHeader.replace(/script-src.+?(?=;)/, "$& 'unsafe-eval' https://unpkg.com https://cdnjs.cloudflare.com");
-                headers[header] = [patchedHeader];
+                csp["script-src"] ??= [];
+                csp["script-src"].push("'unsafe-eval'", "https://unpkg.com", "https://cdnjs.cloudflare.com");
+                headers[header] = [stringifyPolicy(csp)];
             }
         }
 
diff --git a/src/plugins/pronoundb/components/PronounsChatComponent.tsx b/src/plugins/pronoundb/components/PronounsChatComponent.tsx
index 9225fc5..ce67754 100644
--- a/src/plugins/pronoundb/components/PronounsChatComponent.tsx
+++ b/src/plugins/pronoundb/components/PronounsChatComponent.tsx
@@ -39,11 +39,10 @@ export default function PronounsChatComponentWrapper({ message }: { message: Mes
 }
 
 function PronounsChatComponent({ message }: { message: Message; }) {
-    const [result, , isPending] = useAwaiter(
-        () => fetchPronouns(message.author.id),
-        null,
-        e => console.error("Fetching pronouns failed: ", e)
-    );
+    const [result, , isPending] = useAwaiter(() => fetchPronouns(message.author.id), {
+        fallbackValue: null,
+        onError: e => console.error("Fetching pronouns failed: ", e)
+    });
 
     // If the promise completed, the result was not "unspecified", and there is a mapping for the code, then return a span with the pronouns
     if (!isPending && result && result !== "unspecified" && PronounMapping[result]) {
diff --git a/src/plugins/pronoundb/components/PronounsProfileWrapper.tsx b/src/plugins/pronoundb/components/PronounsProfileWrapper.tsx
index 9540bb9..79fce23 100644
--- a/src/plugins/pronoundb/components/PronounsProfileWrapper.tsx
+++ b/src/plugins/pronoundb/components/PronounsProfileWrapper.tsx
@@ -45,11 +45,10 @@ function ProfilePronouns(
         leProps: UserProfilePronounsProps;
     }
 ) {
-    const [result, , isPending] = useAwaiter(
-        () => fetchPronouns(userId),
-        null,
-        e => console.error("Fetching pronouns failed: ", e)
-    );
+    const [result, , isPending] = useAwaiter(() => fetchPronouns(userId), {
+        fallbackValue: null,
+        onError: e => console.error("Fetching pronouns failed: ", e),
+    });
 
     // If the promise completed, the result was not "unspecified", and there is a mapping for the code, then render
     if (!isPending && result && result !== "unspecified" && PronounMapping[result]) {
diff --git a/src/plugins/reviewDB/components/ReviewsView.tsx b/src/plugins/reviewDB/components/ReviewsView.tsx
index 999b970..57f974e 100644
--- a/src/plugins/reviewDB/components/ReviewsView.tsx
+++ b/src/plugins/reviewDB/components/ReviewsView.tsx
@@ -18,7 +18,7 @@
 
 import { classes, useAwaiter } from "@utils/misc";
 import { findLazy } from "@webpack";
-import { Forms, Text, UserStore } from "@webpack/common";
+import { Forms, React, Text, UserStore } from "@webpack/common";
 import type { KeyboardEvent } from "react";
 
 import { addReview, getReviews } from "../Utils/ReviewDBAPI";
@@ -27,7 +27,13 @@ import ReviewComponent from "./ReviewComponent";
 const Classes = findLazy(m => typeof m.textarea === "string");
 
 export default function ReviewsView({ userId }: { userId: string; }) {
-    const [reviews, _, isLoading, refetch] = useAwaiter(() => getReviews(userId), []);
+    const [refetchCount, setRefetchCount] = React.useState(0);
+    const [reviews, _, isLoading] = useAwaiter(() => getReviews(userId), {
+        fallbackValue: [],
+        deps: [refetchCount],
+    });
+
+    const dirtyRefetch = () => setRefetchCount(refetchCount + 1);
 
     if (isLoading) return null;
 
@@ -40,7 +46,7 @@ export default function ReviewsView({ userId }: { userId: string; }) {
             }).then(res => {
                 if (res === 0 || res === 1) {
                     (target as HTMLInputElement).value = ""; // clear the input
-                    refetch();
+                    dirtyRefetch();
                 }
             });
         }
@@ -64,7 +70,7 @@ export default function ReviewsView({ userId }: { userId: string; }) {
                     <ReviewComponent
                         key={review.id}
                         review={review}
-                        refetch={refetch}
+                        refetch={dirtyRefetch}
                     />
                 )}
                 {reviews?.length === 0 && (
diff --git a/src/plugins/shikiCodeblocks/api/languages.ts b/src/plugins/shikiCodeblocks/api/languages.ts
new file mode 100644
index 0000000..f14a4dc
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/api/languages.ts
@@ -0,0 +1,74 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { ILanguageRegistration } from "@vap/shiki";
+
+export const VPC_REPO = "Vap0r1ze/vapcord";
+export const VPC_REPO_COMMIT = "88a7032a59cca40da170926651b08201ea3b965a";
+export const vpcRepoAssets = `https://raw.githubusercontent.com/${VPC_REPO}/${VPC_REPO_COMMIT}/assets/shiki-codeblocks`;
+export const vpcRepoGrammar = (fileName: string) => `${vpcRepoAssets}/${fileName}`;
+export const vpcRepoLanguages = `${vpcRepoAssets}/languages.json`;
+
+export interface Language {
+    name: string;
+    id: string;
+    devicon?: string;
+    grammarUrl: string,
+    grammar?: ILanguageRegistration["grammar"];
+    scopeName: string;
+    aliases?: string[];
+    custom?: boolean;
+}
+export interface LanguageJson {
+    name: string;
+    id: string;
+    fileName: string;
+    devicon?: string;
+    scopeName: string;
+    aliases?: string[];
+}
+
+export const languages: Record<string, Language> = {};
+
+export const loadLanguages = async () => {
+    const langsJson: LanguageJson[] = await fetch(vpcRepoLanguages).then(res => res.json());
+    const loadedLanguages = Object.fromEntries(
+        langsJson.map(lang => [lang.id, {
+            ...lang,
+            grammarUrl: vpcRepoGrammar(lang.fileName),
+        }])
+    );
+    Object.assign(languages, loadedLanguages);
+};
+
+export const getGrammar = (lang: Language): Promise<NonNullable<ILanguageRegistration["grammar"]>> => {
+    if (lang.grammar) return Promise.resolve(lang.grammar);
+    return fetch(lang.grammarUrl).then(res => res.json());
+};
+
+const aliasCache = new Map<string, Language>();
+export function resolveLang(idOrAlias: string) {
+    if (Object.prototype.hasOwnProperty.call(languages, idOrAlias)) return languages[idOrAlias];
+
+    const lang = Object.values(languages).find(lang => lang.aliases?.includes(idOrAlias));
+
+    if (!lang) return null;
+
+    aliasCache.set(idOrAlias, lang);
+    return lang;
+}
diff --git a/src/plugins/shikiCodeblocks/api/shiki.ts b/src/plugins/shikiCodeblocks/api/shiki.ts
new file mode 100644
index 0000000..e7691ce
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/api/shiki.ts
@@ -0,0 +1,119 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+
+import { shikiOnigasmSrc, shikiWorkerSrc } from "@utils/dependencies";
+import { WorkerClient } from "@vap/core/ipc";
+import type { IShikiTheme, IThemedToken } from "@vap/shiki";
+
+import { dispatchTheme } from "../hooks/useTheme";
+import type { ShikiSpec } from "../types";
+import { getGrammar, languages, loadLanguages, resolveLang } from "./languages";
+import { themes } from "./themes";
+
+const themeUrls = Object.values(themes);
+
+let resolveClient: (client: WorkerClient<ShikiSpec>) => void;
+
+export const shiki = {
+    client: null as WorkerClient<ShikiSpec> | null,
+    currentTheme: null as IShikiTheme | null,
+    currentThemeUrl: null as string | null,
+    timeoutMs: 10000,
+    languages,
+    themes,
+    loadedThemes: new Set<string>(),
+    loadedLangs: new Set<string>(),
+    clientPromise: new Promise<WorkerClient<ShikiSpec>>(resolve => resolveClient = resolve),
+
+    init: async (initThemeUrl: string | undefined) => {
+        /** https://stackoverflow.com/q/58098143 */
+        const workerBlob = await fetch(shikiWorkerSrc).then(res => res.blob());
+
+        const client = shiki.client = new WorkerClient<ShikiSpec>(
+            "shiki-client",
+            "shiki-host",
+            workerBlob,
+            { name: "ShikiWorker" },
+        );
+        await client.init();
+
+        const themeUrl = initThemeUrl || themeUrls[0];
+
+        await loadLanguages();
+        await client.run("setOnigasm", { wasm: shikiOnigasmSrc });
+        await client.run("setHighlighter", { theme: themeUrl, langs: [] });
+        shiki.loadedThemes.add(themeUrl);
+        await shiki._setTheme(themeUrl);
+        resolveClient(client);
+    },
+    _setTheme: async (themeUrl: string) => {
+        shiki.currentThemeUrl = themeUrl;
+        const { themeData } = await shiki.client!.run("getTheme", { theme: themeUrl });
+        shiki.currentTheme = JSON.parse(themeData);
+        dispatchTheme({ id: themeUrl, theme: shiki.currentTheme });
+    },
+    loadTheme: async (themeUrl: string) => {
+        const client = await shiki.clientPromise;
+        if (shiki.loadedThemes.has(themeUrl)) return;
+
+        await client.run("loadTheme", { theme: themeUrl });
+
+        shiki.loadedThemes.add(themeUrl);
+    },
+    setTheme: async (themeUrl: string) => {
+        await shiki.clientPromise;
+        themeUrl ||= themeUrls[0];
+        if (!shiki.loadedThemes.has(themeUrl)) await shiki.loadTheme(themeUrl);
+
+        await shiki._setTheme(themeUrl);
+    },
+    loadLang: async (langId: string) => {
+        const client = await shiki.clientPromise;
+        const lang = resolveLang(langId);
+
+        if (!lang || shiki.loadedLangs.has(lang.id)) return;
+
+        await client.run("loadLanguage", {
+            lang: {
+                ...lang,
+                grammar: lang.grammar ?? await getGrammar(lang),
+            }
+        });
+        shiki.loadedLangs.add(lang.id);
+    },
+    tokenizeCode: async (code: string, langId: string): Promise<IThemedToken[][]> => {
+        const client = await shiki.clientPromise;
+        const lang = resolveLang(langId);
+        if (!lang) return [];
+
+        if (!shiki.loadedLangs.has(lang.id)) await shiki.loadLang(lang.id);
+
+        return await client.run("codeToThemedTokens", {
+            code,
+            lang: langId,
+            theme: shiki.currentThemeUrl ?? themeUrls[0],
+        });
+    },
+    destroy() {
+        shiki.currentTheme = null;
+        shiki.currentThemeUrl = null;
+        dispatchTheme({ id: null, theme: null });
+        shiki.client?.destroy();
+    }
+};
diff --git a/src/plugins/shikiCodeblocks/api/themes.ts b/src/plugins/shikiCodeblocks/api/themes.ts
new file mode 100644
index 0000000..f31ce60
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/api/themes.ts
@@ -0,0 +1,67 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { IShikiTheme } from "@vap/shiki";
+
+export const SHIKI_REPO = "shikijs/shiki";
+export const SHIKI_REPO_COMMIT = "0b28ad8ccfbf2615f2d9d38ea8255416b8ac3043";
+export const shikiRepoTheme = (name: string) => `https://raw.githubusercontent.com/${SHIKI_REPO}/${SHIKI_REPO_COMMIT}/packages/shiki/themes/${name}.json`;
+
+export const themes = {
+    // Default
+    DarkPlus: shikiRepoTheme("dark-plus"),
+
+    // Dev Choices
+    MaterialCandy: "https://raw.githubusercontent.com/millsp/material-candy/master/material-candy.json",
+
+    // More from Shiki repo
+    DraculaSoft: shikiRepoTheme("dracula-soft"),
+    Dracula: shikiRepoTheme("dracula"),
+    GithubDarkDimmed: shikiRepoTheme("github-dark-dimmed"),
+    GithubDark: shikiRepoTheme("github-dark"),
+    GithubLight: shikiRepoTheme("github-light"),
+    LightPlus: shikiRepoTheme("light-plus"),
+    MaterialDarker: shikiRepoTheme("material-darker"),
+    MaterialDefault: shikiRepoTheme("material-default"),
+    MaterialLighter: shikiRepoTheme("material-lighter"),
+    MaterialOcean: shikiRepoTheme("material-ocean"),
+    MaterialPalenight: shikiRepoTheme("material-palenight"),
+    MinDark: shikiRepoTheme("min-dark"),
+    MinLight: shikiRepoTheme("min-light"),
+    Monokai: shikiRepoTheme("monokai"),
+    Nord: shikiRepoTheme("nord"),
+    OneDarkPro: shikiRepoTheme("one-dark-pro"),
+    Poimandres: shikiRepoTheme("poimandres"),
+    RosePineDawn: shikiRepoTheme("rose-pine-dawn"),
+    RosePineMoon: shikiRepoTheme("rose-pine-moon"),
+    RosePine: shikiRepoTheme("rose-pine"),
+    SlackDark: shikiRepoTheme("slack-dark"),
+    SlackOchin: shikiRepoTheme("slack-ochin"),
+    SolarizedDark: shikiRepoTheme("solarized-dark"),
+    SolarizedLight: shikiRepoTheme("solarized-light"),
+    VitesseDark: shikiRepoTheme("vitesse-dark"),
+    VitesseLight: shikiRepoTheme("vitesse-light"),
+    CssVariables: shikiRepoTheme("css-variables"),
+};
+
+export const themeCache = new Map<string, IShikiTheme>();
+
+export const getTheme = (url: string): Promise<IShikiTheme> => {
+    if (themeCache.has(url)) return Promise.resolve(themeCache.get(url)!);
+    return fetch(url).then(res => res.json());
+};
diff --git a/src/plugins/shikiCodeblocks/components/ButtonRow.tsx b/src/plugins/shikiCodeblocks/components/ButtonRow.tsx
new file mode 100644
index 0000000..e73eb72
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/components/ButtonRow.tsx
@@ -0,0 +1,46 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Clipboard } from "@webpack/common";
+
+import { cl } from "../utils/misc";
+import { CopyButton } from "./CopyButton";
+
+export interface ButtonRowProps {
+    theme: import("./Highlighter").ThemeBase;
+    content: string;
+}
+
+export function ButtonRow({ content, theme }: ButtonRowProps) {
+    const buttons: JSX.Element[] = [];
+
+    if (Clipboard.SUPPORTS_COPY) {
+        buttons.push(
+            <CopyButton
+                content={content}
+                className={cl("btn")}
+                style={{
+                    backgroundColor: theme.accentBgColor,
+                    color: theme.accentFgColor,
+                }}
+            />
+        );
+    }
+
+    return <div className={cl("btns")}>{buttons}</div>;
+}
diff --git a/src/plugins/shikiCodeblocks/components/Code.tsx b/src/plugins/shikiCodeblocks/components/Code.tsx
new file mode 100644
index 0000000..ae41113
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/components/Code.tsx
@@ -0,0 +1,92 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import type { IThemedToken } from "@vap/shiki";
+
+import { cl } from "../utils/misc";
+import { ThemeBase } from "./Highlighter";
+
+export interface CodeProps {
+    theme: ThemeBase;
+    useHljs: boolean;
+    lang?: string;
+    content: string;
+    tokens: IThemedToken[][] | null;
+}
+
+export const Code = ({
+    theme,
+    useHljs,
+    lang,
+    content,
+    tokens,
+}: CodeProps) => {
+    let lines!: JSX.Element[];
+
+    if (useHljs) {
+        try {
+            const { value: hljsHtml } = hljs.highlight(lang!, content, true);
+            lines = hljsHtml
+                .split("\n")
+                .map((line, i) => <span key={i} dangerouslySetInnerHTML={{ __html: line }} />);
+        } catch {
+            lines = content.split("\n").map(line => <span>{line}</span>);
+        }
+    } else {
+        const renderTokens =
+            tokens ??
+            content
+                .split("\n")
+                .map(line => [{ color: theme.plainColor, content: line } as IThemedToken]);
+
+        lines = renderTokens.map(line => {
+            // [Cynthia] this makes it so when you highlight the codeblock
+            // empty lines are also selected and copied when you Ctrl+C.
+            if (line.length === 0) {
+                return <span>{"\n"}</span>;
+            }
+
+            return (
+                <>
+                    {line.map(({ content, color, fontStyle }, i) => (
+                        <span
+                            key={i}
+                            style={{
+                                color,
+                                fontStyle: (fontStyle ?? 0) & 1 ? "italic" : undefined,
+                                fontWeight: (fontStyle ?? 0) & 2 ? "bold" : undefined,
+                                textDecoration: (fontStyle ?? 0) & 4 ? "underline" : undefined,
+                            }}
+                        >
+                            {content}
+                        </span>
+                    ))}
+                </>
+            );
+        });
+    }
+
+    const codeTableRows = lines.map((line, i) => (
+        <tr key={i}>
+            <td style={{ color: theme.plainColor }}>{i + 1}</td>
+            <td>{line}</td>
+        </tr>
+    ));
+
+    return <table className={cl("table")}>{...codeTableRows}</table>;
+};
diff --git a/src/plugins/shikiCodeblocks/components/CopyButton.tsx b/src/plugins/shikiCodeblocks/components/CopyButton.tsx
new file mode 100644
index 0000000..153b3cd
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/components/CopyButton.tsx
@@ -0,0 +1,41 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { useCopyCooldown } from "../hooks/useCopyCooldown";
+
+export interface CopyButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    content: string;
+}
+
+export function CopyButton({ content, ...props }: CopyButtonProps) {
+    const [copyCooldown, copy] = useCopyCooldown(1000);
+
+    return (
+        <button
+            {...props}
+            style={{
+                ...props.style,
+                cursor: copyCooldown ? "default" : undefined,
+            }}
+            onClick={() => copy(content)}
+        >
+            {copyCooldown ? "Copied!" : "Copy"}
+        </button>
+
+    );
+}
diff --git a/src/plugins/shikiCodeblocks/components/Header.tsx b/src/plugins/shikiCodeblocks/components/Header.tsx
new file mode 100644
index 0000000..c2db386
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/components/Header.tsx
@@ -0,0 +1,42 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Language } from "../api/languages";
+import { DeviconSetting } from "../types";
+import { cl } from "../utils/misc";
+
+export interface HeaderProps {
+    langName?: string;
+    useDevIcon: DeviconSetting;
+    shikiLang: Language | null;
+}
+
+export function Header({ langName, useDevIcon, shikiLang }: HeaderProps) {
+    if (!langName) return <></>;
+
+    return (
+        <div className={cl("lang")}>
+            {useDevIcon !== DeviconSetting.Disabled && shikiLang?.devicon && (
+                <i
+                    className={`devicon-${shikiLang.devicon}${useDevIcon === DeviconSetting.Color ? " colored" : ""}`}
+                />
+            )}
+            {langName}
+        </div>
+    );
+}
diff --git a/src/plugins/shikiCodeblocks/components/Highlighter.tsx b/src/plugins/shikiCodeblocks/components/Highlighter.tsx
new file mode 100644
index 0000000..6067fd8
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/components/Highlighter.tsx
@@ -0,0 +1,123 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import ErrorBoundary from "@components/ErrorBoundary";
+import { useAwaiter } from "@utils/misc";
+import { useIntersection } from "@utils/react";
+import { hljs, React } from "@webpack/common";
+
+import { resolveLang } from "../api/languages";
+import { shiki } from "../api/shiki";
+import { useShikiSettings } from "../hooks/useShikiSettings";
+import { useTheme } from "../hooks/useTheme";
+import { hex2Rgb } from "../utils/color";
+import { cl, shouldUseHljs } from "../utils/misc";
+import { ButtonRow } from "./ButtonRow";
+import { Code } from "./Code";
+import { Header } from "./Header";
+
+export interface ThemeBase {
+    plainColor: string;
+    accentBgColor: string;
+    accentFgColor: string;
+    backgroundColor: string;
+}
+
+export interface HighlighterProps {
+    lang?: string;
+    content: string;
+    isPreview: boolean;
+}
+
+export const createHighlighter = (props: HighlighterProps) => (
+    <ErrorBoundary>
+        <Highlighter {...props} />
+    </ErrorBoundary>
+);
+export const Highlighter = ({
+    lang,
+    content,
+    isPreview,
+}: HighlighterProps) => {
+    const { tryHljs, useDevIcon, bgOpacity } = useShikiSettings(["tryHljs", "useDevIcon", "bgOpacity"]);
+    const { id: currentThemeId, theme: currentTheme } = useTheme();
+
+    const shikiLang = lang ? resolveLang(lang) : null;
+    const useHljs = shouldUseHljs({ lang, tryHljs });
+
+    const [preRef, isIntersecting] = useIntersection(true);
+
+    const [tokens] = useAwaiter(async () => {
+        if (!shikiLang || useHljs || !isIntersecting) return null;
+        return await shiki.tokenizeCode(content, lang!);
+    }, {
+        fallbackValue: null,
+        deps: [lang, content, currentThemeId, isIntersecting],
+    });
+
+    const themeBase: ThemeBase = {
+        plainColor: currentTheme?.fg || "var(--text-normal)",
+        accentBgColor:
+            currentTheme?.colors?.["statusBar.background"] || (useHljs ? "#7289da" : "#007BC8"),
+        accentFgColor: currentTheme?.colors?.["statusBar.foreground"] || "#FFF",
+        backgroundColor:
+            currentTheme?.colors?.["editor.background"] || "var(--background-secondary)",
+    };
+
+    let langName;
+    if (lang) langName = useHljs ? hljs?.getLanguage?.(lang)?.name : shikiLang?.name;
+
+    const preClasses = [cl("root")];
+    if (!langName) preClasses.push(cl("plain"));
+    if (isPreview) preClasses.push(cl("preview"));
+
+    return (
+        <pre
+            ref={preRef}
+            className={preClasses.join(" ")}
+            style={{
+                backgroundColor: useHljs
+                    ? themeBase.backgroundColor
+                    : `rgba(${hex2Rgb(themeBase.backgroundColor)
+                        .concat(bgOpacity / 100)
+                        .join(", ")})`,
+                color: themeBase.plainColor,
+            }}
+        >
+            <code>
+                <Header
+                    langName={langName}
+                    useDevIcon={useDevIcon}
+                    shikiLang={shikiLang}
+                />
+                <Code
+                    theme={themeBase}
+                    useHljs={useHljs}
+                    lang={lang}
+                    content={content}
+                    tokens={tokens}
+                />
+                {!isPreview && <ButtonRow
+                    content={content}
+                    theme={themeBase}
+                />}
+            </code>
+        </pre>
+    );
+};
+
diff --git a/src/plugins/shikiCodeblocks/hooks/useCopyCooldown.ts b/src/plugins/shikiCodeblocks/hooks/useCopyCooldown.ts
new file mode 100644
index 0000000..414500b
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/hooks/useCopyCooldown.ts
@@ -0,0 +1,34 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Clipboard, React } from "@webpack/common";
+
+export function useCopyCooldown(cooldown: number) {
+    const [copyCooldown, setCopyCooldown] = React.useState(false);
+
+    function copy(text: string) {
+        Clipboard.copy(text);
+        setCopyCooldown(true);
+
+        setTimeout(() => {
+            setCopyCooldown(false);
+        }, cooldown);
+    }
+
+    return [copyCooldown, copy] as const;
+}
diff --git a/src/plugins/shikiCodeblocks/hooks/useShikiSettings.ts b/src/plugins/shikiCodeblocks/hooks/useShikiSettings.ts
new file mode 100644
index 0000000..416f8e9
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/hooks/useShikiSettings.ts
@@ -0,0 +1,25 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { useSettings } from "@api/settings";
+
+import { ShikiSettings } from "../types";
+
+export function useShikiSettings(settings: (keyof ShikiSettings)[]) {
+    return useSettings(settings.map(setting => `plugins.ShikiCodeblocks.${setting}`)).plugins.ShikiCodeblocks as ShikiSettings;
+}
diff --git a/src/plugins/shikiCodeblocks/hooks/useTheme.ts b/src/plugins/shikiCodeblocks/hooks/useTheme.ts
new file mode 100644
index 0000000..fae5796
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/hooks/useTheme.ts
@@ -0,0 +1,49 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { React } from "@webpack/common";
+
+type Shiki = typeof import("../api/shiki").shiki;
+interface ThemeState {
+    id: Shiki["currentThemeUrl"],
+    theme: Shiki["currentTheme"],
+}
+
+const currentTheme: ThemeState = {
+    id: null,
+    theme: null,
+};
+
+const themeSetters = new Set<React.Dispatch<React.SetStateAction<ThemeState>>>();
+
+export const useTheme = (): ThemeState => {
+    const [, setTheme] = React.useState<ThemeState>(currentTheme);
+
+    React.useEffect(() => {
+        themeSetters.add(setTheme);
+        return () => void themeSetters.delete(setTheme);
+    }, []);
+
+    return currentTheme;
+};
+
+export function dispatchTheme(state: ThemeState) {
+    if (currentTheme.id === state.id) return;
+    Object.assign(currentTheme, state);
+    themeSetters.forEach(setTheme => setTheme(state));
+}
diff --git a/src/plugins/shikiCodeblocks/index.ts b/src/plugins/shikiCodeblocks/index.ts
new file mode 100644
index 0000000..a8be92a
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/index.ts
@@ -0,0 +1,154 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Devs } from "@utils/constants";
+import { parseUrl } from "@utils/misc";
+import { wordsFromPascal, wordsToTitle } from "@utils/text";
+import definePlugin, { OptionType } from "@utils/types";
+
+import cssText from "~fileContent/style.css";
+
+import { Settings } from "../../Vencord";
+import { shiki } from "./api/shiki";
+import { themes } from "./api/themes";
+import { createHighlighter } from "./components/Highlighter";
+import { DeviconSetting, HljsSetting, ShikiSettings, StyleSheets } from "./types";
+import { clearStyles, removeStyle, setStyle } from "./utils/createStyle";
+
+const themeNames = Object.keys(themes);
+const devIconCss = "@import url('https://cdn.jsdelivr.net/gh/devicons/devicon@v2.10.1/devicon.min.css');";
+
+const getSettings = () => Settings.plugins.ShikiCodeblocks as ShikiSettings;
+
+export default definePlugin({
+    name: "ShikiCodeblocks",
+    description: "Brings vscode-style codeblocks into Discord, powered by Shiki",
+    authors: [Devs.Vap],
+    patches: [
+        {
+            find: "codeBlock:{react:function",
+            replacement: {
+                match: /codeBlock:\{react:function\((.),(.),(.)\)\{/,
+                replace: "$&return Vencord.Plugins.plugins.ShikiCodeblocks.renderHighlighter($1,$2,$3);",
+            },
+        },
+    ],
+    start: async () => {
+        setStyle(cssText, StyleSheets.Main);
+        if (getSettings().useDevIcon !== DeviconSetting.Disabled)
+            setStyle(devIconCss, StyleSheets.DevIcons);
+
+        await shiki.init(getSettings().customTheme || getSettings().theme);
+    },
+    stop: () => {
+        shiki.destroy();
+        clearStyles();
+    },
+    options: {
+        theme: {
+            type: OptionType.SELECT,
+            description: "Default themes",
+            options: themeNames.map(themeName => ({
+                label: wordsToTitle(wordsFromPascal(themeName)),
+                value: themes[themeName],
+                default: themes[themeName] === themes.DarkPlus,
+            })),
+            disabled: () => !!getSettings().customTheme,
+            onChange: shiki.setTheme,
+        },
+        customTheme: {
+            type: OptionType.STRING,
+            description: "A link to a custom vscode theme",
+            placeholder: themes.MaterialCandy,
+            isValid: value => {
+                if (!value) return true;
+                const url = parseUrl(value);
+                if (!url) return "Must be a valid URL";
+
+                if (!url.pathname.endsWith(".json")) return "Must be a json file";
+
+                return true;
+            },
+            onChange: value => shiki.setTheme(value || getSettings().theme),
+        },
+        tryHljs: {
+            type: OptionType.SELECT,
+            description: "Use the more lightweight default Discord highlighter and theme.",
+            options: [
+                {
+                    label: "Never",
+                    value: HljsSetting.Never,
+                },
+                {
+                    label: "Prefer Shiki instead of Highlight.js",
+                    value: HljsSetting.Secondary,
+                    default: true,
+                },
+                {
+                    label: "Prefer Highlight.js instead of Shiki",
+                    value: HljsSetting.Primary,
+                },
+                {
+                    label: "Always",
+                    value: HljsSetting.Always,
+                },
+            ],
+        },
+        useDevIcon: {
+            type: OptionType.SELECT,
+            description: "How to show language icons on codeblocks",
+            options: [
+                {
+                    label: "Disabled",
+                    value: DeviconSetting.Disabled,
+                },
+                {
+                    label: "Colorless",
+                    value: DeviconSetting.Greyscale,
+                    default: true,
+                },
+                {
+                    label: "Colored",
+                    value: DeviconSetting.Color,
+                },
+            ],
+            onChange: (newValue: DeviconSetting) => {
+                if (newValue === DeviconSetting.Disabled) removeStyle(StyleSheets.DevIcons);
+                else setStyle(devIconCss, StyleSheets.DevIcons);
+            },
+        },
+        bgOpacity: {
+            type: OptionType.SLIDER,
+            description: "Background opacity",
+            markers: [0, 20, 40, 60, 80, 100],
+            default: 100,
+            stickToMarkers: false,
+        },
+    },
+
+    // exports
+    shiki,
+    createHighlighter,
+    renderHighlighter: ({ lang, content }: { lang: string; content: string; }) => {
+        return createHighlighter({
+            lang,
+            content,
+            isPreview: false,
+        });
+    },
+});
diff --git a/src/plugins/shikiCodeblocks/style.css b/src/plugins/shikiCodeblocks/style.css
new file mode 100644
index 0000000..119ff80
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/style.css
@@ -0,0 +1,100 @@
+.shiki-root {
+    border-radius: 4px;
+}
+
+.shiki-root code {
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+    position: relative;
+
+    font-size: 0.875rem;
+    line-height: 1.125rem;
+    text-indent: 0;
+    white-space: pre-wrap;
+    background: transparent;
+    border: none;
+}
+
+.shiki-root [class^='devicon-'],
+.shiki-root [class*=' devicon-'] {
+    margin-right: 8px;
+    user-select: none;
+}
+
+.shiki-plain code {
+    padding-top: 8px;
+}
+
+.shiki-btns {
+    font-size: 1em;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+}
+
+.shiki-root:hover .shiki-btns {
+    opacity: 1;
+}
+
+.shiki-btn {
+    border-radius: 4px 4px 0 0;
+    padding: 4px 8px;
+}
+
+.shiki-btn~.shiki-btn {
+    margin-left: 4px;
+}
+
+.shiki-btn:last-child {
+    border-radius: 4px 0;
+}
+
+.shiki-spinner-container {
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    position: absolute;
+    justify-content: center;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.shiki-preview {
+    margin-bottom: 2em;
+}
+
+.shiki-lang {
+    padding: 0 5px;
+    margin-bottom: 6px;
+    font-weight: bold;
+    text-transform: capitalize;
+    display: flex;
+    align-items: center;
+}
+
+.shiki-table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.shiki-table tr {
+    height: 19px;
+    width: 100%;
+}
+
+.shiki-root td:first-child {
+    border-right: 1px solid transparent;
+    padding-left: 5px;
+    padding-right: 8px;
+    user-select: none;
+}
+
+.shiki-root td:last-child {
+    padding-left: 8px;
+    word-break: break-word;
+    width: 100%;
+}
diff --git a/src/plugins/shikiCodeblocks/types.ts b/src/plugins/shikiCodeblocks/types.ts
new file mode 100644
index 0000000..ee5aa9e
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/types.ts
@@ -0,0 +1,78 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import type {
+    ILanguageRegistration,
+    IShikiTheme,
+    IThemedToken,
+    IThemeRegistration,
+} from "@vap/shiki";
+
+import type { Settings } from "../../Vencord";
+
+/** This must be atleast a subset of the `@vap/shiki-worker` spec */
+export type ShikiSpec = {
+    setOnigasm: ({ wasm }: { wasm: string; }) => Promise<void>;
+    setHighlighter: ({ theme, langs }: {
+        theme: IThemeRegistration | void;
+        langs: ILanguageRegistration[];
+    }) => Promise<void>;
+    loadTheme: ({ theme }: {
+        theme: string | IShikiTheme;
+    }) => Promise<void>;
+    getTheme: ({ theme }: { theme: string; }) => Promise<{ themeData: string; }>;
+    loadLanguage: ({ lang }: { lang: ILanguageRegistration; }) => Promise<void>;
+    codeToThemedTokens: ({
+        code,
+        lang,
+        theme,
+    }: {
+        code: string;
+        lang?: string;
+        theme?: string;
+    }) => Promise<IThemedToken[][]>;
+};
+
+export enum StyleSheets {
+    Main = "MAIN",
+    DevIcons = "DEVICONS",
+}
+
+export enum HljsSetting {
+    Never = "NEVER",
+    Secondary = "SECONDARY",
+    Primary = "PRIMARY",
+    Always = "ALWAYS",
+}
+export enum DeviconSetting {
+    Disabled = "DISABLED",
+    Greyscale = "GREYSCALE",
+    Color = "COLOR"
+}
+
+type CommonSettings = {
+    [K in keyof Settings["plugins"][string]as K extends `${infer V}` ? K : never]: Settings["plugins"][string][K];
+};
+
+export interface ShikiSettings extends CommonSettings {
+    theme: string;
+    customTheme: string;
+    tryHljs: HljsSetting;
+    useDevIcon: DeviconSetting;
+    bgOpacity: number;
+}
diff --git a/src/plugins/shikiCodeblocks/utils/color.ts b/src/plugins/shikiCodeblocks/utils/color.ts
new file mode 100644
index 0000000..e74ec52
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/utils/color.ts
@@ -0,0 +1,32 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+export function hex2Rgb(hex: string) {
+    hex = hex.slice(1);
+    if (hex.length < 6)
+        hex = hex
+            .split("")
+            .map(c => c + c)
+            .join("");
+    if (hex.length === 6) hex += "ff";
+    if (hex.length > 6) hex = hex.slice(0, 6);
+    return hex
+        .split(/(..)/)
+        .filter(Boolean)
+        .map(c => parseInt(c, 16));
+}
diff --git a/src/plugins/shikiCodeblocks/utils/createStyle.ts b/src/plugins/shikiCodeblocks/utils/createStyle.ts
new file mode 100644
index 0000000..734f7dc
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/utils/createStyle.ts
@@ -0,0 +1,36 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+const styles = new Map<string, HTMLStyleElement>();
+
+export function setStyle(css: string, id: string) {
+    const style = document.createElement("style");
+    style.innerText = css;
+    document.head.appendChild(style);
+    styles.set(id, style);
+}
+
+export function removeStyle(id: string) {
+    styles.get(id)?.remove();
+    return styles.delete(id);
+}
+
+export const clearStyles = () => {
+    styles.forEach(style => style.remove());
+    styles.clear();
+};
diff --git a/src/plugins/shikiCodeblocks/utils/misc.ts b/src/plugins/shikiCodeblocks/utils/misc.ts
new file mode 100644
index 0000000..1342ff5
--- /dev/null
+++ b/src/plugins/shikiCodeblocks/utils/misc.ts
@@ -0,0 +1,50 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { hljs } from "@webpack/common";
+
+import { resolveLang } from "../api/languages";
+import { HighlighterProps } from "../components/Highlighter";
+import { HljsSetting, ShikiSettings } from "../types";
+
+export const cl = (className: string) => `shiki-${className}`;
+
+export const shouldUseHljs = ({
+    lang,
+    tryHljs,
+}: {
+    lang: HighlighterProps["lang"],
+    tryHljs: ShikiSettings["tryHljs"],
+}) => {
+    const hljsLang = lang ? hljs?.getLanguage?.(lang) : null;
+    const shikiLang = lang ? resolveLang(lang) : null;
+    const langName = shikiLang?.name;
+
+    switch (tryHljs) {
+        case HljsSetting.Always:
+            return true;
+        case HljsSetting.Primary:
+            return !!hljsLang || lang === "";
+        case HljsSetting.Secondary:
+            return !langName && !!hljsLang;
+        case HljsSetting.Never:
+            return false;
+    }
+
+    return false;
+};
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index eead2a3..f45e8b0 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -157,8 +157,12 @@ export const Devs = Object.freeze({
         name: "Luny",
         id: 821472922140803112n
     },
+    Vap: {
+        name: "Vap0r1ze",
+        id: 454072114492866560n
+    },
     KingFish: {
         name: "King Fish",
         id: 499400512559382538n
-    }
+    },
 });
diff --git a/src/utils/dependencies.ts b/src/utils/dependencies.ts
index a7766de..ed26644 100644
--- a/src/utils/dependencies.ts
+++ b/src/utils/dependencies.ts
@@ -74,3 +74,7 @@ export interface ApngFrameData {
     frames: ApngFrame[];
     playTime: number;
 }
+
+const shikiWorkerDist = "https://unpkg.com/@vap/shiki-worker@0.0.8/dist";
+export const shikiWorkerSrc = `${shikiWorkerDist}/${IS_DEV ? "index.js" : "index.min.js"}`;
+export const shikiOnigasmSrc = "https://unpkg.com/@vap/shiki@0.10.3/dist/onig.wasm";
diff --git a/src/utils/misc.tsx b/src/utils/misc.tsx
index d9164a0..8b7cea2 100644
--- a/src/utils/misc.tsx
+++ b/src/utils/misc.tsx
@@ -28,7 +28,12 @@ export function makeLazy<T>(factory: () => T): () => T {
     return () => cache ?? (cache = factory());
 }
 
-type AwaiterRes<T> = [T, any, boolean, () => void];
+type AwaiterRes<T> = [T, any, boolean];
+interface AwaiterOpts<T> {
+    fallbackValue: T,
+    deps?: unknown[],
+    onError?(e: any): void,
+}
 /**
  * Await a promise
  * @param factory Factory
@@ -36,26 +41,31 @@ type AwaiterRes<T> = [T, any, boolean, () => void];
  * @returns [value, error, isPending]
  */
 export function useAwaiter<T>(factory: () => Promise<T>): AwaiterRes<T | null>;
-export function useAwaiter<T>(factory: () => Promise<T>, fallbackValue: T): AwaiterRes<T>;
-export function useAwaiter<T>(factory: () => Promise<T>, fallbackValue: null, onError: (e: unknown) => unknown): AwaiterRes<T>;
-export function useAwaiter<T>(factory: () => Promise<T>, fallbackValue: T | null = null, onError?: (e: unknown) => unknown): AwaiterRes<T | null> {
+export function useAwaiter<T>(factory: () => Promise<T>, providedOpts: AwaiterOpts<T>): AwaiterRes<T>;
+export function useAwaiter<T>(factory: () => Promise<T>, providedOpts?: AwaiterOpts<T | null>): AwaiterRes<T | null> {
+    const opts: Required<AwaiterOpts<T | null>> = Object.assign({
+        fallbackValue: null,
+        deps: [],
+        onError: null,
+    }, providedOpts);
     const [state, setState] = React.useState({
-        value: fallbackValue,
+        value: opts.fallbackValue,
         error: null,
         pending: true
     });
-    const [signal, setSignal] = React.useState(0);
 
     React.useEffect(() => {
         let isAlive = true;
+        if (!state.pending) setState({ ...state, pending: true });
+
         factory()
             .then(value => isAlive && setState({ value, error: null, pending: false }))
-            .catch(error => isAlive && (setState({ value: null, error, pending: false }), onError?.(error)));
+            .catch(error => isAlive && (setState({ value: null, error, pending: false }), opts.onError?.(error)));
 
         return () => void (isAlive = false);
-    }, [signal]);
+    }, opts.deps);
 
-    return [state.value, state.error, state.pending, () => setSignal(signal + 1)];
+    return [state.value, state.error, state.pending];
 }
 
 /**
@@ -197,3 +207,24 @@ export function copyWithToast(text: string, toastMessage = "Copied to clipboard!
 export function isObject(obj: unknown): obj is object {
     return typeof obj === "object" && obj !== null && !Array.isArray(obj);
 }
+
+/**
+ * Returns null if value is not a URL, otherwise return URL object.
+ * Avoids having to wrap url checks in a try/catch
+ */
+export function parseUrl(urlString: string): URL | null {
+    try {
+        return new URL(urlString);
+    } catch {
+        return null;
+    }
+}
+
+/**
+ * Checks whether an element is on screen
+ */
+export const checkIntersecting = (el: Element) => {
+    const elementBox = el.getBoundingClientRect();
+    const documentHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
+    return !(elementBox.bottom < 0 || elementBox.top - documentHeight >= 0);
+};
diff --git a/src/utils/react.ts b/src/utils/react.ts
new file mode 100644
index 0000000..8585846
--- /dev/null
+++ b/src/utils/react.ts
@@ -0,0 +1,62 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { React } from "@webpack/common";
+
+import { checkIntersecting } from "./misc";
+
+/**
+ * Check if an element is on screen
+ * @param intersectOnly If `true`, will only update the state when the element comes into view
+ * @returns [refCallback, isIntersecting]
+ */
+export const useIntersection = (intersectOnly = false): [
+    refCallback: React.RefCallback<Element>,
+    isIntersecting: boolean,
+] => {
+    const observerRef = React.useRef<IntersectionObserver | null>(null);
+    const [isIntersecting, setIntersecting] = React.useState(false);
+
+    const refCallback = (element: Element | null) => {
+        observerRef.current?.disconnect();
+        observerRef.current = null;
+
+        if (!element) return;
+
+        if (checkIntersecting(element)) {
+            setIntersecting(true);
+            if (intersectOnly) return;
+        }
+
+        observerRef.current = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                if (entry.target !== element) continue;
+                if (entry.isIntersecting && intersectOnly) {
+                    setIntersecting(true);
+                    observerRef.current?.disconnect();
+                    observerRef.current = null;
+                } else {
+                    setIntersecting(entry.isIntersecting);
+                }
+            }
+        });
+        observerRef.current.observe(element);
+    };
+
+    return [refCallback, isIntersecting];
+};
diff --git a/src/utils/text.ts b/src/utils/text.ts
new file mode 100644
index 0000000..17826e8
--- /dev/null
+++ b/src/utils/text.ts
@@ -0,0 +1,36 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+// Utils for readable text transformations eg: `toTitle(fromKebab())`
+
+// Case style to words
+export const wordsFromCamel = (text: string) => text.split(/(?=[A-Z])/).map(w => w.toLowerCase());
+export const wordsFromSnake = (text: string) => text.toLowerCase().split("_");
+export const wordsFromKebab = (text: string) => text.toLowerCase().split("-");
+export const wordsFromPascal = (text: string) => text.split(/(?=[A-Z])/).map(w => w.toLowerCase());
+export const wordsFromTitle = (text: string) => text.toLowerCase().split(" ");
+
+// Words to case style
+export const wordsToCamel = (words: string[]) =>
+    words.map((w, i) => (i ? w[0].toUpperCase() + w.slice(1) : w)).join("");
+export const wordsToSnake = (words: string[]) => words.join("_").toUpperCase();
+export const wordsToKebab = (words: string[]) => words.join("-").toLowerCase();
+export const wordsToPascal = (words: string[]) =>
+    words.map(w => w[0].toUpperCase() + w.slice(1)).join("");
+export const wordsToTitle = (words: string[]) =>
+    words.map(w => w[0].toUpperCase() + w.slice(1)).join(" ");
diff --git a/src/webpack/common.tsx b/src/webpack/common.tsx
index 8c43577..56846c2 100644
--- a/src/webpack/common.tsx
+++ b/src/webpack/common.tsx
@@ -37,6 +37,8 @@ export const ReactDOM: typeof import("react-dom") = findByPropsLazy("createPorta
 export const RestAPI = findByPropsLazy("getAPIBaseURL", "get");
 export const moment: typeof import("moment") = findByPropsLazy("parseTwoDigitYear");
 
+export const hljs: typeof import("highlight.js") = findByPropsLazy("highlight");
+
 export const MessageStore = findByPropsLazy("getRawMessages") as Omit<Stores.MessageStore, "getMessages"> & {
     getMessages(chanId: string): any;
 };