docs: update documentation

Author: metonym

README.md

@@ -62,8 +62,8 @@ This component exports `highlight.js` themes in JavaScript. Import the theme fro
 ```svelte
 <script>
   import Highlight from "svelte-highlight";
-  import typescript from "svelte-highlight/src/languages/typescript";
-  import github from "svelte-highlight/src/styles/github";
+  import typescript from "svelte-highlight/languages/typescript";
+  import github from "svelte-highlight/styles/github";
 
   const code = "const add = (a: number, b: number) => a + b;";
 </script>
@@ -82,8 +82,8 @@ Depending on your set-up, importing a CSS StyleSheet in Svelte may require a CSS
 ```svelte
 <script>
   import { Highlight } from "svelte-highlight";
-  import typescript from "svelte-highlight/src/languages/typescript";
-  import "svelte-highlight/src/styles/github.css";
+  import typescript from "svelte-highlight/languages/typescript";
+  import "svelte-highlight/styles/github.css";
 
   const code = "const add = (a: number, b: number) => a + b;";
 </script>
@@ -98,9 +98,9 @@ Use the `HighlightSvelte` component for Svelte syntax highlighting.
 ```svelte
 <script>
   import { HighlightSvelte } from "svelte-highlight";
-  import github from "svelte-highlight/src/styles/github";
+  import github from "svelte-highlight/styles/github";
 
-  $: code = "<button on:click={() => (count += 1)}>Increment {count}</button>";
+  $: code = `<button on:click={() => { console.log(0); }}>Increment {count}</button>`;
 </script>
 
 <svelte:head>
@@ -114,10 +114,14 @@ Use the `HighlightSvelte` component for Svelte syntax highlighting.
 
 The `HighlightAuto` component invokes the `highlightAuto` API from `highlight.js`.
 
+Note that auto-highlighting will result in a larger bundle size in order to infer a language.
+
+Prefer to specify a language if possible.
+
 ```svelte
 <script>
   import { HighlightAuto } from "svelte-highlight";
-  import github from "svelte-highlight/src/styles/github";
+  import github from "svelte-highlight/styles/github";
 
   $: code = `body {\n  padding: 0;\n  color: red;\n}`;
 </script>
@@ -233,7 +237,7 @@ Refer to the highlight.js [language definition guide](https://highlightjs.readth
 
 Svelte version 3.31 or greater is required to use this component with TypeScript.
 
-TypeScript definitions are located in the [src folder](./src).
+TypeScript definitions are auto-generated by SvelteKit.
 
 ## [Supported Languages](SUPPORTED_LANGUAGES.md)
 

demo/lib/ScopedStyle.svelte

@@ -8,11 +8,11 @@
 
   $: code = `<script>
   import Highlight from "svelte-highlight";
-  import typescript from "svelte-highlight/src/languages/typescript";
+  import typescript from "svelte-highlight/languages/typescript";
   ${
     useInjectedStyles
-      ? `import ${moduleName} from "svelte-highlight/src/styles/${name}";`
-      : `import "svelte-highlight/src/styles/${name}.css";`
+      ? `import ${moduleName} from "svelte-highlight/styles/${name}";`
+      : `import "svelte-highlight/styles/${name}.css";`
   }
 
   const code = "const add = (a: number, b: number) => a + b;";

demo/lib/ScopedStyleAuto.svelte

@@ -7,7 +7,7 @@
 
   $: code = `<script>
   import { HighlightAuto } from "svelte-highlight";
-  import ${moduleName} from "svelte-highlight/src/styles/${name}";
+  import ${moduleName} from "svelte-highlight/styles/${name}";
   
   const code = ".body { padding: 0; margin: 0; }";
 <\/script>

demo/lib/ScopedStyleSvelte.svelte

@@ -7,7 +7,7 @@
 
   $: code = `<script>
   import { HighlightSvelte } from "svelte-highlight";
-  import ${moduleName} from "svelte-highlight/src/styles/${name}";
+  import ${moduleName} from "svelte-highlight/styles/${name}";
   
   const code = \`<button on:click={() => { console.log(0); }}>Click me</button>\`;
 <\/script>

demo/routes/index.svelte

@@ -98,13 +98,20 @@
     </Row>
 
     <p class="mb-5">
-      Refer to the <Link
+      For example set-ups, refer to <Link
         inline
         size="lg"
         rel="external"
         href="https://github.com/metonym/svelte-highlight/tree/master/examples/sveltekit"
       >
-        SvelteKit example set-up
+        examples/sveltekit
+      </Link> or <Link
+        inline
+        size="lg"
+        rel="external"
+        href="https://github.com/metonym/svelte-highlight/tree/master/examples/vite"
+      >
+        examples/vite
       </Link>.
     </p>
   </Column>
@@ -193,6 +200,10 @@
       <code class="code">highlightAuto</code>
       API from <code class="code">highlight.js</code>.
     </p>
+    <p>
+      Note that auto-highlighting will result in a larger bundle size in order
+      to infer a language. Prefer to specify a language if possible.
+    </p>
   </Column>
   <Column noGutter xlg={12}>
     <ScopedStyleAuto name="atom-one-dark" moduleName="atomOneDark" />
@@ -299,13 +310,7 @@
       TypeScript.
     </p>
     <p class="mb-5">
-      TypeScript definitions are located in the <Link
-        inline
-        size="lg"
-        rel="external"
-        href="https://github.com/metonym/svelte-highlight/tree/master/src"
-        >src folder in the GitHub repository</Link
-      >.
+      TypeScript definitions are auto-generated by SvelteKit.
     </p>
   </Column>
 </Row>

demo/routes/languages.svelte

@@ -24,7 +24,7 @@
   import Highlight from "svelte-highlight";
   import ${
     useDirectImport ? moduleName : `{ ${moduleName} }`
-  } from "svelte-highlight/src/languages${useDirectImport ? `/${name}` : ""}";
+  } from "svelte-highlight/languages${useDirectImport ? `/${name}` : ""}";
 <\/script>
 
 <Highlight language={${moduleName}} code="code" />`;

examples/rollup-typescript/package.json

@@ -15,7 +15,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "svelte": "^3.46.4",
     "svelte-check": "2.4.6",
-    "svelte-highlight": "^5.3.2",
+    "svelte-highlight": "^6.0.0",
     "svelte-preprocess": "^4.10.4",
     "tslib": "^2.3.1",
     "typescript": "^4.6.3"

examples/rollup-typescript/public/index.html

@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   </head>
   <body>
     <script src="build/bundle.js"></script>

examples/rollup-typescript/src/App.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Highlight, HighlightAuto } from "svelte-highlight";
-  import typescript from "svelte-highlight/src/languages/typescript";
-  import atomOneDark from "svelte-highlight/src/styles/atom-one-dark";
+  import typescript from "svelte-highlight/languages/typescript";
+  import atomOneDark from "svelte-highlight/styles/atom-one-dark";
 
   const code = "const add = (a: number, b: number) => a + b;";
 </script>

examples/rollup-typescript/yarn.lock

@@ -725,10 +725,10 @@ [email protected]:
     svelte-preprocess "^4.0.0"
     typescript "*"
 
-svelte-highlight@^5.3.2:
-  version "5.3.2"
-  resolved "https://registry.yarnpkg.com/svelte-highlight/-/svelte-highlight-5.3.2.tgz#d58f819d8c94a6a8e71691d60a4d0cfb6d1d3921"
-  integrity sha512-a9FbXm9oXkoUzLZxGaOpi/UZXxt2tO2+TTRQYtz+UpOFbbRGeZx7zG53QHwv7cpT+/kY10sc6VLZGzjBJviv6w==
+svelte-highlight@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/svelte-highlight/-/svelte-highlight-6.0.0.tgz#be499b866a318a2a7d751372a904703597cf0b84"
+  integrity sha512-ug+7lfrj25QThSXyT9bOJEt9UXk7eEtAIWi/hBiO21FKNLfl46NVUmFTyuMtIDVQ/mu/8zkfwBvMOfL8BNJujA==
   dependencies:
     highlight.js "11.5.0"