docs: nicer homepage

package.json

@@ -55,6 +55,7 @@
 		"prettier-plugin-svelte": "^2.7.0",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.5",
+		"svelte-highlight": "^7.4.1",
 		"svelte-preprocess": "^5.0.4",
 		"svelte2tsx": "^0.6.19",
 		"tslib": "^2.3.1",

src/routes/+page.svelte

@@ -1,6 +1,15 @@
 <script lang="ts">
 	import { MathQuill, MathQuillStatic } from '$lib/index.ts';
 	import '@fontsource-variable/inter';
+	import Highlight from "svelte-highlight";
+  	import xml from "svelte-highlight/languages/xml";
+	import "svelte-highlight/styles/github.css";
+
+	const code = `<script lang="ts">
+	import { MathQuillSetup, MathQuill } from "svelte-mathquill";
+<\/script>
+<MathQuillSetup \/>
+<MathQuill config={({ autoCommands, autoOperatorNames })} bind:latex={latex}\/>`
 
 	let latex = 'x + \\sqrt{5}';
 	let autoCommands = 'pi theta sqrt sum';
@@ -11,12 +20,14 @@
 
 <main>
 	<h1>
-		svelte-mathquill <span>mathquill wrapper for svelte</span><br/>
+		svelte-mathquill <span>mathquill for svelte</span><br/>
 		<span><a href="https://github.com/LeoDog896/svelte-mathquill">github</a> | <a href="https://www.npmjs.com/package/svelte-mathquill">npm</a></span>
 	</h1>
 
 	<code>npm i -D svelte-mathquill</code><br />
 
+	<h2>Playground</h2>
+
 	<MathQuill
 		style="margin: 10px 0;"
 		bind:focused
@@ -25,19 +36,22 @@
 		bind:latex
 	/><br />
 
-	Auto Commands: <input placeholder="Auto Commands" bind:value={autoCommands} /><br />
-	Auto Operator Names: <input placeholder="Auto Operator Names" bind:value={autoOperatorNames} /><br
-	/>
-	No outline / border (these are common css controls): <input type="checkbox" bind:checked={noBorderOutline} /><br />
-	Is focused: {focused}<br />
-	Static: <MathQuillStatic {latex} /><br />
-	Latex: <input placeholder="Result (editable) Latex" bind:value={latex} />
-	<p class="py-4">
-		Code: <code
-			>{`<MathQuill config={({ autoCommands, autoOperatorNames })} bind:latex={latex}/><br/>`}</code
-		>
+	<p>Auto Commands: <input placeholder="Auto Commands" bind:value={autoCommands} /></p>
+	<p>Auto Operator Names: <input placeholder="Auto Operator Names" bind:value={autoOperatorNames} /></p>
+	<p>No outline / border: <input type="checkbox" bind:checked={noBorderOutline} /></p>
+	<p>Is focused: {focused}</p>
+	<p>Static: <MathQuillStatic {latex} /></p>
+	<p>Latex: <input placeholder="Result (editable) Latex" bind:value={latex} /></p>
+
+	<h2>Code</h2>
+
+	<p>
+		Since MathQuill is (very) legacy, <code>MathQuillSetup</code> imports all resources
+		from a CDN, injecting jQuery, and MathQuill's CSS and JS resources.
 	</p>
 
+	<Highlight language={xml} {code} />
+
 	<h2>Examples</h2>
 
 	<ul>
@@ -53,8 +67,8 @@
 	}
 
 	h1 {
-		margin-top: 4rem;
 		padding: 1rem;
+		margin-top: 0;
 		width: calc(100% - (4rem + 1rem) * 2);
 		border-bottom: 1px dotted #000;
 	}

yarn.lock

@@ -968,6 +968,11 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+[email protected]:
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
+  integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
+
 ignore-walk@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-5.0.1.tgz#5f199e23e1288f518d90358d461387788a154776"
@@ -1531,6 +1536,13 @@ svelte-check@^3.4.5:
     svelte-preprocess "^5.0.3"
     typescript "^5.0.3"
 
+svelte-highlight@^7.4.1:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/svelte-highlight/-/svelte-highlight-7.4.1.tgz#8e809f7edda2f01f43518c52a34b19751fa58e1f"
+  integrity sha512-ZjPUQn16bESqmzXzrQXfWKidwUabHNxysGIOUdbsxqBtDe8s33V9z6K697sszQITQ9k6hrMUpTICWLm2GIW5xQ==
+  dependencies:
+    highlight.js "11.9.0"
+
 svelte-hmr@^0.15.2:
   version "0.15.2"
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.15.2.tgz#d2f6fc82e040f2734abd54cea5cbef46828f2538"