feat: highlight json

- update svelte to 3.23.0
- add svelte highlight
- add highlight to home page json.

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dopry/svelte-oidc",
-	"version": "0.0.0",
+	"version": "0.1.0",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -2897,6 +2897,27 @@
 			"integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==",
 			"dev": true
 		},
+		"handlebars": {
+			"version": "4.7.6",
+			"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.6.tgz",
+			"integrity": "sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==",
+			"dev": true,
+			"requires": {
+				"minimist": "^1.2.5",
+				"neo-async": "^2.6.0",
+				"source-map": "^0.6.1",
+				"uglify-js": "^3.1.4",
+				"wordwrap": "^1.0.0"
+			},
+			"dependencies": {
+				"source-map": {
+					"version": "0.6.1",
+					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+					"dev": true
+				}
+			}
+		},
 		"har-schema": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -2960,6 +2981,21 @@
 				}
 			}
 		},
+		"highlight.js": {
+			"version": "9.17.1",
+			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.17.1.tgz",
+			"integrity": "sha512-TA2/doAur5Ol8+iM3Ov7qy3jYcr/QiJ2eDTdRF4dfbjG7AaaB99J5G+zSl11ljbl6cIcahgPY6SKb3sC3EJ0fw==",
+			"dev": true,
+			"requires": {
+				"handlebars": "^4.5.3"
+			}
+		},
+		"highlightjs-svelte": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/highlightjs-svelte/-/highlightjs-svelte-1.0.4.tgz",
+			"integrity": "sha512-YsxXjKw2T8TWiY81HSXfKEf+v+Vgy1eKBV7rpny/eVBfGedJD6OexqiUswmtFkXaBe4kVj6E7IK44XlO7SJcAA==",
+			"dev": true
+		},
 		"http-signature": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -4405,6 +4441,12 @@
 			"integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
 			"dev": true
 		},
+		"neo-async": {
+			"version": "2.6.1",
+			"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
+			"integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
+			"dev": true
+		},
 		"nice-try": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -5918,11 +5960,21 @@
 			}
 		},
 		"svelte": {
-			"version": "3.16.7",
+			"version": "3.23.0",
-			"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.16.7.tgz",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.23.0.tgz",
-			"integrity": "sha512-egrva1UklB1n7KAv179IhDpQzMGAvubJUlOQ9PitmmZmAfrCUEgrQnx2vPxn2s+mGV3aYegXvJ/yQ35N2SfnYQ==",
+			"integrity": "sha512-cnyd96bK/Nw5DnYuB1hzm5cl6+I1fpmdKOteA7KLzU9KGLsLmvWsSkSKbcntzODCLmSySN3HjcgTHRo6/rJNTw==",
 			"dev": true
 		},
+		"svelte-highlight": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/svelte-highlight/-/svelte-highlight-0.6.2.tgz",
+			"integrity": "sha512-rLn5S79YzD+cytREDGRhbzWJkVR0QCxUEuCs0P/9A7cnpMwssZaTQsgNFzTeA655CLfB9vpvpDGr9abkzv7PBQ==",
+			"dev": true,
+			"requires": {
+				"highlight.js": "9.17.1",
+				"highlightjs-svelte": "1.0.4"
+			}
+		},
 		"svelte-preprocess": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-3.3.0.tgz",
@@ -6160,6 +6212,25 @@
 			"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
 			"dev": true
 		},
+		"uglify-js": {
+			"version": "3.9.4",
+			"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.9.4.tgz",
+			"integrity": "sha512-8RZBJq5smLOa7KslsNsVcSH+KOXf1uDU8yqLeNuVKwmT0T3FA0ZoXlinQfRad7SDcbZZRZE4ov+2v71EnxNyCA==",
+			"dev": true,
+			"optional": true,
+			"requires": {
+				"commander": "~2.20.3"
+			},
+			"dependencies": {
+				"commander": {
+					"version": "2.20.3",
+					"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+					"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+					"dev": true,
+					"optional": true
+				}
+			}
+		},
 		"union-value": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -6339,6 +6410,12 @@
 			"integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
 			"dev": true
 		},
+		"wordwrap": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+			"integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
+			"dev": true
+		},
 		"wrap-ansi": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-3.0.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dopry/svelte-oidc",
-	"version": "0.0.0",
+	"version": "0.1.0",
 	"repository": "https://github.com/dopry/svelte-oidc",
 	"description": "Svelte OIDC Component Library",
 	"keywords": [
@@ -71,7 +71,8 @@
 		"rollup-plugin-terser": "5.2.0",
 		"sirv-cli": "0.4.5",
 		"start-server-and-test": "1.10.6",
-		"svelte": "3.16.7",
+		"svelte": "3.23.0",
+		"svelte-highlight": "0.6.2",
 		"svelte-preprocess": "3.3.0"
 	}
 }

src/App.svelte

@@ -1,4 +1,7 @@
 <script>
+import { Highlight } from 'svelte-highlight';
+import { json } from 'svelte-highlight/languages';
+import { arduinoLight as highlightTheme } from "svelte-highlight/styles";
 import {
   OidcContext,
   authError,
@@ -12,6 +15,10 @@ import {
 } from './components/components.module.js';
 </script>
 
+<svelte:head>
+  {@html highlightTheme}
+</svelte:head>
+
 <div class="container">
 <OidcContext
   issuer="process.env.OIDC_ISSUER"
@@ -31,7 +38,7 @@ import {
       <tr><td>isAuthenticated</td><td>{$isAuthenticated}</td></tr>
       <tr><td>accessToken</td><td>{$accessToken}</td></tr>
       <tr><td>idToken</td><td style="word-break: break-all;">{$idToken}</td></tr>
-      <tr><td>userInfo</td><td><pre>{JSON.stringify($userInfo, null, 2)}<pre></td></tr>
+      <tr><td>userInfo</td><td><Highlight language={json} code={JSON.stringify($userInfo, null, 2) || ''} /></td></tr>
       <tr><td>authError</td><td>{$authError}</td></tr>
     </tbody>
   </table>