Add language auto-detection, add YAML, more shell languages

package-lock.json

@@ -20,6 +20,7 @@
         "copy-to-clipboard": "^3.3.3",
         "eslint-config-standard-with-typescript": "^34.0.1",
         "eslint-plugin-svelte3": "^4.0.0",
+        "flourite": "^1.2.2",
         "postcss": "^8.4.21",
         "sass": "^1.59.2",
         "svelte": "^3.55.1",
@@ -2208,6 +2209,15 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/flourite": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/flourite/-/flourite-1.2.2.tgz",
+      "integrity": "sha512-eSRUyfKaJ0dyyas8GOQEqwYCcBymfjS+bMgzQAq2rA6jCbkeCm7upT8o5HmBT3SILzslzeUqEvjak1MjJY+NrA==",
+      "dev": true,
+      "funding": {
+        "url": "https://saweria.co/teknologiumum"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",

package.json

@@ -26,6 +26,7 @@
     "copy-to-clipboard": "^3.3.3",
     "eslint-config-standard-with-typescript": "^34.0.1",
     "eslint-plugin-svelte3": "^4.0.0",
+    "flourite": "^1.2.2",
     "postcss": "^8.4.21",
     "sass": "^1.59.2",
     "svelte": "^3.55.1",

src/lib/Code.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Highlight } from 'svelte-highlight'
+  import flourite from 'flourite'
 
   // Import both dark and light styles
   import { github, githubDark } from 'svelte-highlight/styles'
@@ -22,6 +23,7 @@
     shell,
     php,
     plaintext,
+    yaml,
     type LanguageType
   } from 'svelte-highlight/languages'
 
@@ -33,6 +35,12 @@
 
   // Map lang string to LanguageType
   let language: LanguageType<string>
+
+  // If no language is set, try to detect it using flourite
+  if (!lang) {
+    lang = flourite(text, { shiki: true }).language
+  }
+
   switch (lang) {
     case 'js':
     case 'javascript':
@@ -63,11 +71,18 @@
     case 'sh':
     case 'shell':
     case 'bash':
+    case 'console':
+    case 'shellscript':
+    case 'zsh':
       language = shell
       break
     case 'php':
       language = php
       break
+    case 'yaml':
+    case 'yml':
+      language = yaml
+      break
     default:
       language = plaintext
   }