尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Markwon 语法高亮实战:基于 Prism4j 的 markwon-syntax-highlight 模块完全指南

Markwon 语法高亮实战:基于 Prism4j 的 markwon-syntax-highlight 模块完全指南 UI组件移动开发【免费下载链接】MarkwonAndroid markdown library (no WebView)项目地址https://gitcode.com/gh_mirrors/ma/Markwon点击查看免费下载本指南以 Markwon 仓库中的 docs/docs/v3/syntax-highlight/README.md 为骨架系统讲解如何在 Android 应用中为 Markwon 渲染的 Markdown 代码块添加语法高亮。你将掌握Prism4jSyntaxHighlight的两种创建方式与 fallback 回退机制、Prism4jTheme主题体系内置 Default/Darkula 及自定义主题、以及从核心渲染调用链到 Span 着色的完整底层原理可直接照搬到自己的项目中。说明本文对应的是 v3 系列文档原文档带LegacyWarning /标记。同一主题在 v4 文档中也有对应章节可参考 docs/docs/v4/syntax-highlight/README.md两者核心 API 一致。模块定位为 Markwon 代码块注入 Span 级着色markwon-syntax-highlight是一个独立的 Markwon 扩展模块模块级配置见 markwon-syntax-highlight/gradle.propertiesartifactId 为syntax-highlight与所有官方构件共享同一版本号见 docs/docs/v3/install.md。它的职责非常单一把 Markdown 围栏代码块Fenced Code Block中的纯文本转换为带颜色 Span 的Spannable从而在 TextView 上呈现语法高亮。它并不自己实现词法分析而是建立在由 noties 维护的 Prism4j 词法库之上——Prism4j 负责把代码切分成带类型的 token本模块负责把这些 token 翻译成 Android 的 Span 体系。换句话说Prism4j 只管认识语言Prism4jTheme只管怎么上色二者通过Prism4jSyntaxHighlight桥接进 Markwon 的渲染管线。模块对外暴露的关键类型均位于 markwon-syntax-highlight/src/main/java/io/noties/markwon/syntax/包括Prism4jSyntaxHighlight核心适配器实现 Markwon 核心的SyntaxHighlight接口SyntaxHighlightPluginMarkwon 插件一键接入Prism4jTheme接口、Prism4jThemeBase、Prism4jThemeDefault、Prism4jThemeDarkula主题体系。快速上手三步接入语法高亮第一步创建 Prism4j 实例Prism4j 需要语法文法Grammar来识别语言。最简单的方式是使用prism4j-bundler注解处理器自动生成文法定位器final Prism4j prism4j new Prism4j(new GrammarLocatorDef());其中GrammarLocatorDef就是由prism4j-bundler注解处理器生成的文法定位器类。在仓库的示例应用中可以看到它的两种典型用法全量打包所有文法ReadMeActivity上用PrismBundle(includeAll true)注解见 app-sample/src/main/java/io/noties/markwon/app/readme/ReadMeActivity.kt按需打包指定语言SampleCodeFragment上使用PrismBundle(include [java, kotlin], grammarLocatorClassName .GrammarLocatorSourceCode)见 app-sample/src/main/java/io/noties/markwon/app/sample/ui/SampleCodeFragment.kt。include列表越小生成的文法定位器与运行时占用越小因此按需 include 语言是控制 APK 体积与内存的推荐做法。第二步创建高亮器与主题Prism4jSyntaxHighlight实现的是 Markwon 核心定义的SyntaxHighlight接口见 markwon-core/src/main/java/io/noties/markwon/syntax/SyntaxHighlight.java其highlight(Nullable String info, NonNull String code)方法接收代码围栏的语言信息与代码文本。不带回退fallback的创建方式final SyntaxHighlight highlight Prism4jSyntaxHighlight.create(Prism4j, Prism4jTheme);带回退语言fallback的创建方式——当info中声明的语言在 Prism4j 实例中找不到对应文法时会自动改用 fallback 语言final SyntaxHighlight highlight Prism4jSyntaxHighlight.create(Prism4j, Prism4jTheme, String);第三步以插件方式接入 Markwon最省事的方式是直接用官方提供的SyntaxHighlightPlugin源码见 markwon-syntax-highlight/src/main/java/io/noties/markwon/syntax/SyntaxHighlightPlugin.javafinal Markwon markwon Markwon.builder(context) .usePlugin(SyntaxHighlightPlugin.create(prism4j, prism4jTheme)) .build();插件同样提供带 fallback 语言的create(prism4j, theme, fallbackLanguage)重载。接入后普通TextView或 Markwon 的 Recycler 条目渲染 Markdown 时围栏代码块就会自动带上高亮。仓库示例应用即采用这一方式渲染 README见 app-sample/src/main/java/io/noties/markwon/app/readme/ReadMeActivity.kt.usePlugin(SyntaxHighlightPlugin.create(Prism4j(GrammarLocatorDef()), Prism4jThemeDefault.create(0)))深入 Prism4jSyntaxHighlightfallback 与边界行为从源码看 Prism4jSyntaxHighlight.javahighlight(info, code)的完整行为如下空代码直接返回自 4.2.2 起code为空字符串时原样返回不进入高亮流程源码第 47-49 行无语言信息不高亮info为null时直接返回原文。源码注释解释了原因——LICENCE 之类的代码块常常不带语言声明此时强行高亮没有意义源码第 51-55 行fallback 回退逻辑info非空但prism4j.grammar(info)找不到文法时若 fallback 非空则改用prism4j.grammar(fallback)源码第 70-79 行文法仍不存在则原样返回避免在无文法可用的语言上报错或渲染异常源码第 81-85 行正常高亮prism4j.tokenize(code, grammar)得到 token 流后交给Prism4jSyntaxVisitor逐节点转写为SpannableStringBuilder源码第 91-96 行。可以看到这个实现是尽力而为、永不崩溃的设计任何文法缺失的场景都优雅降级为纯文本这对生产环境中的混合 Markdown 内容非常友好。主题体系内置 Default 与 DarkulaPrism4jTheme是模块特有的类型——Prism4j 本身不关心渲染着色是 Markwon 这边的责任。接口定义如下见 Prism4jTheme.javapublic interface Prism4jTheme { ColorInt int background(); ColorInt int textColor(); void apply( NonNull String language, NonNull Prism4j.Syntax syntax, NonNull SpannableStringBuilder builder, int start, int end ); }模块内置两个开箱即用的实现均可通过工厂方法create()获取Prism4jThemeDefault.create()浅色主题默认背景色0xFFf5f2f0默认文字色0xdd000000见 Prism4jThemeDefault.javaPrism4jThemeDarkula.create()深色主题默认背景色0xFF2d2d2d默认文字色0xFFa9b7c6见 Prism4jThemeDarkula.java。两个主题自 3.0.0 起还提供create(ColorInt int background)重载允许自定义背景色。例如示例应用传0透明表示背景交由外部布局控制Prism4jThemeDefault.create(0)内置主题的 token 配色Prism4jThemeBase通过init()返回的ColorHashMap维护 token 类型到颜色的映射。Default 主题的映射如下token 类型颜色comment / prolog / doctype / cdata0xFF708090punctuation0xFF999999property / tag / boolean / number / constant / symbol / deleted0xFF990055selector / attr-name / string / char / builtin / inserted0xFF669900operator / entity / url0xFF9a6e3aatrule / attr-value / keyword0xFF0077aafunction / class-name0xFFDD4A68regex / important / variable0xFFee9900Darkula 主题则对应 IntelliJ Darkula 的经典配色如 keyword 取0xFFcc7832、string 取0xFF6a8759、function 取0xFFffc66d并额外覆盖delimiter、annotation、attr-value、inserted、deleted等类型。自定义主题继承 Prism4jThemeBase 事半功倍文档明确指出当然没有什么能阻止你定义自己的主题。完全从零实现Prism4jTheme也是合法的但推荐继承Prism4jThemeBase见 Prism4jThemeBase.java它提供了这些开箱即用的帮助方法applyAlpha(int alpha, color)/applyAlpha(float alpha, color)给颜色叠加透明度Default 主题对namespace类型就以.7F透明度渲染见 Prism4jThemeDefault.java 第 75-77 行isOfType(expected, type, alias)判断 token 是否匹配指定类型或其别名ColorHashMap链式add(color, name...)批量注册 token 类型→颜色color(language, type, alias)按类型查找颜色查不到时回退到别名applyColor(...)默认实现给[start, end)区间设置ForegroundColorSpan子类可覆写以扩展行为。一个自定义主题的最小骨架public class MyTheme extends Prism4jThemeBase { private final int background; public MyTheme(ColorInt int background) { this.background background; } Override public int background() { return background; } Override public int textColor() { return 0xFF000000; } Override protected ColorHashMap init() { return new ColorHashMap() .add(0xFF800000, tag, boolean, number) .add(0xFF008000, string, char) .add(0xFF0000FF, keyword, atrule); } }源码级原理从代码块到着色 Span 的完整调用链要理解这个模块如何长进 Markwon需要看核心渲染管线。Markwon 核心在渲染围栏代码块时见 markwon-core/src/main/java/io/noties/markwon/core/CorePlugin.java 第 355-379 行的visitCodeBlock会调用visitor.builder() .append(\u00a0).append(\n) .append(visitor.configuration().syntaxHighlight().highlight(info, code));即高亮完全委托给MarkwonConfiguration中注册的SyntaxHighlight实现见 markwon-core/src/main/java/io/noties/markwon/MarkwonConfiguration.java。默认情况下核心注册的是SyntaxHighlightNoOp见 markwon-core/src/main/java/io/noties/markwon/syntax/SyntaxHighlightNoOp.java它把代码原样返回——这正是未引入本模块时代码块无高亮的原因。SyntaxHighlightPlugin通过两个钩子完成接线见 SyntaxHighlightPlugin.javaconfigureTheme(...)把主题的textColor()、background()同步到 Markwon 主题的codeTextColor/codeBackgroundColor保证代码块默认文字与底色和主题一致configureConfiguration(...)注册Prism4jSyntaxHighlight实例接管后续所有代码块的高亮。真正的着色发生在Prism4jSyntaxVisitor见 Prism4jSyntaxVisitor.java它继承 Prism4j 的AbsVisitorvisitText直接追加 token 的原始文本visitSyntax先递归处理子节点、记录写入前后的 builder 长度区间再调用theme.apply(language, syntax, builder, start, end)为区间上色。只有end ! start时才应用主题避免为空的 token 区间产生无意义 Span。Span 的生成方式也值得留意主题默认以ForegroundColorSpan着色而 Default / Darkula 主题还会对important/bold类型追加 Markwon 核心的StrongEmphasisSpan、对italic类型追加EmphasisSpan见两个主题的applyColor覆写从而在 TextView 上呈现加粗与斜体效果。不依赖插件的手动用法如果不想以插件方式接入例如只对个别代码块高亮或像示例应用那样为代码片段单独渲染可以直接使用Prism4jSyntaxHighlight实例final Prism4j prism4j new Prism4j(new GrammarLocatorDef()); final SyntaxHighlight highlight Prism4jSyntaxHighlight.create(prism4j, Prism4jThemeDarkula.create()); // 对任意代码片段按指定语言高亮 final CharSequence colored highlight.highlight(java, codeSource); textView.setText(colored);仓库示例应用中的代码预览页正是这样做的——在后台线程调用highlight.highlight(language, code.sourceCode)得到着色后的文本再交给 TextView见 app-sample/src/main/java/io/noties/markwon/app/sample/ui/SampleCodeFragment.kt 第 41-47 行。由于高亮涉及词法分析涉及大段代码时建议同样放到非 UI 线程执行。小结接入路径Prism4j实例配合prism4j-bundler生成的GrammarLocatorDefPrism4jTheme主题 →Prism4jSyntaxHighlight或直接SyntaxHighlightPlugin→Markwon.builder().usePlugin(...)。主题体系内置Prism4jThemeDefault与Prism4jThemeDarkula自定义主题推荐继承Prism4jThemeBase复用ColorHashMap、applyAlpha、isOfType等工具。健壮性设计空代码、无语言信息、文法缺失三种场景均安全降级为原文输出不会影响 Markdown 正常渲染。原理落点核心的CorePlugin.visitCodeBlock通过MarkwonConfiguration.syntaxHighlight()委托给本模块token 由Prism4jSyntaxVisitor转写、由Prism4jTheme.apply上色最终以 Span 形式写入SpannableStringBuilder交给 TextView 渲染。想继续深入可进一步阅读 docs/docs/v3/core/configuration.md 了解 Markwon 配置体系的整体结构或直接阅读本模块源码目录 markwon-syntax-highlight/src/main/java/io/noties/markwon/syntax/ 下的全部实现。赞分享UI组件移动开发【免费下载链接】MarkwonAndroid markdown library (no WebView)项目地址https://gitcode.com/gh_mirrors/ma/Markwon点击查看免费下载相关推荐Markwon 语法高亮基于 Prism4j 的代码块高亮渲染指南Markwon 语法高亮基于 Prism4j 的代码块高亮渲染指南 markwon syntax highlight 是 Markwon 生态中专用于 代码块UI组件移动开发Markwon基于 Spannable 的 Android 原生 Markdown 渲染库完全指南Markwon基于 Spannable 的 Android 原生 Markdown 渲染库完全指南 本文围绕开源仓库 Markwon https://linkUI组件移动开发Hugo 语法高亮Syntax Highlighting完整实战指南代码围栏、highlight 短代码与 transform.Highlight 函数Hugo 语法高亮Syntax Highlighting完整实战指南代码围栏、highlight 短代码与 transform.Highlight 函数开发工具前端CLI上一篇解锁AMD Ryzen全部潜能SMU Debug Tool完整使用指南下一篇终极指南如何用LinkSwift网盘直链下载助手一键解决9大云盘限速问题创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表