syntax highliting & bugs

package.json

@@ -8,6 +8,7 @@
     "axios": "^0.20.0",
     "compression": "^1.7.1",
     "dayjs": "^1.8.36",
+    "highlight.js": "^10.3.2",
     "polka": "next",
     "sirv": "^1.0.0",
     "svelte-cloudinary": "^0.1.3"

src/components/PostAttributes.svelte

@@ -3,7 +3,7 @@
   import { readingTimeInMinutes } from '../lib/readingTime'
 
   export let post
-  export let full
+  export let full = false
 
   function format(date) {
     return dj(date).format('MMM D, YYYY')

src/components/WPAdapter.svelte

@@ -1,5 +1,34 @@
 <script>
+  import 'highlight.js/styles/github.css'
+  import hljs from 'highlight.js/lib/core'
+  import javascript from 'highlight.js/lib/languages/javascript'
+  import python from 'highlight.js/lib/languages/python'
+  import yaml from 'highlight.js/lib/languages/yaml'
+  import json from 'highlight.js/lib/languages/json'
+  import bash from 'highlight.js/lib/languages/bash'
+  import docker from 'highlight.js/lib/languages/dockerfile'
+  import rust from 'highlight.js/lib/languages/rust'
+  import css from 'highlight.js/lib/languages/css'
+  import typescript from 'highlight.js/lib/languages/typescript'
+
+  hljs.registerLanguage('javascript', javascript)
+  hljs.registerLanguage('python', python)
+  hljs.registerLanguage('yaml', yaml)
+  hljs.registerLanguage('json', json)
+  hljs.registerLanguage('bash', bash)
+  hljs.registerLanguage('docker', docker)
+  hljs.registerLanguage('rust', rust)
+  hljs.registerLanguage('css', css)
+  hljs.registerLanguage('typescript', typescript)
+
+  import { onMount } from 'svelte'
+
   export let content
+
+  onMount(() => {
+    console.log('Highlight')
+    hljs.initHighlighting()
+  })
 </script>
 
 <style>
@@ -52,6 +81,8 @@
   div :global(pre code) {
     background: initial;
     padding: initial;
+    -moz-tab-size: 2;
+    tab-size: 2;
   }
 
   div :global(h1),

src/routes/_layout.svelte

@@ -33,6 +33,7 @@
     overflow: auto;
     max-width: calc(100% - 4em);
     height: 100%;
+    scroll-behavior: smooth;
   }
 
   @media (max-width: 30em) {

yarn.lock

@@ -411,6 +411,11 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+highlight.js@^10.3.2:
+  version "10.3.2"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.3.2.tgz#135fd3619a00c3cbb8b4cd6dbc78d56bfcbc46f1"
+  integrity sha512-3jRT7OUYsVsKvukNKZCtnvRcFyCJqSEIuIMsEybAXRiFSwpt65qjPd/Pr+UOdYt7WJlt+lj3+ypUsHiySBp/Jw==
+
 hosted-git-info@^2.1.4:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"