代码 ui-code

代码组件是用来展示计算机代码文本的一个组件。

"usingComponents": {
    "ui-code": "mp-cu/colorUI/components/ui-code/ui-code"
}

行内用法

默认是行内代码的用法。支持默认插槽与 content 参数引入,在包含一些特殊符号的时候请使用引入的方式。

<ui-code></ui-code>

<ui-code content="<ui-code>...</ui-code> \n<ui-code content='...'></ui-code>"/>

代码块用法

tag 参数设置为 pre 就可以使用代码块了。 lang 参数设置为指定语言。可以实现代码高亮。

代码高亮是使用了 PrismJS 暗色主题的高亮颜色是亮色主题的反转。

<ui-code tag="pre" lang="html" content="<ui-code>...</ui-code> \n<ui-code content='...'></ui-code>"/>
<ui-code tag="pre" lang="css" content=".ui-code { \n  white-space: pre-wrap; \n  word-break: break-all; \n  word-wrap: break-word; \n  font-size: 90%; \n}"/>
<ui-code tag="pre" lang="html" content="<ui-code tag='pre' lang='html' content='...'>\n</ui-code>\n<ui-code tag='pre' lang='css' content='...'>\n</ui-code>"/>

参数

参数类型可选值默认值说明
uiString--其他class
bgString-ui-BG背景颜色
titleBoolean/String-false标题
contentString--代码内容
textString-ui-TC-Main代码区样式
tagString-code类型
langString-null语言
scrollBoolean-false滑动

插槽

参数说明
默认行内代码的内容

mp-cu

上次更新: