Plus · CodeHighlight
CodeHighlight
Highlight code blocks in the page according to syntax
When to use
Semi
CodeHighlight component uses prismjs, which supports highlighting of 297 programming languages (automatically configured JavaScript CSS Class C html svg, etc., other languages need to be manually introduced), and has high scalability and rich plug-in ecology.Pass the code plain text to
code props, and pass the programming language name to language. Supported programming languages and corresponding names can be viewed on the Prismjs official websiteDemos
How to introduce
CodeHighlight supported from v2.62.0
Basic usage
CSS
Support other languages
Support 297 languages. Except for
JavaScript CSS Class C html svg, support for other languages needs to be manually imported and configured.For example, to highlight the Vala language used to write the front-end UI of GTK programs, you need to import
prism-vala.jsCustomize the theme
Set
defaultTheme={false} to turn off the default theme, then manually copy the css file of the required theme and import it into the project.
Some themes can be found under prismjs/themes in node_modules, and you can also search for other themes you like on the Internet.API
| Property | Description | Type | Default value |
|---|---|---|---|
| className | Class name | string | - |
| code | Code text | string | - |
| defaultTheme | Whether to use the default theme, set when adding your own theme false | bool | true |
| language | Language type | string | - |
| lineNumber | Whether to enable line number display | boolean | true |
| style | Style | CSSProperties | - |