{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/plus/codehighlight","result":{"data":{"current":{"frontmatter":{"title":"CodeHighlight","order":29,"brief":"Highlight code blocks in the page according to syntax","icon":"doc-codehighlight"},"fields":{"type":"plus"},"tableOfContents":{"items":[{"url":"#when-to-use","title":"When to use"},{"url":"#demos","title":"Demos","items":[{"url":"#how-to-introduce","title":"How to introduce"},{"url":"#basic-usage","title":"Basic usage"},{"url":"#support-other-languages","title":"Support other languages"},{"url":"#customize-the-theme","title":"Customize the theme"},{"url":"#api","title":"API"}]},{"url":"#design-tokens","title":"Design Tokens"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"en-US\",\n  \"order\": 29,\n  \"category\": \"Plus\",\n  \"title\": \"CodeHighlight\",\n  \"icon\": \"doc-codehighlight\",\n  \"dir\": \"column\",\n  \"brief\": \"Highlight code blocks in the page according to syntax\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"When to use\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CodeHighlight\"), \" component uses \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"prismjs\"), \", which supports highlighting of 297 programming languages \\u200B\\u200B(automatically configured \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"JavaScript\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CSS\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Class C\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"html\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"svg\"), \", etc., other languages \\u200B\\u200Bneed to be manually introduced), and has high scalability and rich plug-in ecology.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Pass the code plain text to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"code\"), \" props, and pass the programming language name to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"language\"), \". Supported programming languages \\u200B\\u200Band corresponding names can be viewed on the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://prismjs.com/#supported-languages\"\n  }, \"Prismjs official website\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to introduce\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"CodeHighlight supported from v2.62.0 \"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { CodeHighlight } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic usage\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=column\",\n    \"live\": \"true\",\n    \"dir\": \"column\"\n  }, \"import { CodeHighlight } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n\\n    return <CodeHighlight\\n        language={\\\"javascript\\\"} \\n        code={\\n        `\\nimport * as React from 'react\\\"\\nconst Test = ()=>{\\n    const handleClick = ()=>{\\n        alert(\\\"Click\\\")\\n    }\\n    return <div onClick={handleClick}>test</div>\\n}`\\n    }/>\\n}\\n\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"CSS\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=column\",\n    \"live\": \"true\",\n    \"dir\": \"column\"\n  }, \"import { CodeHighlight } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n\\n    return <CodeHighlight\\n        language={\\\"css\\\"} \\n        code={\\n        `.grid {\\n    .semi-row,\\n    .semi-row-flex {\\n        text-align: center;\\n        .semi-col {\\n            min-height: 30px;\\n            line-height: 30px;\\n            background: var(--semi-color-primary-light-default);\\n            outline: 1px solid var(--semi-color-primary-light-active);\\n        }\\n    }\\n}\\n`\\n    }/>\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Support other languages\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Support 297 languages. Except for \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"JavaScript\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CSS\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Class C\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"html\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"svg\"), \", support for other languages \\u200B\\u200Bneeds to be manually imported and configured.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"For example, to highlight the Vala language used to write the front-end UI of GTK programs, you need to import \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"prism-vala.js\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"import \\\"prismjs/components/prism-vala.js\\\"\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=column\",\n    \"live\": \"true\",\n    \"dir\": \"column\"\n  }, \"import { CodeHighlight } from '@douyinfe/semi-ui';\\nimport \\\"prismjs/components/prism-vala.js\\\"\\n\\nfunction Demo() {\\n    return <CodeHighlight\\n        language={\\\"vala\\\"} \\n        code={\\n        `public class ExampleApp : Gtk.Application {\\n    public ExampleApp () {\\n        Object (application_id: \\\"com.example.App\\\");\\n    }\\n\\n    public override void activate () {\\n        var win = new Gtk.ApplicationWindow (this);\\n\\n        var btn = new Gtk.Button.with_label (\\\"Hello World\\\");\\n        btn.clicked.connect (win.close);\\n\\n        win.child = btn;\\n        win.present ();\\n    }\\n\\n    public static int main (string[] args) {\\n        var app = new ExampleApp ();\\n        return app.run (args);\\n    }\\n}\\n`\\n    }/>\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Customize the theme\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultTheme={false}\"), \" to turn off the default theme, then manually copy the css file of the required theme and import it into the project.\\nSome themes can be found under prismjs/themes in node_modules, and you can also search for other themes you like on the Internet.\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"API\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Property\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default value\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"code\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Code text\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultTheme\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to use the default theme, set when adding your own theme false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bool\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"language\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Language type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"lineNumber\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to enable line number display\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/plus/codehighlight","next":{"fields":{"slug":"zh-CN/plus/codehighlight"},"id":"e9a3eec9-87ba-5200-8ea0-9d1cfc82ed35","frontmatter":{"title":"CodeHighlight 代码高亮","localeCode":"zh-CN","icon":"doc-codehighlight","showNew":null}},"previous":{"fields":{"slug":"zh-CN/plus/chat"},"id":"6c508a87-45ca-528c-a763-cdd909496048","frontmatter":{"title":"Chat 对话","localeCode":"zh-CN","icon":"doc-chat","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}