markdown xCmarkdown

在线预览

在线模拟尺寸:

介绍

markdown组件,可以用来渲染标签的html文章或者纯Markdown或者markdown+简单的html标签混合渲染，与原x-markdown不同，采用官方原生c库实现解析速度超猛。并且是纯原生渲染，不再是webview渲染了，因此渲染速度也超快。并且为了兼容和生成截图的需求，针对官方C库解析扩展了相关的功能 1、允许你在markdown中输入简单的html标签，以控制一些文本样式：比如颜色，背景字号等行内样式。2、允许启用isHtml纯html解析，当你启用html解析时它的技术路径是参考微信小程序支持的标签过滤掉不支持的标签，和删除属性，再进行原生渲染，因此理论上说纯html会比较快解析的数量要少。 [此组件依赖uni-cmark插件可在代码仓库下载]

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
x	☑	☑️	☑️	☑️	☑️	4.76+	1.1.19

文件路径


@/uni_modules/tmx-ui/components/x-cmarkdown/x-cmarkdown.uvue

使用


<x-cmarkdown></x-cmarkdown>

Props 属性

名称	说明	类型	默认值
value	``	`string`	`""`
codeTheme	``	`union`	`'jetbrains'`
codeThemeMode	`代码块主题，以什么样式主题输出，auto:自动跟随全局主题，light:使用亮系配色，dark:使用暗系配色`	`union`	`'auto'`
previewImage	`预览图片`	`boolean`	`true`
showCodeToolbar	`是否显示代码复制工具栏`	`boolean`	`true`
showTableRipple	`显示表格波纹背景`	`boolean`	`true`
linkAndCopyColor	`链接及复制的主色，空取全值`	`string`	`''`
isHtml	`是否是纯html，它会先把html内容解析为标签的Markdown格式，删除不支持的标签，删除所有属性和样式，统一样式` `如果你需要指定文本颜色可以使用行内html块比如<span style="color:red;">我是内容</span>,仅支持行内样式。`	`boolean`	`false`
fontSize	`默认的字号,它是文本字号，不包含其它特殊的文本字号，如果有标签内的样式字号此处会失效`	`string`	`"16px"`

Events 事件

名称	参数	说明
link	`val: string`	连接被点击
image	`val: string`	图片被点击

Slots 插槽

名称	说明	数据

Ref 方法

名称	参数	返回值	说明

示例文件路径

json


/pages/zhanshi/cmarkdown

示例源码

uvue

vue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1;">
	<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
			<navigation-bar :background-color="xThemeConfigNavBgColor"
				:front-color="xThemeConfigNavFontColor"></navigation-bar>
		</page-meta>
		<!-- #endif -->
		
		<!-- <x-button @click="pare">解析</x-button> -->
		<x-sheet>
			<x-cmarkdown :value="markdown"></x-cmarkdown>
		</x-sheet>

	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	const markdown = ref('')
	const markdownTempData : string = `
> 这是一个引用块
> 可以有多行

\`标签宽（横向表单时有效）\`
**粗体文本**
*斜体文本*
***粗斜体文本***
~~删除线文本~~
需要桭~~删除线文本~~硒鼓桭地板砖 桭*斜体文本*地板砖 桭**粗体文本**
\`\`\`uts
function hello(name: string): void {
	var a = 'Hello, ' + name
}
// 用正则匹配闭合标签
const closeTagMatch = remaining.match(/^<\/([a-zA-Z0-9\-_]+)>/);
if (closeTagMatch != null && closeTagMatch.length > 0 && closeTagMatch[0] != null) {
	// 顶层的闭合标签：消费掉但不创建节点
	this.position += closeTagMatch[0]!.length!;
	return null;
}
\`\`\`

# 表单 xForm

-------

<strong>HTML 粗体</strong>

<em>HTML 斜体</em>

<code>HTML 代码</code>

## 介绍

从1.1.2开始允许xform可以嵌套view进行form-item布局了,但建议不要嵌套太深,影响性能.

## 平台兼容

| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
| --- | --- | --- | --- | --- | --- | --- | --- |
| ☑️ | ☑️ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |

这是行内公式 \\(E = mc^2\\)，这是块级公式：$$\\sum_{i=1}^n i = \\frac{n(n+1)}{2}$$

## 文件路径

## Props 属性

| 名称 | 说明 | 类型 | 默认值 |
| ------ | ---- | ---- | ---- |
| labelWidth | \`标签宽（横向表单时有效）\`<br>\`不支持动态修改（uniappx 3.99不支持动态传递 inject）,可在子组件上动态修改\`<br> | \`string\` | \`"100"\` |
| labelDirection | \`不支持动态修改（uniappx 3.99不支持动态传递 inject）,可在子组件上动态修改\`<br>\`vertical,horizontal\`<br> | \`labelDirType\` | \`"horizontal"\` |
| labelFontColor | \`标签的文本颜色,不支持动态修改（uniappx 3.99不支持动态传递 inject）,可在子组件上动态修改\`<br> | \`string\` | \`"#333333"\` |

## Events 事件

| 名称 | 参数 | 说明 |
| ------ | ---- | ---- |
| submit | \`result: FORM_SUBMIT_RESULT\` | 按钮提交表单时触发。 |
| update:modelValid | \`-\` | 校验事件，这个不是submit是用户在输入内容或者在校验阶段向外发出的事件<br>里面包含了实时的校验信息，用于绑定外部的按钮提供实时的可提交状态。<br>它对外输出，不能够双向绑定对内更改校验状态。 |


## Slots 插槽

| 名称 | 说明 | 数据 |
| ------ | ---- | ---- |
| default | \`插槽内只能放置x-form-item子节点组件\` | - |


# 文章标题

这是**重要内容**，这是*强调内容*。

## 功能特性

- 支持基本 Markdown 语法
- 支持代码块和代码高亮
- 支持数学公式
- 输出为 HTML 格式

## 代码

\`\`\`uts
function hello(name: string): void {
	var a = 'Hello, ' + name
}
// 用正则匹配闭合标签
const closeTagMatch = remaining.match(/^<\/([a-zA-Z0-9\-_]+)>/);
if (closeTagMatch != null && closeTagMatch.length > 0 && closeTagMatch[0] != null) {
	// 顶层的闭合标签：消费掉但不创建节点
	this.position += closeTagMatch[0]!.length!;
	return null;
}
\`\`\`

\`\`\`html
<uni-view data-v-361a5606="" class="xSheet" 
style="background-color: rgb(255, 255, 255); 
width: auto; height: auto; border-radius: 14px; border-width: 0px; 
border-color: transparent; margin: 0px 14px 14px; padding: 14px; box-shadow: none; border-style: solid;">
<!-- 输入内容 -->
</uni-view>

\`\`\`

\`\`\`css
.abc{
    background-color:#fff;
}
\`\`\`

访问[官网](https://example.com)了解更多。

# 这是一级标题

这是一个段落，包含**加粗文本**和*斜体文本*。

## 这是二级标题

- 无序列表项 1
- 无序列表项 2
- 无序列表项 3

1. 有序列表项 1
2. 有序列表项 2

\`\`\`javascript
const hello = 'world';
\`\`\`

这是一个[链接](https://example.com)和一张![图片](https://xui.tmui.design/lp-18.jpg)。

---

> 这是一个引用块
> 可以有多行

~~删除线文本~~

行内代码：\`const x = 1;\`

# Markdown 完整测试文档

## 1. 标题测试

# 一级标题
## 二级标题
### 三级标题~~删除线文本~~
#### 四级标题
##### 五级标题
###### 六级标题

## 2. 文本格式测试

**粗体文本**
*斜体文本*
***粗斜体文本***
~~删除线文本~~
需要桭~~删除线文本~~硒鼓桭地板砖 桭*斜体文本*地板砖 桭**粗体文本**
\`行内代码\`

## 3. 列表测试

### 无序列表
- 第一项
- 第二项
  - 嵌套项 1
  - 嵌套项 2
	- 深层嵌套项
- 第三项

### 有序列表
1. 第一项
2. 第二项
   1. 嵌套项 1
   2. 嵌套项 2
3. 第三项

### 任务列表
- [x] 已完成任务
- [ ] 未完成任务
- [x] 另一个已完成任务

## 4. 引用块测试

> 这是一个简单的引用块

> 这是一个多行引用块
> 包含多行内容
> 每行都以 > 开头

> 引用块可以包含**粗体**和*斜体*文本
> 
> 还可以包含代码：\`testFun('hello')\`

## 5. 代码块测试

### 缩进代码块
	function hello() {
		var a = 'Hello World!';
		return true;
	}

### 围栏代码块


\`\`\`html
<!DOCTYPE html>
<html>
<head>
	<title>测试页面</title>
</head>
<body>
	<h1>Hello World</h1>
</body>
</html>
\`\`\`

## 6. 链接和图片测试

### 链接
[普通链接](https://www.example.com)

[引用链接][ref1]
[自动链接](https://www.google.com)

[ref1]: https://www.example.com "引用链接标题"

### 图片

![引用图片](https://xui.tmui.design/lp-18.jpg)

## 7. 表格测试

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| 数据1 | 数据2 | 数据3 |
| **粗体** | *斜体* | \`代码\` |
| [链接](https://example.com) | ![图片](https://xui.tmui.design/lp-18.jpg) | 普通文本 |

| 左对齐 | 居中对齐 | 右对齐 |
|:-------|:-------:|-------:|
| 左 | 中 | 右 |
| 内容 | 内容 | 内容 |

## 8. 水平线测试

---

***

___

## 9. 数学公式测试

### 行内数学公式
这是行内公式：$E = mc^2$，这是另一个公式：$\\sum_{i=1}^n i = \\frac{n(n+1)}{2}$

LaTeX 格式行内公式：\\(E = mc^2\\) 和 \\(\\alpha + \\beta = \\gamma\\)

### 块级数学公式
$$E = mc^2$$

$$\\sum_{i=1}^n i = \\frac{n(n+1)}{2}$$

$$\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}$$

LaTeX 格式块级公式：
\\\\[\\frac{\\partial f}{\\partial x} = \\lim_{h \\to 0} \\frac{f(x+h) - f(x)}{h}\\\\]

## 10. HTML 标签测试

<div style="color: red;">这是 HTML div</div>

<p style="background-color: yellow;">这是 HTML 段落</p>

<strong>HTML 粗体</strong>

<em>HTML 斜体</em>

<code>HTML 代码</code>

## 11. 转义字符测试

\\*这不是斜体\\*
\\**这不是粗体\\**
\\# 这不是标题
\\[这不是链接\\]

## 12. 换行测试

这是第一行  
这是第二行（两个空格 + 换行）

这是第三行
这是第四行（普通换行）

## 13. 复杂嵌套测试

### 列表中的引用
1. 第一项
   > 这是列表项中的引用
   > 包含多行内容

2. 第二项
   - 嵌套列表项
   - 另一个嵌套项
	 > 嵌套列表中的引用

### 引用中的列表
> 这是引用块
> 
> 1. 引用中的有序列表
> 2. 第二项
> 
> - 引用中的无序列表
> - 第二项

### 代码块中的内容
\`\`\`
> 这不是引用块
- 这不是列表
**这不是粗体**
\`\`\`

## 14. 特殊字符测试

### 特殊符号
© 版权符号
® 注册商标
™ 商标符号
€ 欧元符号
£ 英镑符号
¥ 日元符号

### Unicode 字符
中文字符：你好世界
日文字符：こんにちは
韩文字符：안녕하세요
阿拉伯数字：١٢٣٤٥
希腊字母：α β γ δ ε

## 15. 边界情况测试

### 空内容
#### 空标题

空段落（上面和下面都是空行）

### 只有空格
	

### 只有特殊字符
####
***
---

## 16. 混合内容测试

这里有一个**粗体**文本，包含\`行内代码\`，还有一个[链接](https://example.com)。

> 引用块包含：
> - 列表项
> - **粗体文本**
> - \`代码\`
> - $E = mc^2$ 公式

> 这是引用块
> 
> 1. 引用中的有序列表
> 2. 第二项
> 
> - 引用中的无序列表
> - 第二项

> 引用块包含：
> 
> 1. 列表项


\`\`\`javascript
// 代码注释
function test() {
	return "Hello " + "World";
}
\`\`\`

| 表格 | 内容 |
|------|------|
| 单元格 | **粗体** + \`代码\` + [链接](https://example.com) |

---

## 测试结束

这个文档包含了所有常见的 Markdown 语法，可以用来全面测试解析器的功能。

**可以在任意位置导入并设置，立即生效，全局响应**\n**堙**

| This header    | spans two | Header A |
|-------------|------------|----------|
| Cell A      | Cell B     | Cell C   |
| Cell A      | Cell B     | Cell C   |
| TMUI4.0   | Cell B     | 好棒  |

## 数学公式
$4x=x^2$ $C^a_b+\\sqrt{c}$ 
$c = \\pm\\sqrt{a^2 + b^2}$
$x=x^2$ $4x=x^2$

$$
C^a_b+\\sqrt{c}
$$

`
const pare = ()=>{
	markdown.value = markdownTempData
	
}
	onReady(() => {
		markdown.value = markdownTempData
	})
</script>

<style>

</style>

markdown xCmarkdown ​

介绍 ​

平台兼容 ​

文件路径 ​

使用 ​

Props 属性 ​

Events 事件 ​

Slots 插槽 ​

Ref 方法 ​

示例文件路径 ​

示例源码 ​