# lv-markdown-in

**Repository Path**: skydreamx/lv-markdown-in

## Basic Information

- **Project Name**: lv-markdown-in
- **Description**: 🔥 lv-markdown-in 是鸿蒙 ArkTS3.0+ 原生 Markdown 解析插件，致力于更便捷的 OpenHarmony 设备的 Markdown 内容解析。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2024-05-29
- **Last Updated**: 2024-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### AtkTs3.0+ 鸿蒙原生 Markdown 解析插件
<img src="./src/main/resources/rawfile/img.png" width="50%"/>
<img src="./src/main/resources/rawfile/img_1.png" width="50%"/>

### lv-markdown-in 插件介绍
* lv-markdown-in 插件中涵盖了：
1. 1~6级标题
2. 文本（斜体、加粗、标记、删除、粉色文本）
3. 表格
4. 引用
5. 超链接
6. 图片
7. 分割线
8. 代码块
9. 列表
10. 复选框


### lv-markdown-in 安装
---
1.运行命令
``` shell
ohpm install @luvi/lv-markdown-in
```
2.在项目中引入插件
``` javascript
import { lvMarkdownIn } from @luvi/lv-markdown-in
```
3.在代码中使用
``` javascript
lvMarkdownIn({ text: content.toString() }) // content为文本内容
```

### 自定义样式
#### 1.标题样式（lvTitle）
--- 
``` javascript
// 导入 lvTitle
import { lvTitle } from '@luvi/lv-markdown-in'
// 用法
lvTitle.setLevel1Title(50)            // 设置一级标题字号50
lvTitle.setLevelTitleColor("blue")    // 设置标题字体颜色为蓝色
```
| 方法                   | 说明         | 参数                          |
|----------------------|------------|-----------------------------|
| setLevel1Title()     | 设置 1 级标题字号 | number / string 默认：32       |
| setLevel2Title()     | 设置 2 级标题字号 | number / string 默认：29       |
| setLevel3Title()     | 设置 3 级标题字号 | number / string 默认：26       |
| setLevel4Title()     | 设置 4 级标题字号 | number / string 默认：23       |
| setLevel5Title()     | 设置 5 级标题字号 | number / string 默认：20       |
| setLevel6Title()     | 设置 6 级标题字号 | number / string 默认：17       |
| setLevelTitleColor() | 	设置标题字体颜色  | string        默认："#303133"  |

#### 2.文字样式（lvText）
--- 
``` javascript
// 导入 lvText 
import { lvText } from '@luvi/lv-markdown-in'
// 用法
lvText.setTextSize(20)                   // 设置文本字号20
lvText.setTextColor("red")               // 设置文本颜色为红色
lvText.setTextMarkBackground("#000")     // 设置标记文本的背景颜色为黑色
```
| 方法                    | 说明  | 参数                         |
|-----------------------| ----  |----------------------------|
| setTextSize()    | 设置文本字号	 | number / string 默认：15      |
| setTextColor()      | 设置文本颜色 | string        默认："#303133"     |
| setTextMarkBackground()      | 设置标记文本的背景颜色 | string        默认："#7cff8321"     |

#### 3.超链接样式（lvLink）
--- 
``` javascript
// 导入 lvLink 
import { lvLink } from '@luvi/lv-markdown-in'
// 用法
lvLink.setTextSize(20)            // 设置超链接文本字号20
lvLink.setTextColor("red")        // 设置超链接文本颜色为红色
lvLink.setTextUnderline(true)     // 设置超链接下划线
```
| 方法                    | 说明  | 参数                         |
|-----------------------| ----  |----------------------------|
| setTextSize()    | 设置超链接文本字号	 | number / string 默认：15      |
| setTextColor()    | 设置超链接文本颜色 | string        默认："#3A8AEB"    |
| setTextUnderline()    | 设置超链接下划线| boolean    默认：false     |

#### 4.图片样式（lvImage）
--- 
需要注意的是：若在md文本内容中未单独设置图片宽高，将采用默认全局宽高，可通过 setImgWidth() 与 setImgHeight() 进行设置。若强制开启图片全局宽高将会覆盖所有图片的宽高，即使在md文本内容中已设置图片宽高，可通过 setConfGloable() 进行设置
``` javascript
// 导入 lvImage
import { lvImage } from '@luvi/lv-markdown-in'
// 用法
lvImage.setImgWidth("70%")         // 设置图片宽度为70%
lvImage.setImgHeight(null)         // 设置图片高度为null
lvImage.setConfGlobal(true)        // 强制开启图片全局宽高
```
| 方法                    | 说明  | 参数                         |
|-----------------------| ----  |----------------------------|
| setImageWidth()   | 设置图片宽度	 | number / string 默认："60%"      |
| setImageHeight()    | 设置图片高度 | string        默认：null    |
| setConfGlobal()   | 强制开启全局宽高| boolean    默认：false    |

#### 5.代码块主题（lvCode）
--- 
提供 _暗夜_ 与 _明亮_ 双主题
``` javascript
// 导入 lvCode
import { lvCode } from '@luvi/lv-markdown-in'
// 用法
lvCode.setTheme("dark")         // 设置代码块主题为暗夜
```
| 方法                    | 说明  | 参数                                         |
|-----------------------| ----  |--------------------------------------------|
| setTheme()  | 设置代码块主题 | 	string: "dark" / "light"        默认："dark" |

#### 6.引用块样式（lvQuote）
--- 
需要注意的是引用块中字体大小与字体颜色，请使用 lvText 进行设置
``` javascript
// 导入 lvQuote
import { lvQuote } from '@luvi/lv-markdown-in'
// 用法
lvQuote.setBackgroundColor("rgba(234, 239, 255, 0.62)")      // 设置引用块背景颜色为淡粉色
lvQuote.setBorderColor("red")                                // 设置引用块左边颜色为红色
```
| 方法                    | 说明            | 参数                                         |
|-----------------------|---------------|--------------------------------------------|
| setBackgroundColor()  | 设置引用块背景颜色     | 	string        默认："rgba(234, 239, 255, 0.62)" |
| setBorderColor() | 	设置引用块左边颜色    | 	string        默认："#409EFF" |

#### 7.列表样式（lvTabulate）
--- 
需要注意的是列表样式中字体大小与字体颜色，请使用 lvText 进行设置

#### 8.复选样式（lvCheckbox）
--- 
需要注意的是复选样式中字体大小与字体颜色，请使用 lvText 进行设置

### 详细使用说明
详细用法请参考CSDN文章：[lv-markdown-in for CSDN](https://blog.csdn.net/weixin_44640245/article/details/134630747)

### 其他
有关Markdown的更多信息，请参阅GitHub指南 [Markdown](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#what)

### 版权声明
本项目采用 MIT 开源协议，允许商用，修改，再分发。