✨ feat: highlight support html (#173)

ant-design · Mar 21, 2024 · faa9a74 · faa9a74
1 parent 5dd4ff7
commit faa9a74
Show file tree

Hide file tree

Showing 4 changed files with 594 additions and 0 deletions.
diff --git a/src/Highlight/demos/config.js b/src/Highlight/demos/config.js
@@ -65,6 +65,26 @@ const configs = [
     text: 'Yaml',
     code: '---\n# comment\nstring_1: "Bar"\nstring_2: \'bar\'\nstring_3: bar\ninline_keys_ignored: sompath/name/file.jpg\nkeywords_in_yaml:\n  - true\n  - false\n  - TRUE\n  - FALSE\n  - 21\n  - 21.0\n  - !!str 123\n"quoted_key": &foobar\n  bar: foo\n  foo:\n  "foo": bar\n\nreference: *foobar\n\nmultiline_1: |\n  Multiline\n  String\nmultiline_2: >\n  Multiline\n  String\nmultiline_3: "\n  Multiline string\n  "\n\nansible_variables: "foo {{variable}}"\n\narray_nested:\n- a\n- b: 1\n  c: 2\n- b\n- comment',
   },
+  {
+    language: 'html',
+    text: 'Html',
+    code: `<html lang="en">
+    <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Custom Html Dom Render</title>
+    </head>
+    <body>
+    <div>Custom Html Dom Render</div>
+    <ul>
+        <li>Ant Desgin</li>
+        <li>Ant Desgin Pro</li>
+        <li>Ant Desgin Pro Components</li>
+    </ul>
+
+    </body>
+    </html>`,
+  },
 ];
 
 export default configs;
diff --git a/src/Highlight/hooks/useHighlight.tsx b/src/Highlight/hooks/useHighlight.tsx
@@ -20,6 +20,7 @@ export const languageMap = {
   json,
   markdown,
   xml,
+  html: xml,
   yaml,
   tsx,
   jsx,

diff --git a/src/Markdown/demos/data.ts b/src/Markdown/demos/data.ts
@@ -53,6 +53,25 @@ This is [an example](http://example.com/ "Title") inline link.
 $ pnpm install
 \`\`\`
 
+\`\`\`html
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Custom Html Dom Render</title>
+</head>
+<body>
+<div>Custom Html Dom Render</div>
+<ul>
+    <li>Ant Desgin</li>
+    <li>Ant Desgin Pro</li>
+    <li>Ant Desgin Pro Components</li>
+</ul>
+
+</body>
+</html>
+\`\`\`
+
 
 \`\`\`javascript
 import { renderHook } from '@testing-library/react-hooks';