From 1bcd64c2b4e413d3ae6b98cbd1e6ffa077cd4abf Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 4 Oct 2022 18:46:12 +0200
Subject: [PATCH] feat: code snippet

---
 package-lock.json                             |  27 ++++
 package.json                                  |   3 +-
 src/lib/components/code.svelte                | 116 ++++++++++++++++--
 .../overview/platforms/+page.svelte           |  49 +++++++-
 4 files changed, 178 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3298c77e4..333cccdd4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
                 "@aw-labs/ui": "0.0.0-55",
                 "echarts": "^5.3.3",
                 "highlight.js": "^11.6.0",
+                "prismjs": "^1.29.0",
                 "tippy.js": "^6.3.7",
                 "web-vitals": "^2.1.4"
             },
@@ -26,6 +27,7 @@
                 "@testing-library/svelte": "3.1.3",
                 "@testing-library/user-event": "^14.4.3",
                 "@types/gtag.js": "^0.0.11",
+                "@types/prismjs": "^1.26.0",
                 "@typescript-eslint/eslint-plugin": "^5.37.0",
                 "@typescript-eslint/parser": "^5.37.0",
                 "@vitest/ui": "^0.23.2",
@@ -1767,6 +1769,12 @@
             "dev": true,
             "peer": true
         },
+        "node_modules/@types/prismjs": {
+            "version": "1.26.0",
+            "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz",
+            "integrity": "sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==",
+            "dev": true
+        },
         "node_modules/@types/pug": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
@@ -6664,6 +6672,14 @@
                 "url": "https://github.com/chalk/ansi-styles?sponsor=1"
             }
         },
+        "node_modules/prismjs": {
+            "version": "1.29.0",
+            "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+            "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/process-nextick-args": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -9561,6 +9577,12 @@
             "dev": true,
             "peer": true
         },
+        "@types/prismjs": {
+            "version": "1.26.0",
+            "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz",
+            "integrity": "sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==",
+            "dev": true
+        },
         "@types/pug": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
@@ -13180,6 +13202,11 @@
                 }
             }
         },
+        "prismjs": {
+            "version": "1.29.0",
+            "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+            "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q=="
+        },
         "process-nextick-args": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
diff --git a/package.json b/package.json
index 93a6b36e5..c2fc1c43e 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
         "@aw-labs/icons": "0.0.0-55",
         "@aw-labs/ui": "0.0.0-55",
         "echarts": "^5.3.3",
-        "highlight.js": "^11.6.0",
+        "prismjs": "^1.29.0",
         "tippy.js": "^6.3.7",
         "web-vitals": "^2.1.4"
     },
@@ -36,6 +36,7 @@
         "@testing-library/svelte": "3.1.3",
         "@testing-library/user-event": "^14.4.3",
         "@types/gtag.js": "^0.0.11",
+        "@types/prismjs": "^1.26.0",
         "@typescript-eslint/eslint-plugin": "^5.37.0",
         "@typescript-eslint/parser": "^5.37.0",
         "@vitest/ui": "^0.23.2",
diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 76860d59c..a4d411144 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -1,15 +1,111 @@
-<script context="module">
-    import 'highlight.js/scss/default.scss';
-</script>
-
 <script lang="ts">
-    import Highlight from 'highlight.js';
-    import { onMount } from 'svelte';
+    import Prism from 'prismjs';
+    import 'prismjs/components/prism-dart';
+    import 'prismjs/plugins/autoloader/prism-autoloader';
+    import 'prismjs/plugins/line-numbers/prism-line-numbers';
+    import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
+    import { afterUpdate } from 'svelte';
 
-    let container: HTMLElement;
-    onMount(() => {
-        Highlight.highlightElement(container);
+    export let code = '';
+    export let language: 'js' | 'html' | 'dart' | 'json';
+
+    afterUpdate(async () => {
+        Prism.highlightAll();
     });
 </script>
 
-<pre><code class="language-js" bind:this={container}><slot /></code></pre>
+<pre class={`language-${language} line-numbers`}><code>{@html code}</code></pre>
+
+<style lang="scss" global>
+    @import 'prismjs/themes/prism.css';
+
+    code,
+    pre {
+        &[class*='language-'] {
+            color: #fcfcff;
+            text-shadow: none;
+            font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+            body.theme-light & {
+                color: #373b4d;
+            }
+        }
+        ::selection,
+        &::selection {
+            text-shadow: none;
+            background: #b3d4fc;
+        }
+    }
+
+    :not(pre) > code[class*='language-'],
+    pre[class*='language-'] {
+        background: #1b1b28;
+        body.theme-light & {
+            background: #fcfcff;
+        }
+    }
+    .token {
+        &.comment,
+        &.prolog,
+        &.doctype,
+        &.cdata {
+            color: slategray;
+        }
+
+        &.punctuation {
+            color: #999;
+        }
+        &.property,
+        &.tag,
+        &.boolean,
+        &.number,
+        &.constant,
+        &.symbol,
+        &.deleted,
+        &.selector,
+        &.attr-name,
+        &.string,
+        &.char,
+        &.builtin,
+        &.inserted {
+            color: #fdc584;
+            body.theme-light & {
+                color: #e49545;
+            }
+        }
+        &.operator,
+        &.entity,
+        &.url,
+        .language-css &.string,
+        .style &.string {
+            color: #9a6e3a;
+            background: none;
+            body.theme-light & {
+                color: #373b4d;
+            }
+        }
+
+        &.atrule,
+        &.attr-value,
+        &.keyword {
+            color: #cbb1fc;
+            body.theme-light & {
+                color: #6a6af7;
+            }
+        }
+        &.function,
+        &.class-name {
+            color: #ffa1ce;
+            body.theme-light & {
+                color: #f02e7f;
+            }
+        }
+        &.regex,
+        &.important,
+        &.variable {
+            color: #a1c4ff;
+            body.theme-light & {
+                color: #62aed2;
+            }
+        }
+    }
+</style>
diff --git a/src/routes/console/project-[project]/overview/platforms/+page.svelte b/src/routes/console/project-[project]/overview/platforms/+page.svelte
index 740c0a0a4..ff1f4ea8d 100644
--- a/src/routes/console/project-[project]/overview/platforms/+page.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/+page.svelte
@@ -13,13 +13,50 @@
 </script>
 
 <Code
-    >{`
-document.addEventListener('DOMContentLoaded', (event) => {
-  document.querySelectorAll('pre code').forEach((el) => {
-    hljs.highlightElement(el);
+    language="js"
+    code={`import { Client, Account } from "appwrite";
+
+const client = new Client();
+
+const account = new Account(client);
+
+client
+    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
+    .setProject('5df5acd0d48c2') // Your project ID
+;
+
+const promise = account.createEmailSession('email@example.com', 'password');
+
+promise.then(function (response) {
+    console.log(response); // Success
+}, function (error) {
+    console.log(error); // Failure
+});`} />
+<Code
+    language="dart"
+    code={`import 'package:appwrite/appwrite.dart';
+
+void main() { // Init SDK
+  Client client = Client();
+  Account account = Account(client);
+
+  client
+    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
+    .setProject('5df5acd0d48c2') // Your project ID
+  ;
+  Future result = account.create(
+    userId: '[USER_ID]',
+    email: 'email@example.com',
+    password: 'password',
+  );
+
+  result
+    .then((response) {
+      print(response);
+    }).catchError((error) {
+      print(error.response);
   });
-});
-`}</Code>
+}`} />
 <div class="common-section u-flex u-gap-12">
     <h3 class="heading-level-7">Platforms</h3>
     <span class="u-margin-inline-start-auto">