mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 21:39:53 +08:00
4.8 KiB
4.8 KiB
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Code 代码高亮 | 0 | ⚙ 组件 | Code | 38 |
使用代码高亮的方式来显示一段代码。
基本用法
{
"body": {
"type": "code",
"language": "html",
"value": "<div>html</div>"
}
}
语言设置
默认语言是 html,可以通过 language 指定以下语言:
bat
、 c
、 coffeescript
、 cpp
、 csharp
、 css
、 dockerfile
、 fsharp
、 go
、 handlebars
、 html
、 ini
、 java
、 javascript
、 json
、 less
、 lua
、 markdown
、 msdax
、 objective-c
、 php
、 plaintext
、 postiats
、 powershell
、 pug
、 python
、 r
、 razor
、 ruby
、 sb
、 scss
、shell
、 sol
、 sql
、 swift
、 typescript
、 vb
、 xml
、 yaml
{
"body": {
"type": "code",
"language": "javascript",
"value": "(function () {\n let amis = amisRequire('amis/embed');\n let amisJSON = {\n type: 'page',\n title: '表单页面',\n body: {\n type: 'form',\n mode: 'horizontal',\n api: '/saveForm',\n body: [\n {\n label: 'Name',\n type: 'input-text',\n name: 'name'\n },\n {\n label: 'Email',\n type: 'input-email',\n name: 'email'\n }\n ]\n }\n };\n let amisScoped = amis.embed('#root', amisJSON);\n})();"
}
}
language 支持从上下文获取数据
{
"data": {
"lang": "javascript"
},
"body": {
"type": "code",
"language": "${lang}",
"value": "function amis() {\n console.log('amis');\n}"
}
}
动态数据
可以使用 name 来从上下文来获取数据,比如
{
"data": {
"sourcecode": "<div>html</div>"
},
"body": {
"type": "code",
"language": "html",
"name": "sourcecode"
}
}
因此它还能放在表单、crud 中实现代码的展现。
主题及 tab 大小
{
"body": {
"type": "code",
"language": "javascript",
"tagSize": 4,
"editorTheme": "vs-dark",
"value": "function amis() {\n\tconsole.log('amis');\n}"
}
}
自定义语言高亮
还可以通过 customLang
参数来自定义高亮,比如下面这个示例
{
"body": {
"type": "code",
"customLang": {
"name": "myLog",
"tokens": [
{
"name": "custom-error",
"regex": "\\[error.*",
"color": "#ff0000",
"fontStyle": "bold"
},
{
"name": "custom-notice",
"regex": "\\[notice.*",
"color": "#FFA500"
},
{
"name": "custom-info",
"regex": "\\[info.*",
"color": "#808080"
},
{
"name": "custom-date",
"regex": "\\[[a-zA-Z 0-9:]+\\]",
"color": "#008800"
}
]
},
"value": "[Sun Mar 7 16:02:00 2021] [notice] Apache/1.3.29 (Unix) configured -- resuming normal operations\n[Sun Mar 7 16:02:00 2021] [info] Server built: Feb 27 2021 13:56:37\n[Sun Mar 7 16:02:00 2021] [notice] Accept mutex: sysvsem (Default: sysvsem)\n[Sun Mar 7 17:21:44 2021] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection\n[Sun Mar 7 17:23:53 2021] statistics: Use of uninitialized value in concatenation (.) or string at /home/httpd line 528.\n[Sun Mar 7 17:23:53 2021] statistics: Can't create file /home/httpd/twiki/data/Main/WebStatistics.txt - Permission denied\n[Sun Mar 7 17:27:37 2021] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection\n[Sun Mar 7 17:31:39 2021] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection\n[Sun Mar 7 21:16:17 2021] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome"
}
}
customLang
中主要是 tokens
设置,这里是语言词法配置,它有 4 个配置项:
name
:词法名称regex
:词法的正则匹配,注意因为是在字符串中,这里正则中如果遇到\
需要写成\\
regexFlags
: 可选,正则的标志参数color
:颜色fontStyle
: 可选,字体样式,比如bold
代表加粗
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
className | string |
外层 CSS 类名 | |
value | string |
显示的颜色值 | |
name | string |
在其他组件中,时,用作变量映射 | |
language | string |
所使用的高亮语言,默认是 plaintext | |
tabSize | number |
4 | 默认 tab 大小 |
editorTheme | string |
'vs' | 主题,还有 'vs-dark' |