diff --git a/_includes/scripts/vega.liquid b/_includes/scripts/vega.liquid
new file mode 100644
index 000000000000..1e8c397c8d79
--- /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 e6c46a950bc0..f961f0ee4def 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 000000000000..e94c3deeb87d
--- /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 0781d8c0c86d..35dbf7e15b9d 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 1f526248da79..8436959ad3cc 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(() => {