那种markdown编辑器能够支持githu风格的markdown?
作者：卡卷网发布时间：2025-01-10 19:29浏览数量：84次评论数量：0次
<>lv-markdown-in
<>使用效果演示
<>简介
鸿蒙原生Markdown解析预览库，可在OpenHarmony、HarmonyOS运行，兼容api9（1.x.x版本）、api10及以上（2.x.x版本），支持3种内容加载模式（纯文本、资源文件、沙箱文件），支持html常用标签解析，致力于更便捷的OpenHarmony设备的Markdown内容解析。
<>lv-markdown-in目前支持
| 基本语法 | 拓展语法 |
|---|
| 标题 | 表格 |
| 段落 | 代码块 |
| 换行 | 脚注 |
| 强调（粗体、斜体、粗斜体） | 任务列表 |
| 引用块 | 删除线 |
| 列表 | 支持html常用标签解析 |
| 代码 | |
| 分割线 | |
| 链接 | |
| 图片 | |
<>版本说明【重要】
<>1.x.x版本系列兼容API9<>2.x.x-2.0.2版本系列兼容API10及以上<>2.0.3及以上版本系列兼容API11及以上<>lv-markdown-in安装
1.运行命令
ohpminstall@luvi/lv-markdown-in
2.在项目中引入插件
import{LvMarkdownIn}from@luvi/lv-markdown-in
3.在代码中使用
LvMarkdownIn({text:content.toString()})//content为文本内容
<>3种内容加载模式（纯文本、资源文件、沙箱文件）
<>1.纯文本模式（text）
LvMarkdownIn({
text:content.toString(),//content为文本内容
loadMode:"text",//默认text可省略
loadCallack:{//loadCallack回调可省略
success(r:LMICallack){
console.log("luvi-markdown-in>"+r.code,r.message)
},
fail(r:LMICallack){
console.error("luvi-markdown-in>"+r.code,r.message)
}
}
})
<>2.资源文件模式（rawfile）
使用资源文件模式，需要将loadMode字段设置为rawfile，rawfilePath需要填写模块中rawfile目录的文件路径，同时需要传递应用上下文context，loadCallack为可选参数，用于资源加载时的回调检查。
LvMarkdownIn({
context:getContext(),//资源文件模式必填参数
loadMode:"rawfile",
rawfilePath:"t/text.md",
loadCallack:{
success(r:LMICallack){
console.log("luvi-markdown-in>"+r.code,r.message)
},
fail(r:LMICallack){
console.error("luvi-markdown-in>"+r.code,r.message)
}
}
})
LvMarkdownIn({
loadMode:"sandox",
sandoxPath:getContext().getApplicationContext().filesDir+"/t2/text.md",
loadCallack:{
success(r:LMICallack){
console.log("luvi-markdown-in>"+r.code,r.message)
},
fail(r:LMICallack){
console.error("luvi-markdown-in>"+r.code,r.message)
}
}
})
<>超链接、图片点击拦截，自定义控制跳转行为
需要注意的是，使用拦截行为后，retnfalse才可拦截正常拦截库中默认打开行为，retntrue则不拦截，但会进入该逻辑。
//导入mdRegister
import{mdRegister}from'@luvi/lv-markdown-in'
//注册超链接点击回调、retnfalse则表示拦截，自行处理超链接跳转逻辑
mdRegister.HandleHyperlink=(l:string)=>{
console.log("拦截跳转>"+l)
retnfalse
}
//注册图像点击回调、retnfalse则表示拦截，自行处理图像展示逻辑
mdRegister.HandleImage=(l:string)=>{
console.log("拦截打开图像>"+l)
retnfalse
}
<>动态样式改变
在页面加载完成后动态改变样式，以lvText字体样式为例，在自定义组件中需要使用@State装饰lvText，类型为LvText，后续使用新属性修改样式即可，示例代码如下。
//导入lvTitle
import{lvTitle,LvText}from'@luvi/lv-markdown-in'
//@State装饰lvText
@StatenewText:LvText=lvText
//动态改变字体颜色
utton("改变lvText.setTextColor").onClick(()=>{
this.newText.setTextColor("lue")
})
<>自定义样式
<>1.标题样式（lvTitle）
//导入lvTitle
import{lvTitle}from'@luvi/lv-markdown-in'
//用法
lvTitle.setLevel1Title(50)//设置一级标题字号50
lvTitle.setLevelTitleColor("lue")//设置标题字体颜色为蓝色
| 方法 | 说明 | 参数 |
|---|
| setLevel1Title() | 设置1级标题字号 | numer/string默认：32 |
| setLevel2Title() | 设置2级标题字号 | numer/string默认：29 |
| setLevel3Title() | 设置3级标题字号 | numer/string默认：26 |
| setLevel4Title() | 设置4级标题字号 | numer/string默认：23 |
| setLevel5Title() | 设置5级标题字号 | numer/string默认：20 |
| setLevel6Title() | 设置6级标题字号 | numer/string默认：17 |
| setLevelTitleColor() | 设置标题字体颜色 | string默认："#303133" |
<>2.文字样式（lvText）
//导入lvText
import{lvText}from'@luvi/lv-markdown-in'
//用法
lvText.setTextSize(20)//设置文本字号20
lvText.setTextColor("red")//设置文本颜色为红色
lvText.setTextMarkackground("#000")//设置标记文本的背景颜色为黑色
lvText.setTextLineHeight("25")//设置标记文本的行高
| 方法 | 说明 | 参数 |
|---|
| setTextSize() | 设置文本字号 | numer/string默认：15 |
| setTextColor() | 设置文本颜色 | string默认："#303133" |
| setTextMarkackground() | 设置标记文本的背景颜色 | string默认："#7cff8321" |
| setTextLineHeight() | 设置标记文本的行高 | string默认："24" |
<>3.超链接样式（lvLink）
//导入lvLink
import{
