diff --git a/_includes/scripts/vega.liquid b/_includes/scripts/vega.liquid
new file mode 100644
index 0000000..1e8c397
--- /dev/null
+++ b/_includes/scripts/vega.liquid
@@ -0,0 +1,40 @@
+{% if page.chart and page.chart.vega_lite %}
+  <script
+    src="https://cdn.jsdelivr.net/npm/vega@5.27/build/vega.min.js"
+    integrity="sha256-Yot/cfgMMMpFwkp/5azR20Tfkt24PFqQ6IQS+80HIZs="
+    crossorigin="anonymous"
+  ></script>
+  <script
+    src="https://cdn.jsdelivr.net/npm/vega-lite@5.16/build/vega-lite.min.js"
+    integrity="sha256-TvBvIS5jUN4BSy009usRjNzjI1qRrHPYv7xVLJyjUyw="
+    crossorigin="anonymous"
+  ></script>
+  <script
+    src="https://cdn.jsdelivr.net/npm/vega-embed@6.24/build/vega-embed.min.js"
+    integrity="sha256-FPCJ9JYCC9AZSpvC/t/wHBX7ybueZhIqOMjpWqfl3DU="
+    crossorigin="anonymous"
+  ></script>
+
+  <script>
+    let theme = localStorage.getItem('theme');
+
+    /* Create vega lite chart as another node and hide the code block, appending the vega lite node after it
+       this is done to enable retrieving the code again when changing theme between light/dark */
+    document.querySelectorAll('pre>code.language-vega_lite').forEach((elem) => {
+      const jsonData = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add('unloaded');
+      /* create vega lite node */
+      let chartElement = document.createElement('div');
+      chartElement.classList.add('vega-lite');
+      backup.after(chartElement);
+
+      /* Embed the visualization in the container */
+      if (theme === 'dark') {
+        vegaEmbed(chartElement, JSON.parse(jsonData), { theme: 'dark' });
+      } else {
+        vegaEmbed(chartElement, JSON.parse(jsonData));
+      }
+    });
+  </script>
+{% endif %}
diff --git a/_layouts/default.liquid b/_layouts/default.liquid
index e6c46a9..f961f0e 100644
--- a/_layouts/default.liquid
+++ b/_layouts/default.liquid
@@ -51,6 +51,7 @@
     {% include scripts/leaflet.liquid %}
     {% include scripts/chartjs.liquid %}
     {% include scripts/echarts.liquid %}
+    {% include scripts/vega.liquid %}
     {% include scripts/misc.liquid %}
     {% include scripts/badges.liquid %}
     {% include scripts/mathjax.liquid %}
diff --git a/_posts/2024-01-27-vega-lite.md b/_posts/2024-01-27-vega-lite.md
new file mode 100644
index 0000000..e94c3de
--- /dev/null
+++ b/_posts/2024-01-27-vega-lite.md
@@ -0,0 +1,104 @@
+---
+layout: post
+title: a post with vega lite
+date: 2024-01-27 00:20:00
+description: this is what included vega lite code could look like
+tags: formatting charts
+categories: sample-posts
+chart:
+  vega_lite: true
+---
+
+This is an example post with some [vega lite](https://vega.github.io/vega-lite/) code.
+
+````markdown
+```vega_lite
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "A dot plot showing each movie in the database, and the difference from the average movie rating. The display is sorted by year to visualize everything in sequential order. The graph is for all Movies before 2019.",
+  "data": {
+    "url": "https://raw.githubusercontent.com/vega/vega/main/docs/data/movies.json"
+  },
+  "transform": [
+    {"filter": "datum['IMDB Rating'] != null"},
+    {"filter": {"timeUnit": "year", "field": "Release Date", "range": [null, 2019]}},
+    {
+      "joinaggregate": [{
+        "op": "mean",
+        "field": "IMDB Rating",
+        "as": "AverageRating"
+      }]
+    },
+    {
+      "calculate": "datum['IMDB Rating'] - datum.AverageRating",
+      "as": "RatingDelta"
+    }
+  ],
+  "mark": "point",
+  "encoding": {
+    "x": {
+      "field": "Release Date",
+      "type": "temporal"
+    },
+    "y": {
+      "field": "RatingDelta",
+      "type": "quantitative",
+      "title": "Rating Delta"
+    },
+    "color": {
+      "field": "RatingDelta",
+      "type": "quantitative",
+      "scale": {"domainMid": 0},
+      "title": "Rating Delta"
+    }
+  }
+}
+```
+````
+
+Which generates:
+
+```vega_lite
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "A dot plot showing each movie in the database, and the difference from the average movie rating. The display is sorted by year to visualize everything in sequential order. The graph is for all Movies before 2019.",
+  "data": {
+    "url": "https://raw.githubusercontent.com/vega/vega/main/docs/data/movies.json"
+  },
+  "transform": [
+    {"filter": "datum['IMDB Rating'] != null"},
+    {"filter": {"timeUnit": "year", "field": "Release Date", "range": [null, 2019]}},
+    {
+      "joinaggregate": [{
+        "op": "mean",
+        "field": "IMDB Rating",
+        "as": "AverageRating"
+      }]
+    },
+    {
+      "calculate": "datum['IMDB Rating'] - datum.AverageRating",
+      "as": "RatingDelta"
+    }
+  ],
+  "mark": "point",
+  "encoding": {
+    "x": {
+      "field": "Release Date",
+      "type": "temporal"
+    },
+    "y": {
+      "field": "RatingDelta",
+      "type": "quantitative",
+      "title": "Rating Delta"
+    },
+    "color": {
+      "field": "RatingDelta",
+      "type": "quantitative",
+      "scale": {"domainMid": 0},
+      "title": "Rating Delta"
+    }
+  }
+}
+```
+
+This plot supports both light and dark themes.
diff --git a/assets/js/copy_code.js b/assets/js/copy_code.js
index 0781d8c..35dbf7e 100644
--- a/assets/js/copy_code.js
+++ b/assets/js/copy_code.js
@@ -6,7 +6,8 @@ codeBlocks.forEach(function (codeBlock) {
     codeBlock.querySelector("code:not(.language-chartjs)") &&
     codeBlock.querySelector("code:not(.language-echarts)") &&
     codeBlock.querySelector("code:not(.language-geojson)") &&
-    codeBlock.querySelector("code:not(.language-mermaid)")
+    codeBlock.querySelector("code:not(.language-mermaid)") &&
+    codeBlock.querySelector("code:not(.language-vega_lite)")
   ) {
     // create copy button
     var copyButton = document.createElement("button");
diff --git a/assets/js/theme.js b/assets/js/theme.js
index 1f52624..8436959 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -12,15 +12,22 @@ let setTheme = (theme) => {
   transTheme();
   setHighlight(theme);
   setGiscusTheme(theme);
+
   // if mermaid is not defined, do nothing
   if (typeof mermaid !== "undefined") {
     setMermaidTheme(theme);
   }
+
   // if echarts is not defined, do nothing
   if (typeof echarts !== "undefined") {
     setEchartsTheme(theme);
   }
 
+  // if vegaEmbed is not defined, do nothing
+  if (typeof vegaEmbed !== "undefined") {
+    setVegaLiteTheme(theme);
+  }
+
   if (theme) {
     document.documentElement.setAttribute("data-theme", theme);
 
@@ -140,6 +147,19 @@ let setEchartsTheme = (theme) => {
   });
 };
 
+let setVegaLiteTheme = (theme) => {
+  document.querySelectorAll(".vega-lite").forEach((elem) => {
+    // Get the code block content from previous element, since it is the vega lite code itself as defined in Markdown, but it is hidden
+    let jsonData = elem.previousSibling.childNodes[0].innerHTML;
+    elem.innerHTML = "";
+    if (theme === "dark") {
+      vegaEmbed(elem, JSON.parse(jsonData), { theme: "dark" });
+    } else {
+      vegaEmbed(elem, JSON.parse(jsonData));
+    }
+  });
+};
+
 let transTheme = () => {
   document.documentElement.classList.add("transition");
   window.setTimeout(() => {