React Slides

* Adds useState
* State
* useEffect
* Side Effects

src/lib/languages/index.ts

@@ -0,0 +1,6 @@
+import { svelte } from './svelte'
+import type { Hljs } from './types'
+
+export function registerLanguages(hljs: Hljs) {
+	hljs.registerLanguage('svelte', svelte)
+}

src/lib/languages/svelte.ts

@@ -0,0 +1,50 @@
+import type { Hljs } from './types'
+
+export function svelte(hljs: Hljs) {
+	return {
+		subLanguage: 'xml',
+		contains: [
+			hljs.COMMENT('<!--', '-->', {
+				relevance: 10,
+			}),
+			{
+				begin: /^(\s*)(<script(\s*context="module")?>)/gm,
+				end: /^(\s*)(<\/script>)/gm,
+				subLanguage: 'javascript',
+				excludeBegin: true,
+				excludeEnd: true,
+				contains: [
+					{
+						begin: /^(\s*)(\$:)/gm,
+						end: /(\s*)/gm,
+						className: 'keyword',
+					},
+				],
+			},
+			{
+				begin: /^(\s*)(<style.*>)/gm,
+				end: /^(\s*)(<\/style>)/gm,
+				subLanguage: 'css',
+				excludeBegin: true,
+				excludeEnd: true,
+			},
+			{
+				begin: /\{/gm,
+				end: /\}/gm,
+				subLanguage: 'javascript',
+				contains: [
+					{
+						begin: /[\{]/,
+						end: /[\}]/,
+						skip: true,
+					},
+					{
+						begin: /([#:\/@])(if|else|each|await|then|catch|debug|html)/gm,
+						className: 'keyword',
+						relevance: 10,
+					},
+				],
+			},
+		],
+	}
+}

src/lib/languages/types.ts

@@ -0,0 +1,3 @@
+import hljs from 'highlight.js'
+
+export type Hljs = typeof hljs