Add Syntax Highlighting for more languages in Markdown Component (#11939)

* Add languages for markdown

* add changeset

* add changeset

* Add to stories

* Remove console log

* Fix code

---------

Co-authored-by: gradio-pr-bot <[email protected]>

Author: freddyaboulton

.changeset/famous-banks-prove.md

@@ -0,0 +1,6 @@
+---
+"@gradio/markdown-code": patch
+"gradio": patch
+---
+
+fix:Add Syntax Highlighting for more languages in Markdown Component

gradio/components/markdown.py

@@ -19,8 +19,9 @@
 @document()
 class Markdown(Component):
     """
-    Used to render arbitrary Markdown output. Can also render latex enclosed by dollar signs. As this component does not accept user input,
-    it is rarely used as an input component.
+    Used to render arbitrary Markdown output. Can also render latex enclosed by dollar signs as well as code blocks with syntax highlighting.
+    Supported languages are bash, c, cpp, go, java, javascript, json, php, python, rust, sql, and yaml.
+    As this component does not accept user input, it is rarely used as an input component.
 
     Demos: blocks_hello, blocks_kinematics
     Guides: key-features

js/markdown-code/utils.ts

@@ -5,12 +5,19 @@ import * as Prism from "prismjs";
 import "prismjs/components/prism-python";
 import "prismjs/components/prism-latex";
 import "prismjs/components/prism-bash";
+// Add additional Prism languages here
+import "prismjs/components/prism-c";
+import "prismjs/components/prism-cpp";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-sql";
+import "prismjs/components/prism-java";
+import "prismjs/components/prism-go";
+import "prismjs/components/prism-rust";
+import "prismjs/components/prism-php";
+import "prismjs/components/prism-yaml";
+import "prismjs/components/prism-markup-templating";
 import GithubSlugger from "github-slugger";
 
-// import loadLanguages from "prismjs/components/";
-
-// loadLanguages(["python", "latex"]);
-
 const LINK_ICON_CODE = `<svg class="md-link-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true" fill="currentColor"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg>`;
 
 const COPY_ICON_CODE = `
@@ -179,7 +186,6 @@ export function create_marked({
 	latex_delimiters: { left: string; right: string; display: boolean }[];
 }): typeof marked {
 	const marked = new Marked();
-
 	marked.use(
 		{
 			gfm: true,

js/markdown/Markdown.stories.svelte

@@ -106,3 +106,68 @@ A --> B
 		container: true
 	}}
 />
+<Story
+	name="Markdown Several Coding languages"
+	args={{
+		value: `
+#### Python
+\`\`\`python
+def hello_world():
+    print("Hello, World!")
+    for i in range(5):
+        print(f"Count: {i}")
+    return "欢迎使用Markdown编辑器"
+\`\`\`
+
+#### SQL
+\`\`\`sql
+SELECT u.name, u.email, p.title
+FROM users u
+LEFT JOIN projects p ON u.id = p.user_id
+WHERE u.active = true
+    AND u.created_date >= '2024-01-01'
+ORDER BY u.name ASC, p.created_date DESC;
+\`\`\`
+
+#### Rust
+\`\`\`rust
+use std::collections::HashMap;
+
+#[derive(Debug)]
+struct Person {
+    name: String,
+    age: u32,
+}
+
+impl Person {
+    fn new(name: &str, age: u32) -> Self {
+        Person {
+            name: name.to_string(),
+            age,
+        }
+    }
+    
+    fn greet(&self) -> String {
+        format!("Hello, I'm {} and I'm {} years old", self.name, self.age)
+    }
+}
+
+fn main() {
+    let mut people = HashMap::new();
+    
+    let alice = Person::new("Alice", 30);
+    let bob = Person::new("Bob", 25);
+    
+    people.insert("alice", alice);
+    people.insert("bob", bob);
+    
+    for (key, person) in &people {
+        println!("{}: {}", key, person.greet());
+    }
+}
+\`\`\`
+`,
+		show_copy_button: true,
+		container: true
+	}}
+/>