1 Star 7 Fork 0

luvi / lv-markdown-in

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 6.21 KB
一键复制 编辑 原始数据 按行查看 历史
luvi 提交于 2024-01-30 10:38 . 新增img标签,与font标签的支持

AtkTs3.0+ 鸿蒙原生 Markdown 解析插件

lv-markdown-in 插件介绍

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

lv-markdown-in 安装


1.运行命令

ohpm install @luvi/lv-markdown-in

2.在项目中引入插件

import { lvMarkdownIn } from @luvi/lv-markdown-in

3.在代码中使用

lvMarkdownIn({ text: content.toString() }) // content为文本内容

自定义样式

1.标题样式(lvTitle)


// 导入 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)


// 导入 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)


// 导入 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() 进行设置

// 导入 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)


提供 暗夜明亮 双主题

// 导入 lvCode
import { lvCode } from '@luvi/lv-markdown-in'
// 用法
lvCode.setTheme("dark")         // 设置代码块主题为暗夜
方法 说明 参数
setTheme() 设置代码块主题 string: "dark" / "light" 默认:"dark"

6.引用块样式(lvQuote)


需要注意的是引用块中字体大小与字体颜色,请使用 lvText 进行设置

// 导入 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

其他

有关Markdown的更多信息,请参阅GitHub指南 Markdown

版权声明

本项目采用 MIT 开源协议,允许商用,修改,再分发。

1
https://gitee.com/luvi/lv-markdown-in.git
git@gitee.com:luvi/lv-markdown-in.git
luvi
lv-markdown-in
lv-markdown-in
master

搜索帮助