当前位置：首页 > 每日看点 > 正文内容

那种markdown编辑器能够支持githu风格的markdown?

卡卷网1年前 (2025-01-10)每日看点210

<>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) } } })

<>3.沙箱文件模式（sandox）

使用沙箱文件模式，需要将loadMode字段设置为sandox，loadCallack为可选参数，用于资源加载时的回调检查。

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默认：32setLevel2Title()设置2级标题字号numer/string默认：29setLevel3Title()设置3级标题字号numer/string默认：26setLevel4Title()设置4级标题字号numer/string默认：23setLevel5Title()设置5级标题字号numer/string默认：20setLevel6Title()设置6级标题字号numer/string默认：17setLevelTitleColor()设置标题字体颜色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默认：15setTextColor()设置文本颜色string默认："#303133"setTextMarkackground()设置标记文本的背景颜色string默认："#7cff8321"setTextLineHeight()设置标记文本的行高string默认："24"

<>3.超链接样式（lvLink）

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

<>4.图片样式（lvImage）

需要注意的是：若在md文本内容中未单设置图片宽高，将采用默认全局宽高，可通过setImgWidth()与setImgHeight()进行设置。若强制开启图片全局宽高将会覆盖所有图片的宽高，即使在md文本内容中已设置图片宽高，可通过setConfGloale()进行设置

//导入lvImage import{lvImage}from'@luvi/lv-markdown-in' //用法 lvImage.setImgWidth("70%")//设置图片宽度为70% lvImage.setImgHeight(null)//设置图片高度为null lvImage.setConfGloal(true)//强制开启图片全局宽高 方法说明参数setImageWidth()设置图片宽度numer/string默认："60%"setImageHeight()设置图片高度string默认：nullsetConfGloal()强制开启全局宽高oolean默认：false

<>5.代码块（lvCode）

提供暗夜与明亮双主题，同时可设置索引列的展示与隐。

//导入lvCode import{lvCode}from'@luvi/lv-markdown-in' //用法 lvCode.setTheme("dark")//设置代码块主题为暗夜 lvCode.setIndexState(true)//展示代码块索引列 方法说明参数setTheme()设置代码块主题string:"dark"/"light"默认："dark"setIndexState()设置索引列的展示与隐oolean默认："false"

<>6.引用块样式（lvQuote）

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

//导入lvQuote import{lvQuote}from'@luvi/lv-markdown-in' //用法 lvQuote.setackgroundColor("rga(234,239,255,0.62)")//设置引用块背景颜色为淡粉色 lvQuote.setorderColor("red")//设置引用块左边颜色为红色 方法说明参数setackgroundColor()设置引用块背景颜色string默认："rga(234,239,255,0.62)"setorderColor()设置引用块左边颜色string默认："#409EFF"

<>7.样式

需要注意的是列表、表格、任务列表、脚注、删除线、引用块等语法中字体大小与字体颜色，请使用lvText进行设置

<>DN同步文章

详细用法请参考DN文章：lv-markdown-inforDN

<>

有关Markdown的更多信息，请参阅Markdown教程Markdown

<>关于坚果派

最初我们以鸿蒙为基石，不断向同级诸如ArkUI-X、仓颉，以及同类诸如蓝河、欧拉等扩展，如今在不断努力和尝试下，我们平台已具备了各类产品的优秀开发团队及支持的万粉团队。专注于分享的技术包括HarmonyOS/OpenHarmony、仓颉、ArkUI-X、AI、lueOS作。团队成员主要聚集在北京，上海，南京，深圳，广州，苏州、长沙、宁夏等地，目前已为华为、vivo、、亚马逊以及三方技术社区提供各类咨询200+。累计粉丝100+w，孵化开发者10w+，高校20+、企业10+。自研应用14款，三方库70个，鸿蒙原生应用课程500+。持续助力鸿蒙仓颉等生态繁荣发展。

三方库列表：s://do./sheet/DYnl1dUxhV21JTWNl?ta=08J2

扫描二维码推送至手机访问。

版权声明：本文由卡卷网发布，如需转载请注明出处。

本文链接：https://www.kajuan.net/ttnews/2025/01/8581.html

分享给朋友：
返回列表

上一篇：如何编写一个chrome和edge可以使用的扩展程序？

下一篇：有哪些JVM性能调优常用参数？

相关文章

OZON平台什么产品好卖？

ozon选品的核心重点我不说 你们全网也不见说的这么干的教学了你信我就按照我说的思路去走 不信的出去买课去 一时间消化不了的先点赞收藏起来 真不中了下载也行 因为最近总有坏人给我使诈 平台已经下了我八个视频了 还都是实操教学不废话的那种 气...

Layui 不更新了么？

Layui 不更新了么？

layui2.8已经于今天正式发布了，新增优化了大量特性，这里按照layui更新日志的模块结构，详细为你一一介绍。基础风格调整新版调整主色调为#16baaa，在原有的墨绿基础上赋予了清新。更简单的构建构建代码更简单，除字体外，只有js和cs...

k70和红米note14pro+咋选啊?

k70和红米note14pro+咋选啊?

首选红米K70，可满足题主的功能需求。红米 Note 14 pro+的使用者定位并不是学生，红米K70的使用者定位才是学生。一、k70和红米note14pro+各自的参数红米K70推出的定位初衷，是主打性能为主。最佳使用对象是喜欢游戏者，...

抖音和快手最大的区别是什么？

1、目标人群定位不同抖音：一二线城市，占比52%，大专学历以上，女性偏多。抖音以年轻群体居多。快手：三四线城市，占比64%，高中学历以下，男女更均衡。快手所覆盖的年龄段范围更广。2、内容创作的形式和深度不同抖音：偏深层，内容的装饰及表达更高...

你是如何在不依靠工资收入的情况下赚到一万元的？

你是如何在不依靠工资收入的情况下赚到一万元的？

分享几个路子稳，门槛低，变现快，适合年轻人的靠谱的副业。绝对不是送外卖、滴滴、搬砖等等的苦力活，这几个副业都是能是性价比极高，还能让你快速成长的工作。想通过副业实现暴富、立马月入过万的同学，建议速速划走。今天撇哥就给大家分享100+个靠谱赚...

为什么说不懂电脑的不要碰AMD？

作为一个资深垃圾佬，说缺点前，先说优点吧AMD CPU（后续简称AU）的优点：处理器对比Intel，三级缓存更大，最明显的感知就是，网游帧数更高（5900X,7900X之类高端型号都是双CCX共享大缓存，反而不如次一点的CPU帧数更高）；相...

发表评论

访客

看不清，换一张

◎欢迎参与讨论，请在这里发表您的看法和观点。

Copyright © 2019-2024 www.kajuan.net 版权所有

Powered By Z-BlogPHP. Theme by TOYEAN.