{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/plus/codehighlight","result":{"data":{"current":{"frontmatter":{"title":"CodeHighlight 代码高亮","order":29,"brief":"根据语法高亮页面中的代码块","icon":"doc-codehighlight"},"fields":{"type":"plus"},"tableOfContents":{"items":[{"url":"#使用场景","title":"使用场景"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#支持其他语言","title":"支持其他语言"},{"url":"#自定义主题","title":"自定义主题"},{"url":"#api","title":"API"}]},{"url":"#设计变量","title":"设计变量"}]},"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\": \"zh-CN\",\n  \"order\": 29,\n  \"category\": \"Plus\",\n  \"title\": \"CodeHighlight 代码高亮\",\n  \"icon\": \"doc-codehighlight\",\n  \"dir\": \"column\",\n  \"brief\": \"根据语法高亮页面中的代码块\"\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  }, \"\\u4F7F\\u7528\\u573A\\u666F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi \\u4EE3\\u7801\\u9AD8\\u4EAE\\u7EC4\\u4EF6\\u57FA\\u4E8E prismjs \\u5C01\\u88C5\\uFF0C\\u652F\\u6301297 \\u79CD\\u7F16\\u7A0B\\u8BED\\u8A00\\u7684\\u9AD8\\u4EAE\\uFF08\\u5DF2\\u81EA\\u52A8\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"JavaScript\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CSS\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u7C7B C\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"html\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"svg\"), \" \\u7B49\\uFF0C\\u5176\\u4ED6\\u8BED\\u8A00\\u9700\\u8981\\u624B\\u52A8\\u5F15\\u5165\\uFF09\\uFF0C\\u540C\\u65F6\\u5177\\u6709\\u9AD8\\u6269\\u5C55\\u6027\\u548C\\u4E30\\u5BCC\\u7684\\u63D2\\u4EF6\\u751F\\u6001\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u9700\\u8981\\u5C55\\u793A\\u4EE3\\u7801\\u7247\\u6BB5\\u65F6\\u63A8\\u8350\\u4F7F\\u7528 CodeHighlight \\u7EC4\\u4EF6\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"CodeHighlight \\u4ECE v2.62.0 \\u5F00\\u59CB\\u652F\\u6301\"), 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  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5411 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"code\"), \" props \\u4F20\\u5165\\u4EE3\\u7801\\u7EAF\\u6587\\u672C\\uFF0C\\u5E76\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"language\"), \" \\u4F20\\u5165\\u7F16\\u7A0B\\u8BED\\u8A00\\u540D\\u79F0\\u3002\\u652F\\u6301\\u7684\\u7F16\\u7A0B\\u8BED\\u8A00\\u548C\\u5BF9\\u5E94\\u540D\\u79F0\\u5728 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://prismjs.com/#supported-languages\"\n  }, \"Prismjs \\u5B98\\u7F51\"), \" \\u67E5\\u770B\"), 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  }, \"\\u652F\\u6301\\u5176\\u4ED6\\u8BED\\u8A00\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u652F\\u6301 297 \\u79CD\\u8BED\\u8A00\\uFF0C\\u9664\\u53BB \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"JavaScript\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CSS\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u7C7B C\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"html\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"svg\"), \" \\u5916\\uFF0C\\u652F\\u6301\\u5176\\u4ED6\\u8BED\\u8A00\\u9700\\u8981\\u624B\\u52A8\\u5F15\\u5165\\u914D\\u7F6E\\u3002 \"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F8B\\u5982\\uFF0C\\u9AD8\\u4EAE\\u7528\\u4E8E\\u7F16\\u5199 GTK \\u7A0B\\u5E8F\\u524D\\u7AEF UI \\u7684 Vala \\u8BED\\u8A00\\uFF0C\\u9700\\u8981\\u5F15\\u5165 \", 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  }, \"\\u81EA\\u5B9A\\u4E49\\u4E3B\\u9898\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultTheme={false}\"), \" \\u5173\\u95ED\\u9ED8\\u8BA4\\u4E3B\\u9898\\uFF0C\\u7136\\u540E\\u624B\\u52A8\\u5C06\\u9700\\u8981\\u7684\\u4E3B\\u9898\\u7684 css \\u6587\\u4EF6\\u62F7\\u8D1D\\u5E76\\u653E\\u5165\\u9879\\u76EE\\u4E2D\\u5F15\\u5165\\u5373\\u53EF\\u3002\\n\\u4E00\\u4E9B\\u4E3B\\u9898\\u53EF\\u5728 node_modules \\u5185 prismjs/themes \\u4E0B\\u627E\\u5230\\uFF0C\\u4F60\\u4E5F\\u53EF\\u4EE5\\u5728\\u7F51\\u4E0A\\u641C\\u7D22\\u5176\\u4ED6\\u4E2D\\u610F\\u7684\\u4E3B\\u9898\\u3002\"), 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  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), 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  }, \"\\u7C7B\\u540D\"), 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  }, \"\\u4EE3\\u7801\\u7EAF\\u6587\\u672C\"), 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  }, \"\\u662F\\u5426\\u4F7F\\u7528\\u9ED8\\u8BA4\\u4E3B\\u9898\\uFF0C\\u6DFB\\u52A0\\u81EA\\u5DF1\\u7684\\u4E3B\\u9898\\u65F6\\u8BBE\\u7F6E 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  }, \"\\u8BED\\u8A00\\u7C7B\\u578B\"), 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  }, \"\\u662F\\u5426\\u5F00\\u542F\\u884C\\u6570\\u663E\\u793A\"), 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  }, \"\\u6837\\u5F0F\"), 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  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/plus/codehighlight","next":{"fields":{"slug":"en-US/plus/markdownrender"},"id":"ef38a833-c206-55be-93f3-57befa9e334b","frontmatter":{"title":"Markdown Render","localeCode":"en-US","icon":"doc-markdown","showNew":null}},"previous":{"fields":{"slug":"en-US/plus/codehighlight"},"id":"422a83bc-f732-59fa-9cf2-3ccc65e42632","frontmatter":{"title":"CodeHighlight","localeCode":"en-US","icon":"doc-codehighlight","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}