meta: removed old deps, updated deps, added shiki (#5725)

* meta: removed old deps, updated deps, added shiki

* feat: introduced shiki and rehype pretty code

* feat: updated styles for shiki

* fix: jest setup for new version of js-dom

* feat: introduced rehype-pretty-code

* chore: some css changes for the codeboxes

* chore: use shiki theme hosted by us

* fix: shiki included on deployment

* meta: undo changes

* fix: include shiki languages that we use manually

* chore: manuall import grammar

* meta: removed unsupported languages

* chore: updated text

* chore: better docs

* fix: fallback to plaintext

* fix: white mode colour for codeblock

* meta: ignore certain files

* fix: fixed styles for inline code and etc

---------

Co-authored-by: Michael Esteban <[email protected]>

Author: ovflowd

.eslintignore

@@ -6,8 +6,9 @@ node_modules
 .swc
 build
 
-# Legacy Public Files
-public/static/documents
+# Public Files
+public/node-releases-data.json
+public/blog-posts-data.json
 
 # We don't want to lint/prettify the Coverage Results
 coverage

.prettierignore

@@ -9,9 +9,10 @@ build
 # Files that should not be parsed
 CODEOWNERS
 
-# Legacy Public Files
+# Public Files
 public/static/documents
 public/node-releases-data.json
+public/blog-posts-data.json
 
 # We don't want to lint/prettify the Coverage Results
 coverage

jest.setup.mjs

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

next.dynamic.mjs

@@ -3,14 +3,18 @@
 import { join, normalize, sep } from 'node:path';
 import { readFileSync } from 'node:fs';
 import { VFile } from 'vfile';
+import { getHighlighter } from 'shiki';
 import remarkGfm from 'remark-gfm';
 import remarkHeadings from '@vcarl/remark-headings';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypePrettyCode from 'rehype-pretty-code';
 import rehypeSlug from 'rehype-slug';
+import shikiNordTheme from 'shiki/themes/nord.json';
 import { serialize } from 'next-mdx-remote/serialize';
 import { availableLocales } from './next.locales.mjs';
 import { getMarkdownFiles } from './next.helpers.mjs';
 import { DEFAULT_LOCALE_CODE, MD_EXTENSION_REGEX } from './next.constants.mjs';
+import { SUPPORTED_LANGUAGES } from './shiki.config.mjs';
 
 // allows us to run a glob to get markdown files based on a language folder
 const getPathsByLanguage = async (locale = DEFAULT_LOCALE_CODE, ignored = []) =>
@@ -162,6 +166,15 @@ export const generateStaticProps = async (source = '', filename = '') => {
               properties: { ariaHidden: true, tabIndex: -1, class: 'anchor' },
             },
           ],
+          [
+            rehypePrettyCode,
+            {
+              theme: shikiNordTheme,
+              defaultLang: 'plaintext',
+              getHighlighter: options =>
+                getHighlighter({ ...options, langs: SUPPORTED_LANGUAGES }),
+            },
+          ],
         ],
         remarkPlugins: [remarkGfm, remarkHeadings],
         format: filename.includes('.mdx') ? 'mdx' : 'md',