Update examples

Author: ije

examples/markdown-pages/aleph.config.ts

@@ -1,8 +1,13 @@
-import markdown from 'aleph/plugins/markdown.ts'
+import markdown from '../../plugins/markdown.ts'
 import type { Config } from 'aleph/types'
 
 export default (): Config => ({
   plugins: [
-    markdown(),
+    markdown({
+      highlight: {
+        provider: 'highlight.js',
+        theme: 'github'
+      }
+    }),
   ]
 })

examples/markdown-pages/pages/index.md

@@ -2,7 +2,7 @@
 title: Welcome to use Aleph.js!
 className: markdown-page
 style:
-  padding: '45px 90px'
+  padding: '45px 60px'
   border: '1px solid #eee'
   border-radius: '12px'
 ---
@@ -20,3 +20,17 @@ style:
   <span> · </span>
   <a href="https://github.com/alephjs/aleph.js" target="_blank">Github</a>
 </p>
+
+```jsx
+import React from 'https://esm.sh/react'
+import Logo from '../components/logo.tsx'
+
+export default function Home() {
+  return (
+    <div>
+      <Logo />
+      <h1>Hello World!</h1>
+    </div>
+  )
+}
+```

examples/markdown-pages/style/index.css

@@ -25,7 +25,7 @@ h1 {
   margin: 0;
   line-height: 1.5;
   font-size: 18px;
-  font-weight: 400;
+  font-weight: 500;
   text-align: center;
   color: #000;
 }
@@ -65,3 +65,12 @@ p a {
 p a:hover {
   color: #000;
 }
+
+pre {
+  margin-top: 1em;
+}
+
+pre code[class^=language-] {
+  display: block;
+  padding: 0.5em;
+}