Markwon库代码高亮用法记录

最近在研究使用Markwon库来显示Markwon文本
也查看了一些教程和官方文档。
在配置代码高亮的时候出现了一些问题
通过Syntax Highlight这个文档并没有看到如何配置代码高亮。
由于本身也是不太了解 Prism4j

final Markwon markwon = Markwon.builder(context)
        .usePlugin(SyntaxHighlightPlugin.create(prism4j, prism4jTheme))
        .build();

这个代码是文档提供的代码,从代码中看,使用代码高亮插件的话需要提供prism4jprism4jTheme对象。
目前文档也没有提供,于是就去翻看了一下代码仓库,看是否有可用的信息

提示
从代码仓库的Readme文件中可以看到存在sample app。
既然有demo,那这就好办了,就算没有文档,看代码也能找到解决方案啊。
于是去访问了这个sample app的仓库
从sample app的仓库的Readme文件中可以看到
demo
有运行的截图,并且还有apk可以安装体验,于是下载一下这个apk,点击打开。哦吼,直接无法工作,我是科学上网的啊~~~~
apk
一番折腾,最后下载下这个apk,并且也安装查看了
然后去翻看对应代码
ReadMeActivity中使用了代码高亮,从代码看如何初始化markwon

 private val markwon: Markwon
        get() = Markwon.builder(this)
                .usePlugin(ImagesPlugin.create())
                .usePlugin(HtmlPlugin.create())
                .usePlugin(TableEntryPlugin.create(this))
                .usePlugin(SyntaxHighlightPlugin.create(Prism4j(GrammarLocatorDef()), Prism4jThemeDefault.create(0)))
                .usePlugin(TaskListPlugin.create(this))
                .usePlugin(StrikethroughPlugin.create())
                .usePlugin(ReadMeImageDestinationPlugin(intent.data))
                .usePlugin(object : AbstractMarkwonPlugin() {
                    override fun configureVisitor(builder: MarkwonVisitor.Builder) {
                        builder.on(FencedCodeBlock::class.java) { visitor, block ->
                            // we actually won't be applying code spans here, as our custom view will
                            // draw background and apply mono typeface
                            //
                            // NB the `trim` operation on literal (as code will have a new line at the end)
                            val code = visitor.configuration()
                                    .syntaxHighlight()
                                    .highlight(block.info, block.literal.trim())
                            visitor.builder().append(code)
                        }
                    }

                    override fun configureConfiguration(builder: MarkwonConfiguration.Builder) {
                        builder.linkResolver(ReadMeLinkResolver())
                    }
                })
                .build()

从代码看,主要是

.usePlugin(SyntaxHighlightPlugin.create(Prism4j(GrammarLocatorDef()), Prism4jThemeDefault.create(0)))

然后去尝试,最后发现GrammarLocatorDef()不存在
然后就代码中浅浅的搜索了一下
搜索结果
可以看到有一句话
Where GrammarLocatorDef is a generated grammar locator (if you use prism4j-bundler annotation processor)
当使用了 prism4j-bundler则可以生成
恍然大悟
于是在build.gradle.kts中添加这个

plugins {
...
    kotlin("kapt")
}
implementation("io.noties:prism4j:2.0.0")
kapt("io.noties:prism4j-bundler:2.0.0")

同步,编译
还是不存在。。。。。。。
看来真不懂prism4j😂
于是就去看一下这个prism4j
prism4j
可以看到这样可以生成
于是自己在代码中添加

import io.noties.prism4j.annotations.PrismBundle

@PrismBundle(
    includeAll = true,
    grammarLocatorClassName = ".MyGrammarLocatorTest"
)
class MyGrammarLocator {}

然后去使用

val prism4j = Prism4j(MyGrammarLocatorTest())

编译,哎,好了,效果如下
效果图
终于整出来了,前前后后看了不少文档。
在此记录!!!

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐