diff --git a/Cargo.lock b/Cargo.lock
index a00caf3..c2d34ef 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2173,6 +2173,51 @@ version = "2.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e3148f5046208a5d56bcfc03053e3ca6334e51da8dfb19b6cdc8b306fae3283e"
 
+[[package]]
+name = "pest"
+version = "2.7.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56f8023d0fb78c8e03784ea1c7f3fa36e68a723138990b8d5a47d916b651e7a8"
+dependencies = [
+ "memchr",
+ "thiserror",
+ "ucd-trie",
+]
+
+[[package]]
+name = "pest_derive"
+version = "2.7.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b0d24f72393fd16ab6ac5738bc33cdb6a9aa73f8b902e8fe29cf4e67d7dd1026"
+dependencies = [
+ "pest",
+ "pest_generator",
+]
+
+[[package]]
+name = "pest_generator"
+version = "2.7.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fdc17e2a6c7d0a492f0158d7a4bd66cc17280308bbaff78d5bef566dca35ab80"
+dependencies = [
+ "pest",
+ "pest_meta",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.48",
+]
+
+[[package]]
+name = "pest_meta"
+version = "2.7.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "934cd7631c050f4674352a6e835d5f6711ffbfb9345c2fc0107155ac495ae293"
+dependencies = [
+ "once_cell",
+ "pest",
+ "sha2",
+]
+
 [[package]]
 name = "phf"
 version = "0.10.1"
@@ -2420,6 +2465,7 @@ dependencies = [
  "serde",
  "serde-value",
  "serde_json",
+ "serde_json5",
  "serde_with",
  "smart-default",
  "str-macro",
@@ -2964,6 +3010,17 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "serde_json5"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32a6b754515e1a7bd79fc2edeaecee526fc80cb3a918607e5ca149225a3a9586"
+dependencies = [
+ "pest",
+ "pest_derive",
+ "serde",
+]
+
 [[package]]
 name = "serde_path_to_error"
 version = "0.1.15"
@@ -3873,6 +3930,12 @@ version = "1.17.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "42ff0bf0c66b8238c6f3b578df37d0b7848e55df8577b3f74f92a69acceeb825"
 
+[[package]]
+name = "ucd-trie"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ed646292ffc8188ef8ea4d1e0e0150fb15a5c2e12ad9b8fc191ae7a8a7f3c4b9"
+
 [[package]]
 name = "unic-char-property"
 version = "0.9.0"
diff --git a/Cargo.toml b/Cargo.toml
index 6fbd69d..fef0d28 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -46,6 +46,7 @@ rust-embed = { version = "8.0.0", features = ["axum", "mime-guess", "include-exc
 serde = { version = "1.0.164", features = ["serde_derive"] }
 serde-value = "0.7.0"
 serde_json = "1.0.99"
+serde_json5 = "0.1.0"
 serde_with = "3.0.0"
 smart-default = "0.7.1"
 str-macro = "1.0.0"
diff --git a/minijinja/base.jinja b/minijinja/base.jinja
index 04a69f3..f01679a 100644
--- a/minijinja/base.jinja
+++ b/minijinja/base.jinja
@@ -82,21 +82,51 @@
       </script>
       <script type='module'>
         import { codeToHtml } from 'https://esm.sh/shiki@1.0.0'
+
+        // Our old <code> element will be replaced by the one created by Shiki,
+        // we need to keep old class names and copy to the new one.
+        function getShikiOpt(lang, classes) {
+          return {
+            lang,
+            theme: 'one-dark-pro',
+            // Ref: https://shiki.style/guide/transformers#transformer-hooks
+            transformers: [
+              {
+                code(node) {
+                  classes.forEach((c) => this.addClassToHast(node, c))
+                },
+                pre(node) {
+                  if (!classes.includes('q-with-lineno')) {
+                    this.addClassToHast(node, 'p-4')
+                  }
+                },
+              }
+            ]
+          }
+
+        }
+
         document.addEventListener('alpine:init', () => {
           Alpine.data('need_highlight', () => ({
             code: '',
+            classes: [],
             lang: 'text',
             init() {
               const codeElm = this.$refs.orig_code;
               const code = codeElm.textContent
               this.code = code.trim()
-              let className = Array.from(codeElm.classList.values()).find((c) => c.startsWith('language-'))
+              let classes = Array.from(codeElm.classList.values())
+              let className = classes.find((c) => c.startsWith('language-'))
               if (className) {
                 this.lang = className.split('-')[1]
               }
+              this.classes = classes
             },
             async highlight() {
-              const html = await codeToHtml(this.code, { lang: this.lang, theme: 'one-dark-pro' })
+              const lang = this.lang
+              const classes = this.classes
+              const opts = getShikiOpt(lang, classes)
+              const html = await codeToHtml(this.code, opts)
               return html
             }
           }))
diff --git a/src/consts.rs b/src/consts.rs
index d5b016f..b200fb8 100644
--- a/src/consts.rs
+++ b/src/consts.rs
@@ -9,3 +9,5 @@ pub const KEY_LANG: &str = "lang";
 pub const DEFAULT_LANG: &str = "en";
 pub const ALPINE_HIGHLIGHTING_APP: &str = "need_highlight";
 pub const ALPINE_ORIG_CODE_ELM: &str = "orig_code";
+// Given by comrak
+pub const ATTR_CODEFENCE_EXTRA: &str = "data-meta";
diff --git a/src/types/mod.rs b/src/types/mod.rs
index 43a4cb8..8cb82b5 100644
--- a/src/types/mod.rs
+++ b/src/types/mod.rs
@@ -232,3 +232,11 @@ pub fn create_shape_element<N: ToString>(name: N, cardinality: Cardinality) -> S
         flag_implicit: false,
     }
 }
+
+#[derive(Debug, Deserialize, SmartDefault)]
+#[serde(default)]
+pub struct CodeFenceOptions {
+    pub lines: bool,
+    #[default = 1]
+    pub start_line: u8,
+}
diff --git a/src/utils/markdown.rs b/src/utils/markdown.rs
index f49f83a..2325f17 100644
--- a/src/utils/markdown.rs
+++ b/src/utils/markdown.rs
@@ -1,15 +1,22 @@
 use std::collections::HashMap;
 use std::io::Write;
 
-use htmlize::escape_text;
 use comrak::adapters::SyntaxHighlighterAdapter;
 use comrak::html;
-use comrak::{markdown_to_html_with_plugins, ComrakOptions, ComrakPlugins};
+use comrak::{
+    markdown_to_html_with_plugins, ExtensionOptionsBuilder, Options, PluginsBuilder,
+    RenderOptionsBuilder, RenderPluginsBuilder,
+};
+use htmlize::escape_text;
+use serde_json5;
 use syntect::html::ClassedHTMLGenerator;
 use syntect::parsing::{SyntaxReference, SyntaxSet};
 use syntect::util::LinesWithEndings;
 
-use crate::consts::{SYNTECT_CLASS_STYLE, ALPINE_HIGHLIGHTING_APP, ALPINE_ORIG_CODE_ELM};
+use crate::consts::{
+    ALPINE_HIGHLIGHTING_APP, ALPINE_ORIG_CODE_ELM, ATTR_CODEFENCE_EXTRA, SYNTECT_CLASS_STYLE,
+};
+use crate::types::CodeFenceOptions;
 
 pub struct CssSyntectAdapter {
     syntax_set: SyntaxSet,
@@ -85,24 +92,24 @@ impl SyntaxHighlighterAdapter for CssSyntectAdapter {
 }
 
 // A simple adapter that defers highlighting job to the client side
-pub struct JSHighlightSyntectAdapter;
+pub struct JSHighlightAdapter;
 
-impl SyntaxHighlighterAdapter for JSHighlightSyntectAdapter {
+impl SyntaxHighlighterAdapter for JSHighlightAdapter {
     fn write_highlighted(
-            &self,
-            output: &mut dyn Write,
-            _lang: Option<&str>,
-            code: &str,
-        ) -> std::io::Result<()> {
+        &self,
+        output: &mut dyn Write,
+        _lang: Option<&str>,
+        code: &str,
+    ) -> std::io::Result<()> {
         let code = escape_text(code);
         output.write_all(code.as_bytes())
     }
 
     fn write_pre_tag(
-            &self,
-            output: &mut dyn Write,
-            mut attributes: HashMap<String, String>,
-        ) -> std::io::Result<()> {
+        &self,
+        output: &mut dyn Write,
+        mut attributes: HashMap<String, String>,
+    ) -> std::io::Result<()> {
         let classname = " q-need-highlight not-prose p-0";
         if let Some(class) = attributes.get_mut("class") {
             class.push_str(classname)
@@ -115,26 +122,65 @@ impl SyntaxHighlighterAdapter for JSHighlightSyntectAdapter {
     }
 
     fn write_code_tag(
-            &self,
-            output: &mut dyn Write,
-            mut attributes: HashMap<String, String>,
-        ) -> std::io::Result<()> {
-        let classname = " q-code";
+        &self,
+        output: &mut dyn Write,
+        mut attributes: HashMap<String, String>,
+    ) -> std::io::Result<()> {
+        tracing::info!("Attributes for code: {:?}", attributes);
+        let mut class_names = vec!["q-code"];
+        let mut styles = vec![];
+        if let Some(info_string) = attributes.get(ATTR_CODEFENCE_EXTRA) {
+            tracing::info!("Attempt to parse: {}", info_string);
+            let codefence_opts: CodeFenceOptions = serde_json5::from_str(info_string.as_str())
+                .inspect_err(|e| tracing::warn!("Failed to parse codefence extra. {e}"))
+                .unwrap_or_default();
+            if codefence_opts.lines {
+                class_names.push("q-with-lineno")
+            }
+            styles.push(format!("--line-start={}", codefence_opts.start_line));
+        };
+        let extra_class = format!(" {}", class_names.join(" "));
         if let Some(class) = attributes.get_mut("class") {
-            class.push_str(classname)
+            class.push_str(&extra_class)
         } else {
-            attributes.insert("class".to_string(), classname.to_string());
+            attributes.insert("class".to_string(), extra_class);
         };
+        if let Some(style) = attributes.get("style") {
+            styles.extend(style.split(';').map(String::from));
+        }
+        if !styles.is_empty() {
+            let style_s = styles.join(" ");
+            attributes.insert("style".to_string(), style_s);
+        }
         attributes.insert("x-ref".to_string(), ALPINE_ORIG_CODE_ELM.to_string());
         html::write_opening_tag(output, "code", attributes)
     }
 }
 
 pub fn markdown_to_html(markdown: &str) -> String {
-    let options = ComrakOptions::default();
-    let mut plugins = ComrakPlugins::default();
-    let adapter = JSHighlightSyntectAdapter;
-    plugins.render.codefence_syntax_highlighter = Some(&adapter);
+    let extension = ExtensionOptionsBuilder::default()
+        .table(true)
+        .autolink(true)
+        .build()
+        .unwrap_or_default();
+    let render = RenderOptionsBuilder::default()
+        .full_info_string(true)
+        .build()
+        .unwrap_or_default();
+    let options = Options {
+        extension,
+        render,
+        ..Default::default()
+    };
+    let adapter = JSHighlightAdapter;
+    let render = RenderPluginsBuilder::default()
+        .codefence_syntax_highlighter(Some(&adapter))
+        .build()
+        .unwrap_or_default();
+    let plugins = PluginsBuilder::default()
+        .render(render)
+        .build()
+        .unwrap_or_default();
     markdown_to_html_with_plugins(markdown, &options, &plugins)
 }
 
diff --git a/static/css/custom.css b/static/css/custom.css
index fb62aa3..307eae6 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -67,12 +67,12 @@ article .entry-content.front h2 {
 }
 
 /* Code line numbering */
-.q-need-highlight code {
+.q-need-highlight code.q-with-lineno {
   counter-reset: step;
   counter-increment: step 0;
 }
 
-.q-need-highlight code .line::before {
+.q-need-highlight code.q-with-lineno .line::before {
   content: counter(step);
   counter-increment: step;
   width: 1rem;
@@ -81,8 +81,3 @@ article .entry-content.front h2 {
   text-align: right;
   color: rgba(115,138,148,.4)
 }
-
-pre.shiki {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}