diff --git a/package-lock.json b/package-lock.json
index bf6fdbc..6cce1ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
       "integrity": "sha512-JIkwFOvGIqd9SLs9vwI6YvQTHCNjg091LBulGjtY14DfzhoWT+feLk1AXIisG6yOo5v2ya5vqmSStureYA2nyA=="
     },
     "pack.re": {
-      "version": "github:jaredly/pack.re#826d6761f0de88502027058a830cd67b0f3ab99d",
+      "version": "github:jaredly/pack.re#f7373039dfd26bc0d05ec3b9e5c09949d47b932f",
       "requires": {
         "minimist.re": "0.0.2",
         "reason-cli-tools": "1.0.4",
diff --git a/src/CompileCode.re b/src/CompileCode.re
index ab6c05c..c946435 100644
--- a/src/CompileCode.re
+++ b/src/CompileCode.re
@@ -126,5 +126,12 @@ let block = (
     bundle
   );
 
-  {State.Model.langLine, html: html ++ htmlAlt, raw, page, filePath: name, compilationResult}
+  let html =
+    Printf.(sprintf("<div %s class='code-block-pair'>",
+                    (switch (options.id) { | None => "" | Some(id) => sprintf("id='%s'", id) })))
+    ++ html
+    ++ htmlAlt
+    ++ "</div>";
+
+  {State.Model.langLine, html, raw, page, filePath: name, compilationResult}
 };
diff --git a/src/State.re b/src/State.re
index 02ad338..eddc835 100644
--- a/src/State.re
+++ b/src/State.re
@@ -88,6 +88,8 @@ module Model = {
     /* openModule: bool, */
     sharedAs: option(string),
     uses: list(string),
+    id: option(string),
+    classes: list(string),
   };
 
   let defaultOptions = {
@@ -104,6 +106,8 @@ module Model = {
     },
     sharedAs: None,
     uses: [],
+    id: None,
+    classes: [],
   };
 
   /* This doesn't apply if I only want to parse */
diff --git a/src/examples/CodeSnippets.re b/src/examples/CodeSnippets.re
index 99ec0c6..dee290d 100644
--- a/src/examples/CodeSnippets.re
+++ b/src/examples/CodeSnippets.re
@@ -44,29 +44,40 @@ let parseCodeOptions = (lang, defaultOptions) => {
       | "ocaml" | "ml" => {...options, lang: OCaml, inferred: false}
       | "txt" | "md" => {...options, lang: Txt}
       | _ => {
-        switch (matchOption(item, "shared")) {
-        | Some(name) => {...options, sharedAs: Some(name)}
-        | None => switch (matchOption(item, "use")) {
-          | Some(name) => {...options, uses: [name, ...options.uses]}
-          | None => switch (matchOption(item, "prefix")) {
-            | Some(content) => {...options, codeDisplay: {...options.codeDisplay, prefix: int_of_string(content)}}
-            | None => switch (matchOption(item, "suffix")) {
-              | Some(content) => {...options, codeDisplay: {...options.codeDisplay, suffix: int_of_string(content)}}
-              | None => {
-                if (parts == [item]) {
-                  {...options, lang: OtherLang(item)}
-                } else {
-                  print_endline(Printf.sprintf("Unexpected code option: %S. Assuming it's text", item));
-                  {...options, lang: Txt}
+          switch (matchOption(item, "shared")) {
+          | Some(name) => {...options, sharedAs: Some(name)}
+          | None =>
+            switch (matchOption(item, "use")) {
+            | Some(name) => {...options, uses: [name, ...options.uses]}
+            | None =>
+              switch (matchOption(item, "prefix")) {
+              | Some(content) => {...options, codeDisplay: {...options.codeDisplay, prefix: int_of_string(content)}}
+              | None =>
+                switch (matchOption(item, "suffix")) {
+                | Some(content) => {...options, codeDisplay: {...options.codeDisplay, suffix: int_of_string(content)}}
+                | None =>
+                  switch (matchOption(item, "id")) {
+                  | Some(id) => {...options, id: Some(id) }
+                  | None =>
+                    switch (matchOption(item, "class")) {
+                    | Some(class_) => {...options, classes: [class_, ...options.classes]}
+                    | None => 
+                      if (parts == [item]) {
+                        {...options, lang: OtherLang(item)}
+                      } else {
+                        print_endline(Printf.sprintf("Unexpected code option: %S. Assuming it's text", item));
+                        {...options, lang: Txt}
+                      }
+                    }
+                  }
                 }
               }
             }
-
           }
         }
-        }
-      }
+        
       }
+        
     }, defaultOptions, parts);
     if (options.lang == Reason || options.lang == OCaml) {
       Some(options)
@@ -111,6 +122,7 @@ let highlight = (~editingEnabled, id, content, options, status, bundle) => {
     let (pre, _, code, post, _) = CodeHighlight.codeSections(content);
     (pre, html(code), post)
   }
+
   | Some(cmt) => CodeHighlight.highlight(content, cmt)
   };
 
@@ -142,13 +154,14 @@ let highlight = (~editingEnabled, id, content, options, status, bundle) => {
   sprintf(
     {|<div class='code-block' data-block-syntax=%S>
   %s
-  <pre class='code' data-block-id='%s' id='block-%s'><code>%s</code></pre>
+  <pre class='%s' data-block-id='%s' id='block-%s'><code>%s</code></pre>
   %s
   %s
   %s
 </div>|},
     syntax,
     preCode,
+    (["code", ...options.classes] |> String.concat(" ")),
     id,
     id,
     code,