React Slides

* Adds useState
* State
* useEffect
* Side Effects

3 files changed, 59 insertions, 0 deletions

diff --git a/src/lib/languages/index.ts b/src/lib/languages/index.ts
new file mode 100644
index 0000000..296c1fa
--- /dev/null
+++ b/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)
+}
diff --git a/src/lib/languages/svelte.ts b/src/lib/languages/svelte.ts
new file mode 100644
index 0000000..237c7c7
--- /dev/null
+++ b/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,
+					},
+				],
+			},
+		],
+	}
+}
diff --git a/src/lib/languages/types.ts b/src/lib/languages/types.ts
new file mode 100644
index 0000000..a030e24
--- /dev/null
+++ b/src/lib/languages/types.ts
@@ -0,0 +1,3 @@
+import hljs from 'highlight.js'
+
+export type Hljs = typeof hljs