代码 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>"/>

参数

参数	类型	可选值	默认值	说明
ui	String	-	-	其他class
bg	String	-	ui-BG	背景颜色
title	Boolean/String	-	false	标题
content	String	-	-	代码内容
text	String	-	ui-TC-Main	代码区样式
tag	String	-	code	类型
lang	String	-	null	语言
scroll	Boolean	-	false	滑动

插槽

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

mp-cu