add new code theme and highlight ability

app/dcs/code/rails-activestorage/page.md

@@ -102,7 +102,7 @@ end
 
 Edit `app/views/names/_form.html.erb` to include a `field_field` to allow the user to choose a file to upload
 
-```html
+```erb
 <div><%= form.label :main_image %> <%= form.file_field :main_image %></div>
 ```
 
@@ -114,9 +114,10 @@ Click "Create Name"&#x20;
 
 Edit `app/views/names/show.html.erb` to include `<%= image_tag @name.main_image %>` to display the image
 
-```html
+```erb
 <p style="color: green"><%= notice %></p>
 
+<%# highlight %>
 <%= render @name %> <%= image_tag @name.main_image %>
 
 <div>
@@ -155,7 +156,7 @@ ActiveStorage.start()
 
 Modify `app/views/names/_form.html.erb` `form.file_field` to include `direct_upload: true`&#x20;
 
-```html
+```erb
 <div>
   <%= form.label :main_image %> <%= form.file_field :main_image, direct_upload:
   true %>

src/components/Fence.jsx

@@ -4,9 +4,8 @@ import { extractAnnotations } from '@code-hike/lighter'
 import CodeCopy from '@/components/CodeCopy'
 import { convertDocId } from '@/markdoc/convertDocId'
 
-// TODO make a storj theme for now this theme just changes the background color
 // https://themes.codehike.org/editor
-import light from '@/components/codeTheme.json'
+import light from '@/components/storjCodeTheme.json'
 let dark = structuredClone(light)
 dark.colors['editor.background'] = '#182234'
 Code.theme = {
@@ -51,6 +50,15 @@ const link = {
   },
 }
 
+export const highlight = {
+  name: 'highlight',
+  MultilineAnnotation: ({ children }) => {
+    return (
+      <span className="block bg-storj-blue-700 bg-opacity-50">{children}</span>
+    )
+  },
+}
+
 export const unfocusInline = {
   name: 'terminal',
   MultilineAnnotation: ({ children }) => {
@@ -138,7 +146,7 @@ export default async function Fence({ language, children: code, copy = true }) {
   } else if (!language || language === 'none') {
     language = 'text'
   }
-  let extensions = [link, focus, unfocusInline]
+  let extensions = [link, focus, unfocusInline, highlight]
   const extensionNames = extensions.map((e) => e.name)
   let { code: newCode, annotations } = await extractAnnotations(
     code.trim() || '',