diff --git a/.changeset/mighty-goats-dance.md b/.changeset/mighty-goats-dance.md
new file mode 100644
index 000000000000..5837c7bb9349
--- /dev/null
+++ b/.changeset/mighty-goats-dance.md
@@ -0,0 +1,6 @@
+---
+"@gradio/code": minor
+"gradio": minor
+---
+
+feat:Add Jinja2 language to Code component
diff --git a/gradio/components/code.py b/gradio/components/code.py
index 15806843a97a..95f22f5ae71e 100644
--- a/gradio/components/code.py
+++ b/gradio/components/code.py
@@ -29,6 +29,7 @@ class Code(Component):
         "html",
         "css",
         "javascript",
+        "jinja2",
         "typescript",
         "yaml",
         "dockerfile",
@@ -69,6 +70,7 @@ def __init__(
             "html",
             "css",
             "javascript",
+            "jinja2",
             "typescript",
             "yaml",
             "dockerfile",
diff --git a/js/code/shared/language.ts b/js/code/shared/language.ts
index a4492bfd815c..499bc2456e19 100644
--- a/js/code/shared/language.ts
+++ b/js/code/shared/language.ts
@@ -12,6 +12,7 @@ const possible_langs = [
 	"html",
 	"css",
 	"javascript",
+	"jinja2",
 	"typescript",
 	"yaml",
 	"dockerfile",
@@ -58,6 +59,10 @@ const lang_map: Record<string, (() => Promise<Extension>) | undefined> = {
 	css: () => import("@codemirror/lang-css").then((m) => m.css()),
 	javascript: () =>
 		import("@codemirror/lang-javascript").then((m) => m.javascript()),
+	jinja2: () =>
+		import("@codemirror/legacy-modes/mode/jinja2").then((m) =>
+			StreamLanguage.define(m.jinja2)
+		),
 	typescript: () =>
 		import("@codemirror/lang-javascript").then((m) =>
 			m.javascript({ typescript: true })